/* =========================================================================
   mobile.css - Modul-eigenes CSS (additiv zu _shared).
   Erlaubt laut §7: grid-template-columns + Pillen-Farben aus den Tokens.
   Listen-Mechanik und -Optik kommen aus _shared (list-grid, forms, form-cell,
   hub-card, stat-card, empty-state, file-attachment).
   ========================================================================= */

/* ---- Dashboard (Unternehmens-Auswahl, index.php) und Uebersicht ---------- */
/* Nur das Seiten-Padding der Raster. Karten-Optik kommt aus blocks/hub-card,
   Empty-Zustand aus blocks/empty-state. */
.mob-dash-grid {
  padding: var(--space-4) var(--space-8) var(--space-10);
}
@media (max-width: 1100px) {
  .mob-dash-grid { padding-left: var(--space-4); padding-right: var(--space-4); }
}
.mob-hub { padding: var(--space-6); }

/* ---- Bestand: Spaltenraster ---------------------------------------------- */
/* Titelbild · Kennzeichen oder Seriennummer · Bezeichnung · Art · Betreuung ·
   Stand · Naechste Frist · Akteure · Loeschen. Breiten aus der CSS-Variable
   des col-resize-Bausteins; die Liste hier ist der Fallback vor dem ersten
   Zug und muss zur `colResizeColumns`-Liste in mobile-list.js passen (neun
   Zellen). */
.mob-bestand-grid {
  display: grid;
  grid-template-columns: var(--mob-bestand-cols, 52px minmax(200px, 1.4fr) 130px 140px 150px 110px 150px minmax(160px, 1fr) 44px);
}

/* ---- Fristen-Seite: Spaltenraster ---------------------------------------- */
/* Objekt · Frist · Datum · Faelligkeit. Eine Zeile je Objekt und Frist,
   read-only; der Doppelklick oeffnet das Objekt. */
/* Fristen-Seite: Objekt, dann eine Spalte je Frist (HU, AU, SP, UVV,
   Versicherung, Leasing, Wartung), jede Zelle ein Datum-Editor. */
.mob-fristen-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(7, minmax(118px, 1fr));
}

/* Der Stand ist eine Zahlen-Zelle des Bausteins (.idf-list-cell-num im Kopf
   und in der Zeile): rechts, Tabellenziffern. Keine eigene Regel, sonst
   weicht die Schrift von den anderen Listen ab (Joerg, 04.09.2026). */

/* ---- Pillen: Farben ueber die Tokens, Geometrie aus idf-pill-tag --------- */
/* Status des Objekts. „Im Haus" ist der Zustand, der beim Auftragsobjekt
   zaehlt, deshalb der Akzent; Reparatur warnt, das Ende ist neutral. */
.mob-status-pill[data-status="aktiv"]        { background: var(--tint-confirm); color: var(--confirm); }
.mob-status-pill[data-status="im_haus"]      { background: var(--tint-accent);  color: var(--accent); }
.mob-status-pill[data-status="in_reparatur"] { background: var(--tint-orange);  color: var(--orange-text); }
.mob-status-pill[data-status="abgemeldet"]   { background: var(--tint-neutral); color: var(--mid); }
.mob-status-pill[data-status="verkauft"]     { background: var(--tint-indigo);  color: var(--indigo); }
.mob-status-pill[data-status="verschrottet"] { background: var(--tint-neutral); color: var(--mid); }

/* Betreuung: in der Liste nur die Ausnahme, im Fenster immer. */
.mob-betreuung-pill[data-betreuung="auftrag"]   { background: var(--tint-accent);  color: var(--accent); }
.mob-betreuung-pill[data-betreuung="eigen"]     { background: var(--tint-confirm); color: var(--confirm); }
.mob-betreuung-pill[data-betreuung="verwaltet"] { background: var(--tint-indigo);  color: var(--indigo); }
.mob-betreuung-pill[data-betreuung="fremd"]     { background: var(--tint-neutral); color: var(--mid); }

/* Art des Ereignisses (Historie und Ereignis-Fenster). Kommen und Gehen in
   Blau und Indigo, die eigene Leistung in der Hausfarbe, Schaden und Unfall
   in Rot, Werkstatt in Orange, Pruefungen in Tuerkis. Alles Uebrige traegt
   die Grundfarbe von idf-pill-tag. */
.mob-ereignis-pill[data-art="annahme"]      { background: var(--tint-accent);  color: var(--accent); }
.mob-ereignis-pill[data-art="rueckgabe"]    { background: var(--tint-indigo);  color: var(--indigo); }
.mob-ereignis-pill[data-art="anschaffung"]  { background: var(--tint-indigo);  color: var(--indigo); }
.mob-ereignis-pill[data-art="zulassung"]    { background: var(--tint-indigo);  color: var(--indigo); }
.mob-ereignis-pill[data-art="folierung"]    { background: var(--tint-primary); color: var(--primary); }
.mob-ereignis-pill[data-art="beschriftung"] { background: var(--tint-primary); color: var(--primary); }
.mob-ereignis-pill[data-art="einbau"]       { background: var(--tint-primary); color: var(--primary); }
.mob-ereignis-pill[data-art="aufbereitung"] { background: var(--tint-primary); color: var(--primary); }
.mob-ereignis-pill[data-art="schaden"]      { background: var(--tint-red);     color: var(--red); }
.mob-ereignis-pill[data-art="unfall"]       { background: var(--tint-red);     color: var(--red); }
.mob-ereignis-pill[data-art="reparatur"]    { background: var(--tint-orange);  color: var(--orange-text); }
.mob-ereignis-pill[data-art="wartung"]      { background: var(--tint-orange);  color: var(--orange-text); }
.mob-ereignis-pill[data-art="inspektion"]   { background: var(--tint-orange);  color: var(--orange-text); }
.mob-ereignis-pill[data-art="reifenwechsel"] { background: var(--tint-orange); color: var(--orange-text); }
.mob-ereignis-pill[data-art="akkuwechsel"]  { background: var(--tint-orange);  color: var(--orange-text); }
.mob-ereignis-pill[data-art="hu_au"]        { background: var(--tint-confirm); color: var(--confirm); }
.mob-ereignis-pill[data-art="uvv"]          { background: var(--tint-confirm); color: var(--confirm); }
/* Ein reiner Zaehlerstand ist eine Notiz, kein Vorgang: neutral. */
.mob-ereignis-pill[data-art="zaehlerstand"] { background: var(--tint-neutral); color: var(--mid); }
/* Ereignis aus einer erledigten Aufgabe (n8n-Flow, Issue 1036). */
.mob-ereignis-pill[data-art="aufgabe"]      { background: var(--tint-primary); color: var(--primary); }
/* Die Aufgaben-Pille in der Historie-Zeile ist ein Knopf (oeffnet die Aufgabe). */
.mob-hist-aufgabe { cursor: pointer; }

/* ---- Objekt-Fenster: Historie-Zeile -------------------------------------- */
/* Die Zeile ist die o2m-Zeile des Standard-Artefakts (Flex-Reihe). Hier nur
   das Vorschaubild davor: 44 px wie die Thumbnails in functions/file-attachment,
   leer eine Flaeche derselben Groesse, damit die Titel fluchten. */
.mob-hist-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.mob-hist-thumb.is-leer {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* ---- Objekt-Fenster: Akteure und Zaehler (Inline-Edit-Tabellen) ---------- */
/* Beide Tabellen laufen im Listen-Standard: Kopf, Zeilen, Zellen, Stift und
   Loesch-Pille kommen aus functions/list-view (idf-list-thead, idf-list-rows,
   idf-list-row, idf-list-grid) wie in der Bestandteile-Liste des Leistungen-
   Fensters. Hier stehen nur die Spaltenraster (§7.6). Bis v0.1.5 hatten
   sie ein eigenes Raster ohne die Zellen-Regeln des Bausteins, und die
   Zeile sprang bei der Eingabe (Joerg, 04.09.2026). */
/* Akteur · Unternehmen · Rolle · von · bis · Loeschen */
.mob-bet-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) 150px 110px 110px 44px;
}
/* Datum · Stand · Ereignis · Loeschen */
.mob-zaehler-grid {
  display: grid;
  grid-template-columns: 130px 140px minmax(160px, 1fr) 44px;
}
/* Einheit-Zelle und Tabelle mit Luft dazwischen. */
.mob-zaehler { display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 700px) {
  .mob-bet-grid { grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 120px 44px; }
  /* Der Zeitraum faellt zuerst weg: er ist der Wert, den man am Handy am
     seltensten pflegt. Mit der Spezifitaet des Bausteins, sonst gewinnt
     dessen display: flex an der Zelle. */
  .idf-list-thead .mob-bet-grid > :nth-child(4),
  .idf-list-thead .mob-bet-grid > :nth-child(5),
  .idf-list-rows .idf-list-row .mob-bet-grid > :nth-child(4),
  .idf-list-rows .idf-list-row .mob-bet-grid > :nth-child(5) { display: none; }
}

/* ---- Objekt-Fenster: Titelbild ------------------------------------------- */
/* Layout aus .idf-basics-split (Standard-Artefakt), das Bild-Feld ist
   .idf-image-field.is-square (file-attachment). Hier nur der Rahmen. */
.mob-bild-block { min-width: 0; }