/* ══ Mac: je Reiter eine Hauptsache (M11, seit 25.10.2026) ═══════════════════
   Vincent: am Mac wie eine Apple-App, ruhige Seiten, oben das Ergebnis. Nur
   verlagern, nichts löschen: Verweis-Kacheln und Nullen fallen weg, wo die
   Seitenleiste dorthin führt bzw. nichts zu sagen ist; Einstellungen, QR,
   Automatik, Cron und die Rechnungs-Technik klappen an Ort und Stelle ein.
   Akutes (rote Zeilen, Fehler, Ungespeichertes) klappt nie weg.

   Jede Regel hängt an html.mac (mac-frueh.js): am iPhone (html.hh), am iPad
   und für die Rolle buchhalter greift hier nichts. Der Zu-Zustand hängt an
   festen IDs und gilt damit ab dem ersten Bild; mac-reiter.js setzt nur
   Pfeil, Kurzinfo, offen (data-mac-auf) und akut (data-mac-akut) dazu.
   Scheitert sein Aufbau, setzt es data-mac-reiter-aus und hier klappt
   nichts ein. Gedruckt wird wie bisher: Klappen und Reihenfolge gelten nur
   für den Bildschirm (QR-Aushang, Plakate). Plan: docs/plan-desktop-mac.md,
   M11. */

/* ── Betrieb: der Wartungsplan ist die Hauptsache ─────────────────────── */

/* Nur Signale über 0; operations.js markiert Nullen selbst. Ist alles 0,
   fällt das Cockpit ganz weg. Steht dort ein Ladefehler (keine .ops-kpi),
   bleibt es stehen: unbekannt ist keine Ruhe. */
html.mac #tab-betrieb #ops-cockpit .ops-kpi-null { display: none; }
html.mac body:not(.kacheln-anordnen) #tab-betrieb [data-kachel="ops-cockpit"]:has(.ops-kpi):not(:has(.ops-kpi:not(.ops-kpi-null))) { display: none; }

/* Verweis-Kacheln: Die Seitenleiste führt zu Team, Late Checkout und
   Meldewesen, dort steht dasselbe ausführlich. Trägt eine davon eine rote
   Zeile (Kalender nicht geblockt, Schein zu vernichten), bleibt sie stehen.
   Dieselbe Regel wie am iPhone (handy-reiter.css). Eigene Anordnung
   (kacheln-eigen) schlägt die Vorgabe, wie am iPhone. */
html.mac body:not(.kacheln-anordnen) #tab-betrieb:not(.kacheln-eigen) :is([data-kachel="team-portal"], [data-kachel="late-checkout"], [data-kachel="meldewesen"]):not(:has([style*="crit-ink"])) { display: none; }

/* Leeres Aufgaben-Board nur, wenn „Neue Aufgabe“ in der Symbolleiste steht
   (mac-reiter.js setzt dann data-mac-neu-in-leiste). Sichtbar bleibt es mit
   Aufgaben, mit dem offenen Formular und mit einem Ladefehler; „Lade…“
   allein ist kein Element und blendet deshalb nicht erst ein und dann aus. */
html.mac body:not(.kacheln-anordnen) #tab-betrieb[data-mac-neu-in-leiste]:not(.kacheln-eigen) [data-kachel="aufgaben"]:not(:has(#ops-board > :not(.ops-empty-add))) { display: none; }
/* Ohne Symbolleiste bleibt vom leeren Board eine Zeile: „Neue Aufgabe“
   steht im Kopf, der Erklärblock darunter wiederholt nur den Weg. */
html.mac #tab-betrieb:not([data-mac-neu-in-leiste]) #ops-board > .ops-empty-add { padding: 0; align-items: flex-start; text-align: left; }
html.mac #tab-betrieb:not([data-mac-neu-in-leiste]) #ops-board > .ops-empty-add > :not(.oe-title) { display: none; }
html.mac #tab-betrieb:not([data-mac-neu-in-leiste]) #ops-board > .ops-empty-add > .oe-title {
  font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--text-muted);
}

/* ── Nullen-Kacheln: Kommunikation, Zahlungen, Meldewesen ─────────────── */
/* mac-reiter.js markiert Kacheln mit 0 bzw. 0 €; stehen nur Nullen da,
   fällt die ganze Reihe weg. */
html.mac :is(#komm-kpis, #zahlungen-liste, #mw-kacheln) [data-mac-null] { display: none; }
html.mac :is(#komm-kpis, #zahlungen-liste > .komm-kpis, #mw-kacheln):not(:has(> :not([data-mac-null]))) { display: none; }

/* Ohne Kennzahlen ist der Abschnitt ein Abschnitt ohne eigene Karten und
   wird selbst zur Karte, wie seine Nachbarn (farbwelten-rahmen.css zählt
   die ausgeblendeten Kacheln noch mit und ließe den Text am Rand stehen). */
html.mac :is(#zahlungen-section, #tab-kommunikation > section):has(.komm-kpi):not(:has(.komm-kpi:not([data-mac-null]))) {
  padding: var(--fw-pad); background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Mail-Protokoll: „Aktualisieren“ neben der Überschrift ist am Mac ↻ der
   Symbolleiste (NEU_LESEN in mac-symbolleiste.js ruft dasselbe KOMM.laden);
   zwei Knöpfe gleichen Namens auf einer Seite waren einer zu viel. */
html.mac #tab-kommunikation .section-title > .btn[onclick="ladeKommunikation()"] { display: none; }

/* Late Checkout: Ist noch nichts verkauft, bleibt EIN Satz stehen („Noch
   keine Buchung über das Widget …“) statt dreimal 0,00 € und zweier leerer
   Listen. Sobald etwas verkauft ist, steht alles wie bisher da. */
html.mac #lco-buchungen > .ck-kacheln:has(> .ck-kachel[data-mac-null]:first-child) { display: block; }
html.mac #lco-buchungen > .ck-kacheln > .ck-kachel[data-mac-null]:not(:first-child) { display: none; }
html.mac #lco-buchungen > .ck-kacheln > .ck-kachel[data-mac-null]:first-child { padding: 0; background: none; border: 0; box-shadow: none; }
html.mac #lco-buchungen > .ck-kacheln > .ck-kachel[data-mac-null]:first-child > :not(.ck-fuss) { display: none; }
html.mac #lco-buchungen > .ck-kacheln > .ck-kachel[data-mac-null]:first-child > .ck-fuss { margin: 0; font-size: var(--fs-sm); }
html.mac #lco-buchungen > .ck-karte:has(> .ck-titel + .ck-leer:last-child) { display: none; }

@media screen {
  /* ── Late Checkout: Ergebnis und Status oben ───────────────────────────
     #lco-inhalt ist eine Spalte (.ck-inhalt); order ändert nur die Anzeige,
     das DOM und damit latecheckout.js bleiben unberührt. */
  html.mac #lco-inhalt > #lco-status { order: -3; }
  html.mac #lco-inhalt > #lco-hinweise { order: -2; }
  html.mac #lco-inhalt > #lco-buchungen { order: -1; }

  /* ── Klappen an Ort und Stelle, zu ab dem ersten Bild ──────────────────
     Der Kopf bleibt, alles daneben klappt ein. data-mac-auf: geöffnet;
     data-mac-akut: darin steht etwas, das nicht verschwinden darf. */
  html.mac:not([data-mac-reiter-aus]) :is(#mw-digital, #mw-gemeinde):not([data-mac-auf]):not([data-mac-akut]) > :not(.section-title),
  html.mac:not([data-mac-reiter-aus]) :is(#mw-aushang, #lco-einstellungen):not([data-mac-auf]):not([data-mac-akut]) > :not(.ck-titel),
  html.mac:not([data-mac-reiter-aus]) #lco-plakate-karte:not([data-mac-auf]):not([data-mac-akut]) > :not(.ck-posten) { display: none; }

  /* Einkauf: der Katalog (Artikelauswahl, „Nachbestellen bei Amazon“,
     team-einkauf.js) klappt bis auf den Titel ein; die Liste darüber bleibt
     die Hauptsache. Die Karten tragen keine ID und entstehen bei jedem
     Laden neu, erkannt werden sie am Feld „Artikel ergänzen“ und an ihrer
     Folge (mac-reiter.js, KATALOG und STAMM). */
  html.mac:not([data-mac-reiter-aus]) #team-einkauf-inhalt > .ck-karte:has(#team-kat-neu):not([data-mac-auf]):not([data-mac-akut]) > :not(.ck-titel),
  html.mac:not([data-mac-reiter-aus]) #team-einkauf-inhalt > .ck-karte:has(#team-kat-neu) + .ck-karte:not([data-mac-auf]):not([data-mac-akut]) > :not(.ck-titel) { display: none; }
  html.mac #team-einkauf-inhalt > .ck-karte:has(#team-kat-neu) > .ck-titel,
  html.mac #team-einkauf-inhalt > .ck-karte:has(#team-kat-neu) + .ck-karte > .ck-titel {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap; min-height: 28px;
  }
  html.mac[data-mac-reiter] #team-einkauf-inhalt > :is([data-mac-auf], [data-mac-akut]) > .ck-titel { margin-bottom: var(--sp-2); }

  /* Ein zugeklappter Abschnitt hat keine Karten mehr und wird selbst zur
     Karte, eine Zeile wie die Klappen der Übersicht und wie „Technik“. */
  html.mac:not([data-mac-reiter-aus]) :is(#mw-digital, #mw-gemeinde):not([data-mac-auf]):not([data-mac-akut]) {
    padding: var(--fw-pad); background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  html.mac[data-skin="glas"]:not([data-mac-reiter-aus]) :is(#mw-digital, #mw-gemeinde):not([data-mac-auf]):not([data-mac-akut]) { border: 1px solid var(--border); }
  html.mac:not([data-mac-reiter-aus]) :is(#mw-digital, #mw-gemeinde):not([data-mac-auf]):not([data-mac-akut]) > .section-title,
  html.mac:not([data-mac-reiter-aus]) :is(#mw-aushang, #lco-einstellungen):not([data-mac-auf]):not([data-mac-akut]) > .ck-titel { margin-bottom: 0; }
  html.mac:not([data-mac-reiter-aus]) :is(#mw-digital, #mw-gemeinde):not([data-mac-auf]):not([data-mac-akut]) > .section-title .section-subtitle { display: none; }

  /* Kopf: Titel links, Kurzinfo und Winkel rechts (.mac-ende), wie in der
     Übersicht (.m-coll-head.klapp). Kein Pfeil vor dem Titel: Die Titel
     stehen bündig mit den Abschnitten daneben. Höhe und Anordnung stehen
     schon vor dem Skript fest, der Winkel kommt ohne Ruck dazu. */
  html.mac :is(#mw-digital, #mw-gemeinde) > .section-title,
  html.mac :is(#mw-aushang, #lco-einstellungen) > .ck-titel,
  html.mac #lco-plakate-karte > .ck-posten {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap; min-height: 28px;
  }
  html.mac :is(#mw-digital, #mw-gemeinde) > .section-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.mac[data-mac-reiter] [data-mac-kopf] { cursor: pointer; }
  html.mac[data-mac-reiter] .mac-gruppe > [data-mac-kopf] { display: flex; align-items: center; gap: var(--sp-3); min-height: 28px; }
  html.mac[data-mac-reiter] [data-mac-kopf] > .mac-ende {
    display: flex; align-items: center; gap: var(--sp-2);
    flex: 0 1 auto; min-width: 0; margin-left: auto;
  }
  html.mac[data-mac-reiter] [data-mac-kopf] .mac-kurz { text-align: right; text-transform: none; letter-spacing: 0; }
  html.mac[data-mac-reiter] [data-mac-kopf] .mac-kurz[data-ton="warn"] { color: var(--warn-ink); }
  html.mac[data-mac-reiter] :is([data-mac-auf], [data-mac-akut]) > [data-mac-kopf] .mac-kurz,
  html.mac[data-mac-reiter] #tab-rechnungen[data-mac-auf] > .mac-gruppe .mac-kurz { display: none; }

  /* Der Winkel wie .m-coll-chev: nach unten zu, nach oben offen. Ein
     eigener Knopf, keine btn-ghost-Variante: Die Farbwelten zeichnen an
     jeden btn-ghost im Abschnittskopf einen Verweis-Winkel. Ohne Übergang,
     Animationen sind am Mac aus (M1). */
  html.mac[data-mac-reiter] [data-mac-kopf] .mac-klapp {
    flex: none; width: 28px; min-width: 28px; height: 28px; padding: 0;
    border: 0; background: transparent; color: var(--text-muted);
  }
  html.mac[data-mac-reiter] [data-mac-kopf] .mac-klapp:hover { background: var(--bg-card2); color: var(--text); }
  html.mac[data-mac-reiter] [data-mac-kopf] .mac-klapp > [data-lucide] { width: 18px; height: 18px; margin: 0; color: inherit; }
  html.mac[data-mac-reiter] [data-mac-kopf] .mac-klapp[aria-expanded="true"] > [data-lucide] { transform: rotate(180deg); }

  /* ── Rechnungen: Technik eingeklappt ───────────────────────────────────
     Engine, Vorschau und Live-Lauf stehen unter „Technik“ am Ende. Ein
     Abschnitt mit Akutem (fehlgeschlagene Rechnung, Engine nicht LIVE) oder
     mit Gästenamen (Behoben-Liste der Engine) bleibt offen an seinem Platz,
     „Zu erledigen“ rückt nach oben. „Letzte Läufe & Fehler“ nennt Gäste und
     bleibt deshalb offen (mac-reiter.js, TECHNIK). Eigene Anordnung und
     „Anordnen“ sehen die Abschnitte wie bisher. */
  html.mac body:not(.kacheln-anordnen) #tab-rechnungen:not(.kacheln-eigen) > #rechnungen-todo-section { order: -1; }
  html.mac body:not(.kacheln-anordnen) #tab-rechnungen:not(.kacheln-eigen) > .mac-gruppe { order: 1; }
  html.mac body:not(.kacheln-anordnen) #tab-rechnungen:not(.kacheln-eigen) > :is([data-kachel="engine"], [data-kachel="dryrun"], [data-kachel="runlive"]):not([data-mac-akut]) { order: 2; }
  html.mac:not([data-mac-reiter-aus]) body:not(.kacheln-anordnen) #tab-rechnungen:not(.kacheln-eigen):not([data-mac-auf]) > :is([data-kachel="engine"], [data-kachel="dryrun"], [data-kachel="runlive"]):not([data-mac-akut]) { display: none; }
  html.mac :is(body.kacheln-anordnen .mac-gruppe, .kacheln-eigen > .mac-gruppe) { display: none; }
  html.mac[data-mac-reiter] .mac-gruppe > .section-title { margin-bottom: 0; }
  /* Die Felder in „Zu erledigen“ (dashboard.js, mr-*) standen je 168 px
     breit: „Firma (nur Name, ohne z. Hd.)…“, „E-Mail (leer = ohne
     Mailversand)…“ und jede längere Adresse brachen ab. Am Mac füllen sie
     die Zeile, Firma und E-Mail breiter, die PLZ schmal. */
  html.mac #tab-rechnungen :is([id^="mr-firma-"], [id^="mr-ustId-"], [id^="mr-strasse-"], [id^="mr-ort-"], [id^="mr-email-"]) { flex: 1 1 180px; }
  html.mac #tab-rechnungen :is([id^="mr-firma-"], [id^="mr-email-"]) { flex-basis: 260px; }
  html.mac #tab-rechnungen [id^="mr-plz-"] { flex: 0 1 130px; }

  /* ── Erklärabsätze: eine Zeile, der Rest hinter (i) ───────────────────
     Nur der (i)-Knopf schaltet um; der Absatz bleibt Text, den man
     markieren und kopieren kann. */
  html.mac[data-mac-reiter] [data-mac-erklaer] { position: relative; padding-right: var(--sp-6); }
  /* Eine Zeile läuft über die ganze Karte; die 72 Zeichen aus mac-optik.css
     gelten erst für den aufgeklappten Text (bei 590 px brach „Seit 1.1.2025
     müssen …“ mitten im Satz ab, daneben lagen 500 px frei). */
  html.mac[data-mac-reiter] [data-mac-erklaer]:not([data-mac-ganz]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }
  html.mac[data-mac-reiter] [data-mac-erklaer] > .mac-info {
    position: absolute; top: 0; right: 0;
    width: 20px; min-width: 20px; height: 20px; padding: 0;
    border: 0; background: transparent; color: var(--text-subtle);
  }
  html.mac[data-mac-reiter] [data-mac-erklaer] > .mac-info:hover,
  html.mac[data-mac-reiter] [data-mac-erklaer] > .mac-info[aria-expanded="true"] { color: var(--text); }
  html.mac[data-mac-reiter] [data-mac-erklaer] > .mac-info > [data-lucide] { width: 16px; height: 16px; margin: 0; }
}