/*!
 * cf-mobile-fix.css - Mobil-Korrekturen fuer das Camperfuchs-Backend
 * Ergaenzt die aeltere Mobil-Schicht (cf-mobo-style in cf-vermieter.js).
 * Greift ausschliesslich bis 768px, Desktop bleibt komplett unberuehrt.
 * Eingebunden in /backend/index.html.
 */
@media (max-width: 768px) {

  /* ------------------------------------------------------------------
   * 0. Menueleiste baendigen - MUSS hier stehen, nicht nur in der alten
   *    Schicht: cf-vermieter.js (und damit cf-mobo-style) laedt absichtlich
   *    verzoegert (erst bei Interaktion oder requestIdleCallback). Bis dahin
   *    ist die Menueleiste ungebremst 1768px breit und die GANZE Seite laesst
   *    sich seitwaerts schieben - genau in den ersten Sekunden nach dem
   *    Oeffnen, wo der Nutzer hinschaut. Als <link> im head greift das sofort.
   *    Messbar mit: scrollTo(999,0) -> scrollX bleibt 0, wenn es sitzt.
   * ------------------------------------------------------------------ */
  management-menu .ui.menu,
  management-menu > .ui.menu,
  cf-station-filter-menu .ui.menu {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    max-width: 100vw !important;
  }
  /* Die alte Schicht blendete .right.menu aus — damit waren Suche, „Mein Profil"
     und AUSLOGGEN am Handy gar nicht erreichbar. Bleibt sichtbar, die Leiste
     scrollt ja seitwaerts. Hoehere Spezifitaet, weil cf-mobo-style spaeter laedt. */
  management-menu .ui.menu > .right.menu.menu { display: flex !important; }

  /* Untermenues (Einstellungen, Standorte, A, Nutzer) wurden vom scrollenden
     Menue abgeschnitten: das Dropdown ist 269px hoch, der Container 48px.
     Als fixed-Panel unter der Leiste haengt es nicht mehr im Overflow fest. */
  management-menu .ui.menu .ui.dropdown > .menu,
  cf-station-filter-menu .ui.dropdown > .menu {
    position: fixed !important;
    top: 50px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 99998 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25) !important;
  }
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }

  /* ------------------------------------------------------------------
   * 1. Tabellen: Semantic UI zerlegt sie unter 768px in gestapelte
   *    Bloecke - dadurch waren Buchungen, Rechnungen und Kunden am Handy
   *    unlesbar. Wir stellen die echte Tabelle wieder her und lassen
   *    stattdessen den Container seitwaerts scrollen.
   * ------------------------------------------------------------------ */
  /* Bewusst OHNE Tag-Einschraenkung: die Tabellen haengen mal in einem div,
     mal in einem <span> (Buchungsvorgang) und mal direkt in einem Custom
     Element wie <app-list> (Rechnungen). Ohne das sprengt die Tabelle die
     ganze Seite und der komplette Bildschirm scrollt seitwaerts. */
  *:has(> table.ui.table) {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  /* inline-Eltern (span, app-*) brauchen block, Tabellenzellen aber nicht */
  *:not(td):not(th):not(tr):has(> table.ui.table) { display: block !important; }

  .ui.table:not(.unstackable) {
    display: table !important;
    width: auto !important;
    min-width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .ui.table:not(.unstackable) thead { display: table-header-group !important; }
  .ui.table:not(.unstackable) tbody { display: table-row-group !important; }
  .ui.table:not(.unstackable) tr    { display: table-row !important; }
  .ui.table:not(.unstackable) tr > th,
  .ui.table:not(.unstackable) tr > td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: .38em .55em !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    /* lange Firmennamen sonst als ellenlange Spalte */
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .ui.table:not(.unstackable) tr > th {
    background: #f6f7f8 !important;
    border-bottom: 1px solid #d8dadc !important;
    font-size: 11.5px !important;
  }
  /* Semantic blendet beim Stapeln teils die Kopfzeile aus */
  .ui.table:not(.unstackable) thead th { visibility: visible !important; }

  /* ------------------------------------------------------------------
   * 2. Die schwebenden Elemente unten sortieren. Vorher lagen
   *    Zahlungserinnerungs-Leiste, Zurueck/Aktualisieren, Glocke und Foxi
   *    uebereinander, die Leiste ragte links aus dem Bild.
   *    Neue Ordnung: Leiste ganz unten ueber die volle Breite,
   *    darueber Glocke (links), Navigation (Mitte), Foxi (rechts).
   * ------------------------------------------------------------------ */
  #cf-pr-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    top: auto !important;
    bottom: 8px !important;
  }
  /* Auf Vorgangsseiten hat die Leiste bis zu 6 Buttons und war dadurch 505px
     breit (bei 390px Bildschirm, x = -65). Jetzt eine Zeile zwischen Glocke
     und Foxi, seitwaerts wischbar - wie die Menueleiste oben. */
  #cf-bs-nav {
    left: 64px !important;
    right: 70px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    top: auto !important;
    bottom: 56px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #cf-bs-nav > * {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 6px 9px !important;
  }

  /* Solange ein Dialog offen ist (Semantic setzt body.dimmed), die schwebenden
     Elemente wegnehmen — sie lagen sonst genau ueber „Abbrechen"/„Senden" des
     Versand-Dialogs und man traf die Knoepfe kaum. */
  body.dimmed #cf-bs-nav,
  body.dimmed #cfn-bell,
  body.dimmed #vr-launcher,
  body.dimmed #cf-pr-panel,
  body.dimmed #cf-qb,
  body.dimmed #cf-abr-box,
  body.dimmed #cf-abr-mini {
    display: none !important;
  }

  /* Der kleine Euro-Knopf, der den Abrechnungs-Kasten zurueckholt */
  #cf-abr-mini {
    right: 8px !important;
    bottom: 112px !important;
    left: auto !important;
    top: auto !important;
  }

  /* Abrechnungs-Panel schwebte mitten im Text; jetzt unten gebuendelt */
  #cf-abr-box {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    top: auto !important;
    bottom: 110px !important;
    max-height: 36vh !important;
    overflow: auto !important;
    font-size: 11.5px !important;
  }
  #cfn-bell {
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    bottom: 60px !important;
  }
  #vr-launcher {
    right: 8px !important;
    left: auto !important;
    top: auto !important;
    bottom: 56px !important;
  }
  /* "Fahrzeug sperren" schwebte mitten ueber dem Belegungskalender */
  #cf-qb {
    top: auto !important;
    bottom: 118px !important;
    right: 8px !important;
    left: auto !important;
    font-size: 12px !important;
    padding: 7px 11px !important;
  }

  /* ------------------------------------------------------------------
   * 3. Elemente, die rechts aus dem Bild ragten
   * ------------------------------------------------------------------ */
  .ui.button.right.floated,
  .ui.buttons.right.floated,
  a.ui.button.right.floated {
    float: none !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 6px 6px 0 !important;
    box-sizing: border-box !important;
  }

  /* Semantic-Grid-Spalten stapeln. Ohne flex-basis passiert nichts: die
     Spalten stehen in einem flex-Container, ein blosses width:100% wird von
     `flex: 0 0 auto` ausgehebelt. Betraf u. a. den Kopf der Fahrzeug-Edit-
     Seite (Ueberschrift 235px neben 141px Buttonspalte). */
  .ui.grid { flex-wrap: wrap !important; }
  .ui.grid > .column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
  }
  /* Tab-Reihen (z. B. Typ-Auswahl bei Neue Buchung) seitwaerts scrollen */
  .ui.attached.menu:not(.tabular),
  .ui.three.item.menu,
  .ui.two.item.menu,
  .ui.four.item.menu {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ui.three.item.menu > .item,
  .ui.two.item.menu > .item,
  .ui.four.item.menu > .item {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 13px !important;
  }

  /* Feld-Icons links lagen ueber dem Platzhaltertext ("P(x)Z/Ort",
     "(x)tum auswaehlen") - Eingabefeld bekommt links Platz. */
  .ui.left.icon.input > input,
  .ui.left.icon.input > input[type="text"] {
    padding-left: 2.7em !important;
  }

  /* ------------------------------------------------------------------
   * 4. Filterbloecke verdichten - vorher zwei Bildschirmhoehen, bevor
   *    Kalender oder Liste ueberhaupt anfingen.
   * ------------------------------------------------------------------ */
  .ui.form .field { margin-bottom: .5em !important; }
  .ui.form .field > label {
    margin-bottom: .25em !important;
    font-size: 13px !important;
  }
  .ui.form input[type="text"],
  .ui.form input[type="number"],
  .ui.form select,
  .ui.selection.dropdown {
    padding: .55em .7em !important;
    min-height: 38px !important;
  }
  .ui.segment { padding: .8em .8em !important; }
  .ui.grid > .column:not(.row) { padding-top: .3em !important; padding-bottom: .3em !important; }

  /* ------------------------------------------------------------------
   * 5b. Semantic-Karten (.ui.four.cards & Co.) erzwingen N Karten pro Reihe.
   *     Auf dem Buchungsvorgang war "Gewaehlter Artikel" dadurch 70px breit
   *     und 582px hoch - ein Wort pro Zeile. Mobil: eine Karte pro Reihe.
   * ------------------------------------------------------------------ */
  .ui.cards { display: block !important; margin: 0 !important; }
  .ui.cards > .card {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  /* ------------------------------------------------------------------
   * 5c. Formular-Tabellen (Buchungspositionen): die Typ-Spalte allein war
   *     253px breit, die Tabelle 602px - man musste zum Preis wischen.
   *     table-layout:fixed + eigene Spaltenbreiten bringen alle sechs
   *     Spalten in den Bildschirm. Erkennungsmerkmal: die Mini-Button-
   *     Gruppe "Standard / (An)zahlung" in der ersten Spalte.
   * ------------------------------------------------------------------ */
  .ui.table:has(.ui.mini.buttons) {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ui.table:has(.ui.mini.buttons) th,
  .ui.table:has(.ui.mini.buttons) td {
    white-space: normal !important;
    max-width: none !important;
    overflow: hidden !important;
    font-size: 10.5px !important;
    padding: 4px 4px !important;
  }
  .ui.table:has(.ui.mini.buttons) tr > *:nth-child(1) { width: 64px !important; }
  .ui.table:has(.ui.mini.buttons) tr > *:nth-child(2) { width: 96px !important; }
  .ui.table:has(.ui.mini.buttons) tr > *:nth-child(3) { width: 40px !important; }
  .ui.table:has(.ui.mini.buttons) tr > *:nth-child(4) { width: 54px !important; }
  .ui.table:has(.ui.mini.buttons) tr > *:nth-child(5) { width: 60px !important; }
  .ui.table:has(.ui.mini.buttons) tr > *:nth-child(6) { width: 28px !important; }
  .ui.table .ui.mini.buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ui.table .ui.mini.buttons > .button {
    width: 100% !important;
    font-size: 10px !important;
    padding: 5px 3px !important;
  }
  .ui.table td .ui.input,
  .ui.table td input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
    padding: 4px 5px !important;
  }

  /* Platz fuer die schwebende Leiste, damit der Seitenfuss erreichbar bleibt */
  body { padding-bottom: 108px !important; }

  /* ------------------------------------------------------------------
   * 6. Belegungskalender: vorher waren nur 4 Tage gleichzeitig sichtbar.
   *    Der Tagbereich (.fiveteen.wide.column) hatte 164px von 390, den Rest
   *    frassen aussere Container-Raender (76px) und die 150px breite
   *    Fahrzeugspalte. Beides eingedampft -> 7 Tage, also eine ganze Woche.
   *    Die Tageszellen selbst bleiben 40px breit und unangetastet: ihre
   *    left-Werte setzt Angular inline in 40er-Schritten, jede Aenderung
   *    der Zellbreite wuerde das Raster zerreissen.
   * ------------------------------------------------------------------ */
  .ui.fluid.container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .ui.fluid.container:has(r-booking-grid) {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .ui.segment:has(r-booking-grid) {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  /* Die Fahrzeugspalte traegt inline width:150px und hat keine eigene Klasse */
  r-booking-grid [style*="width: 150px"] { width: 86px !important; }
  r-booking-grid [style*="width: 150px"] * {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }
  r-booking-grid [style*="width: 150px"] img {
    width: 24px !important;
    height: auto !important;
  }
  r-booking-grid .fiveteen.wide.column { width: calc(100% - 88px) !important; }
}