/* Nur fuer Telefone. Angelegt von patch-pwa-mobil.py,
 * berichtigt von patch-mobil-fix.py.
 *
 * Eigene Datei und nicht in style.css hinein: die drei vorhandenen
 * Stylesheets haben 37 KB, und keine Regel hier ueberschreibt etwas
 * dauerhaft - alles steht in Media Queries. Damit ist der mobile Teil in
 * einem Stueck zurueckzunehmen, indem man die Zeile in der index.html
 * entfernt.
 *
 * Ab 900px baut style.css die Navigation schon zu einer Icon-Leiste um
 * (--nav-w: 56px, Beschriftungen aus). Das bleibt so. Was hier steht,
 * beginnt darunter und laesst die Leiste in Ruhe:
 *
 *   .shell { grid-template-columns: var(--nav-w) 1fr; }
 *
 * .main traegt keine eigene Spaltenangabe. Es liegt nur deshalb in
 * Spalte 2, weil .nav Spalte 1 besetzt. Nimmt man .nav mit display: none
 * heraus, rutscht .main in Spalte 1 - und wenn die null Pixel breit ist,
 * bleibt vom Inhalt eine Spalte von einem Zeichen. Genau das ist beim
 * ersten Versuch passiert.
 */

/* Was nur auf dem Telefon erscheint. Ausserhalb der Query unsichtbar -
 * so steht es im Markup, ohne auf dem Rechner etwas zu veraendern. */
.nur-mobil { display: none; }

@media (max-width: 700px) {

  /* --- Geruest ------------------------------------------------------ */
  /* Die Navigation BLEIBT. 56 Pixel neben 334 sind zu verschmerzen, und
   * ohne sie kommt man auf dem Telefon in keine andere Ansicht. */
  .pg { padding: 12px 10px 28px; height: auto; }
  .main { overflow: visible; }

  /* --- Kopfzeile ---------------------------------------------------- */
  .hdr { padding: 0 8px; gap: 6px; }
  .hdr-title { font-size: 15px; line-height: 1.15; }
  .hdr-icon { display: none; }

  /* Die Fremdmarken weichen als Erstes: drei Logos nebeneinander lassen
   * fuer den Abmeldeknopf keinen Platz, und wessen System es ist, steht
   * im Titel.
   *
   * !important steht hier nicht aus Bequemlichkeit: die Logos tragen
   * display: block als Inline-Stil direkt im Markup, und den schlaegt
   * eine Stylesheetregel sonst nicht. */
  .hdr-right img { display: none !important; }
  .hdr-sep { display: none !important; }
  /* Das eigene Logo bleibt, kleiner. Zweite Stelle, gleicher Grund. */
  .hdr-right img:first-of-type {
    display: block !important; height: 18px !important;
  }

  /* --- Karten ------------------------------------------------------- */
  .card-hdr { flex-direction: column; align-items: stretch; gap: 8px;
              padding: 10px 12px; }
  .two-col { grid-template-columns: 1fr; }
  .pg-hdr { gap: 10px; }
  .pg-title { font-size: 17px; }

  /* --- Die Matrix --------------------------------------------------- */
  /* Aus der Matrix wird eine Liste. Die Planspalten verschwinden, und
   * damit der Grund fuer die 1100px Mindestbreite und das Querscrollen.
   * Die Plaene sind nicht verloren - sie stehen in dem aufklappbaren
   * Block in jeder Facilityzeile. */
  .matrix-wrap { overflow-x: visible; }
  table.aip { min-width: 0; }
  table.aip thead th.band,
  table.aip thead th.plan,
  table.aip td.cell { display: none; }
  table.aip th.lbl, table.aip td.lbl {
    position: static; min-width: 0; max-width: none; width: auto;
  }
  table.aip tr.l0 td, table.aip tr.l1 td,
  table.aip tr.l2 td, table.aip tr.l3 td { padding: 8px 6px; }
  .lbl-inner { flex-wrap: wrap; gap: 4px; }
  .lbl-name { white-space: normal; }

  /* Die aufklappbare Planliste */
  .nur-mobil { display: block; }
  .plan-aufklapp { width: 100%; margin-top: 6px; }
  .plan-aufklapp > summary {
    cursor: pointer; font-size: 11px; font-weight: 600;
    color: var(--blue); padding: 4px 0; list-style: none;
  }
  .plan-aufklapp > summary::-webkit-details-marker { display: none; }
  .plan-aufklapp > summary::before { content: "\25b8 "; }
  .plan-aufklapp[open] > summary::before { content: "\25be "; }
  .plan-liste { display: flex; flex-direction: column; gap: 1px;
                margin: 4px 0 2px; }
  .plan-zeile {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 6px; background: var(--gray-0);
    border-radius: 3px; font-size: 12px;
  }
  .plan-zeile .plan-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Fingerkuppen, nicht Mauszeiger: die Marken in der Tabelle sind 18px,
   * hier 28 - unter 24 trifft man sie auf einem Telefon nicht. */
  .plan-zeile .doc-lnk {
    min-width: 28px; height: 28px; font-size: 12px; font-weight: 700;
    border-radius: 4px; padding: 0 6px;
  }
  .plan-leer { padding: 7px 6px; font-size: 11.5px;
               color: var(--text-muted); }

  /* --- Tabellen allgemein ------------------------------------------- */
  /* Die uebrigen Tabellen bleiben Tabellen und scrollen quer. Sie haben
   * fuenf bis zehn Spalten, nicht vierzig - dort ist Querscrollen die
   * ehrlichere Loesung als eine zweite Darstellung, die auseinanderlaeuft. */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  table.d-tbl, table.maptbl { font-size: 12px; }

  /* --- Dialoge ------------------------------------------------------ */
  /* Der Zellendialog steht in App.jsx auf minWidth: 560 - die Zahl, die
   * auf einem Telefon am meisten weh tut. Hier eingefangen, ohne die
   * Inline-Angabe anzufassen. */
  .d-body, .pick, .d-center {
    min-width: 0 !important; max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .hdr-title { font-size: 14px; }
  .pg { padding: 10px 6px 24px; }
  table.aip tr.l0 td, table.aip tr.l1 td { padding: 7px 5px; }
}