/* ============================================================================
   apple.css · Monteur-App · „Neue Oberfläche" (Apple-Look) · v2.130.0
   ----------------------------------------------------------------------------
   Wunsch Lars (22.09.2026) zum Entwurf „Monteur-App im Apple-Look":
   „Bau das so in die App, damit die Mitarbeiter umschalten können."

   • Dieselbe App, zweite Darstellung – wie im Büro (public/admin/apple.css).
     Abläufe, Knöpfe, Daten: unverändert. Keine Regel wirkt ohne html.ui-apple;
     das prüft tests/_test-app-apple-oberflaeche.cjs.
   • Die App ist dunkel gebaut und hat eine handgepflegte Hell-Liste (index.html,
     „HELLE ANSICHT"). Hier gibt es deshalb ZWEI Wertesätze: Apple-Dunkel
     (html.ui-apple) und Apple-Hell (html.ui-apple.light). Die Regeln lesen nur
     die Variablen – eine Fläche, zwei Farben, keine zweite Liste.
   • Regeln tragen `body` im Selektor und !important: sie müssen die Hell-Liste
     (html.light …!important) und Inline-Farben (Heldenkarte, Besonderheiten)
     sicher überstimmen.
   • Bleibt gleich: CI-Gelb für den EINEN Knopf, Status- und Warnfarben.
   ============================================================================ */

/* ── 1) Wertesätze ───────────────────────────────────────────────────────── */
html.ui-apple{
  --ap-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Inter",system-ui,sans-serif;
  /* Apple-Dunkel */
  --ap-bg:#000000; --ap-card:#1c1c1e; --ap-card-2:#2c2c2e;
  --ap-fill:rgba(118,118,128,.24); --ap-fill-press:rgba(118,118,128,.34);
  --ap-sep:rgba(84,84,88,.65);
  --ap-label:#f5f5f7; --ap-label-2:#98989d; --ap-label-3:#6e6e73;
  --ap-ink:#ffd60a;
  --ap-bar:rgba(22,22,24,.9);
  --ap-red:#ff453a; --ap-red-bg:rgba(255,69,58,.18); --ap-red-ink:#ff6961;
  --ap-stop-bg:#f5f5f7; --ap-stop-ink:#1d1d1f;
  --ap-shadow:none; --ap-sheet-shadow:0 -10px 40px rgba(0,0,0,.6);
  --ap-tile:#2c2c2e;
}
html.ui-apple.light{
  /* Apple-Hell – der Entwurf */
  --ap-bg:#f2f2f7; --ap-card:#ffffff; --ap-card-2:#f2f2f7;
  --ap-fill:rgba(118,118,128,.12); --ap-fill-press:rgba(118,118,128,.2);
  --ap-sep:#e5e5ea;
  /* v2.147.0 (Lesbarkeit gemessen): Nebentext und Gelb-Schrift lagen auf getönten Karten bei 4,1–4,4:1 */
  --ap-label:#1d1d1f; --ap-label-2:#5f5f64; --ap-label-3:#6e6e73;
  --ap-ink:#7a5f00;
  --ap-bar:rgba(249,249,250,.94);
  --ap-red:#ff3b30; --ap-red-bg:rgba(215,0,21,.08); --ap-red-ink:#c4001a;
  --ap-stop-bg:#1d1d1f; --ap-stop-ink:#ffffff;
  --ap-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04); --ap-sheet-shadow:0 -10px 40px rgba(0,0,0,.18);
  --ap-tile:#f2f2f7;
}

/* ── 2) Schrift & Grund ──────────────────────────────────────────────────── */
html.ui-apple,
html.ui-apple body{ background:var(--ap-bg) !important; font-family:var(--ap-font) !important;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em }
html.ui-apple body{ color:var(--ap-label) !important }
html.ui-apple body #app,
html.ui-apple body #mBody{ background:var(--ap-bg) !important }
/* Die „schwere" Schrift der App (font-black) wird Apple-typisch halbfett/fett */
html.ui-apple body .font-black{ font-weight:700 }
html.ui-apple body .font-extrabold{ font-weight:700 }

/* ── 3) Flächen: aus den Dunkel-Hexwerten der App werden Apple-Flächen ───── */
html.ui-apple body .bg-\[\#1e1e21\],
html.ui-apple body .bg-\[\#1b1b1f\],
html.ui-apple body .bg-\[\#1f1f22\]{ background:var(--ap-card) !important; box-shadow:var(--ap-shadow) }
html.ui-apple body .bg-\[\#141416\],
html.ui-apple body .bg-\[\#0b0b0c\]{ background:var(--ap-card-2) !important }
html.ui-apple body .bg-\[\#141416\]\/95{ background:var(--ap-bar) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px) }
html.ui-apple body #mBody.bg-\[\#141416\]{ background:var(--ap-bg) !important }
html.ui-apple body .bg-\[\#222226\],
html.ui-apple body .bg-\[\#26262b\],
html.ui-apple body .bg-\[\#2a2a2e\],
html.ui-apple body .bg-\[\#1a1a1d\],
html.ui-apple body .bg-\[\#1a1a1c\]{ background:var(--ap-fill) !important; box-shadow:none }
/* Karten tragen keinen Rahmen mehr – nur Fläche auf Grund */
html.ui-apple body .border-white\/5,
html.ui-apple body .border-white\/10{ border-color:var(--ap-sep) !important }
html.ui-apple body .bg-\[\#1e1e21\].border,
html.ui-apple body .bg-\[\#1e1e21\].border-white\/5{ border-color:transparent !important }

/* Rundungen: weicher */
html.ui-apple body .rounded-xl{ border-radius:12px }
html.ui-apple body .rounded-2xl{ border-radius:16px }

/* ── 4) Schrift-Stufen (die Hell-Liste setzt harte Werte – hier Apple-Grau) ─ */
html.ui-apple body .text-slate-50,
html.ui-apple body .text-slate-100,
html.ui-apple body .text-slate-200{ color:var(--ap-label) !important }
html.ui-apple body .text-slate-300{ color:var(--ap-label) !important; opacity:.86 }
html.ui-apple body .text-slate-400,
html.ui-apple body .text-slate-500{ color:var(--ap-label-2) !important }
html.ui-apple body .text-slate-600{ color:var(--ap-label-3) !important }
html.ui-apple body .text-brand-400{ color:var(--ap-ink) !important }
/* Gelbe FLÄCHEN behalten dunkle Schrift */
html.ui-apple body .bg-brand-400,
html.ui-apple body .bg-brand-400 .text-slate-900{ color:#1d1d1f !important }

/* ── 5) Kopfzeile & Leiste unten: Glas mit Haarlinie ─────────────────────── */
html.ui-apple body .app-header{ background:var(--ap-bar) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--ap-sep) }
html.ui-apple body #mTabbar{ background:var(--ap-bar) !important; border-top:1px solid var(--ap-sep) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px) }
html.ui-apple body #mTabbar .mtabbtn{ color:var(--ap-label-2) !important; font-weight:500 }
html.ui-apple body #mTabbar .mtabbtn span{ font-size:11px !important }
html.ui-apple body #mTabbar .mtabbtn.text-brand-400{ color:var(--ap-ink) !important }
html.ui-apple body #mTabbar .mtabbtn.text-brand-400::before{ display:none }
html.ui-apple body #mKopfPop{ background:var(--ap-card) !important; box-shadow:0 12px 40px rgba(0,0,0,.25) !important; border-color:var(--ap-sep) !important; border-radius:14px;
  -webkit-backdrop-filter:saturate(180%) blur(28px); backdrop-filter:saturate(180%) blur(28px) }
/* Menüeintrag „Neue/Klassische Oberfläche": zeigt, wohin getippt wird */
html.ui-apple body .m-ui-aus{ display:none }
html.ui-apple body .m-ui-an{ display:inline }

/* ── 6) Großer Titel („Moin, Georgios") ──────────────────────────────────── */
html.ui-apple body .m-lt{ font-size:2.125rem !important; font-weight:700 !important; letter-spacing:-.025em; line-height:1.1 }

/* ── 7) Heldenkarte: weiße Karte statt Gelb-Verlauf ──────────────────────── */
html.ui-apple body .m-hero{ background:var(--ap-card) !important; border:0 !important; border-radius:16px !important;
  box-shadow:var(--ap-shadow) !important }
html.ui-apple body .m-hero .text-lg{ font-size:1.375rem; letter-spacing:-.02em; line-height:1.2 }
html.ui-apple body .m-hero .text-\[13px\]{ font-size:.9375rem }

/* ── 8) Der EINE Knopf & die Nebenknöpfe ─────────────────────────────────── */
html.ui-apple body #mBody button.bg-brand-400{ border-radius:14px !important; font-weight:600 !important; font-size:17px;
  box-shadow:0 1px 2px rgba(0,0,0,.1); background:#f5c800 !important }
html.ui-apple body #mBody button.m-knopf-stop{ background:var(--ap-stop-bg) !important; color:var(--ap-stop-ink) !important;
  border-radius:14px !important; font-weight:600 !important }
html.ui-apple body #mBody button.bg-\[\#222226\]{ color:var(--ap-label) !important; font-weight:600; border-radius:12px }
html.ui-apple body #mBody button[class*="bg-rose-600/"]{ background:var(--ap-red-bg) !important; color:var(--ap-red-ink) !important;
  border-color:transparent !important; border-radius:12px }

/* ── 9) Besonderheiten: Liste mit farbigen Symbol-Kacheln ────────────────── */
html.ui-apple body .m-bes-liste{ background:var(--ap-card); border-radius:14px; overflow:hidden; box-shadow:var(--ap-shadow) }
html.ui-apple body .m-bes-liste > * + *{ margin-top:0 !important }
html.ui-apple body .m-bes{ background:transparent !important; color:var(--ap-label) !important; border-left:0 !important;
  border-radius:0 !important; align-items:center !important; gap:12px !important; padding:10px 14px !important;
  font-size:15px !important; min-height:48px }
html.ui-apple body .m-bes + .m-bes{ border-top:1px solid var(--ap-sep) !important }
html.ui-apple body .m-bes-ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; line-height:1 }
html.ui-apple body .m-bes-rot .m-bes-ic{ background:var(--ap-red) }
html.ui-apple body .m-bes-gelb .m-bes-ic{ background:#f5c800 }
html.ui-apple body .m-bes-blau .m-bes-ic{ background:#0a84ff }
html.ui-apple body .m-bes-ch{ color:var(--ap-label-3); font-weight:400 !important; font-size:20px }

/* ── 10) Listen „Danach / Heute": gruppierte Liste ───────────────────────── */
html.ui-apple body .m-liste-block{ padding-top:.25rem }
html.ui-apple body .m-liste-kopf{ font-size:13px !important; letter-spacing:.02em !important; font-weight:600 !important;
  color:var(--ap-label-2) !important; padding:0 16px 6px }
html.ui-apple body .m-zeile{ background:var(--ap-card); padding:12px 16px !important; border-bottom:1px solid var(--ap-sep) !important }
html.ui-apple body .m-liste-kopf + .m-zeile{ border-radius:14px 14px 0 0 }
html.ui-apple body .m-zeile:last-child{ border-bottom:0 !important; border-radius:0 0 14px 14px }
html.ui-apple body .m-liste-kopf + .m-zeile:last-child{ border-radius:14px }
html.ui-apple body .m-zeile .text-\[13px\]{ font-size:15px }

/* ── 11) Mehr: Fenster von unten mit App-Symbolen ────────────────────────── */
html.ui-apple body #mMoreSheet{ background:rgba(0,0,0,.28) !important }
html.ui-apple body .m-mehr{ background:var(--ap-card) !important; border-radius:22px 22px 0 0 !important; box-shadow:var(--ap-sheet-shadow) }
html.ui-apple body .m-mehr-griff{ width:36px; height:5px; border-radius:3px; background:var(--ap-sep); margin:-4px auto 10px }
html.ui-apple body .m-mehr .text-base{ font-size:22px; letter-spacing:-.02em }
html.ui-apple body .m-mehr-kachel{ background:transparent !important; padding-top:.25rem !important; padding-bottom:.25rem !important;
  color:var(--ap-label) !important; font-weight:500 }
html.ui-apple body .m-mehr-ic{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:var(--ap-tile); color:var(--ap-label) !important }
html.ui-apple body .m-mehr-ic svg{ width:26px; height:26px }

/* ── 12) Fenster (Blätter) und Eingabefelder ─────────────────────────────── */
html.ui-apple body .m-sheet{ background:var(--ap-card) !important; color:var(--ap-label) !important }
html.ui-apple body .rounded-t-2xl,
html.ui-apple body .rounded-t-3xl{ border-top-left-radius:22px; border-top-right-radius:22px }
html.ui-apple body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html.ui-apple body select,
html.ui-apple body textarea{ border-radius:10px }
html.ui-apple body input:focus,
html.ui-apple body select:focus,
html.ui-apple body textarea:focus{ outline:none; box-shadow:0 0 0 4px rgba(245,200,0,.38) !important; border-color:#f5c800 !important }
html.ui-apple body input[type=checkbox],
html.ui-apple body input[type=radio]{ accent-color:#f5c800 }

/* ── 13) Anmeldung ───────────────────────────────────────────────────────── */
html.ui-apple body #authGate,
html.ui-apple body #pwChangeGate{ background:var(--ap-bg) !important }
html.ui-apple body #loginForm,
html.ui-apple body #forgotForm,
html.ui-apple body #pwChangeForm{ border:0 !important; border-radius:22px !important;
  box-shadow:0 24px 64px rgba(0,0,0,.18) !important }

/* ── 14) Meldungen (Toast) als Kapsel ────────────────────────────────────── */
html.ui-apple body #toast > *{ border-radius:999px !important; -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px) }

/* ── 15) Menüeintrag in der klassischen Oberfläche ───────────────────────────
   Einzige Regeln ohne ui-apple: der Umschalter muss in BEIDEN Oberflächen den
   richtigen Text zeigen. Sie treffen ausschließlich .m-ui-an/.m-ui-aus. */
.m-ui-an{ display:none }
.m-ui-aus{ display:inline }

/* ════════════════════════════════════════════════════════════════════════════
   LESBARKEIT (v2.147.0) – Wunsch Lars 22.09.2026: „Mach die Monteur-App im neuen Look genauso lesbar"
   (wie das Büro in v2.145.0). Gemessen mit demselben Prüfer über alle 17 Reiter, die Blätter (Mehr,
   Einstellungen, Andere Zeit) und die Auftragsansicht – hell und dunkel, 375 px.
   ════════════════════════════════════════════════════════════════════════════ */
/* 1) Kürzel-Kreise (oben rechts, Team am Auftrag): auf hellen Teamfarben dunkle Schrift, zu helles
      Rot/Grau hinter weißer Schrift abdunkeln */
html.ui-apple body :is(#mAvatar,.text-white):is([style*="f59e0b" i],[style*="14b8a6" i],[style*="0ea5e9" i],[style*="10b981" i],[style*="06b6d4" i],[style*="84cc16" i],[style*="f97316" i],[style*="fbbf24" i],[style*="22c55e" i],[style*="eab308" i]){ color:#1d1d1f !important }
html.ui-apple body :is(#mAvatar,.text-white):is([style*="f43f5e" i],[style*="ef4444" i]){ background-color:#d70015 !important }
html.ui-apple body :is(#mAvatar,.text-white):is([style*="94a3b8" i],[style*="cbd5e1" i]){ background-color:#6e6e73 !important }
/* 2) Grüne Abschluss-Knöpfe („Tag abschließen & senden", „Erledigt & abschließen"): Weiß auf Grün lag bei
      2,5–3,8:1 – dunkleres Grün, 5,5:1 */
html.ui-apple body :is(.bg-emerald-500,.bg-emerald-600,.bg-green-500,.bg-green-600).text-white{ background-color:#047857 !important }
/* 3) Warn-/Hinweistexte (Stundenzettel offen, Standort) */
html.ui-apple.light body :is(.text-amber-200,.text-amber-300,.text-amber-400,.text-amber-500){ color:#a3500a !important }
html.ui-apple.light body :is(.text-rose-300,.text-rose-400,.text-rose-500){ color:#be123c !important }
html.ui-apple.light body :is(.text-emerald-300,.text-emerald-400,.text-emerald-500){ color:#047857 !important }
/* 4) Mindestschrift 12 px am Handy (vorher bis 9 px: Zeilen-Etiketten, Zeitangaben, Kopfzeile) */
html.ui-apple body :is(.text-\[9px\],.text-\[9\.5px\],.text-\[10px\],.text-\[10\.5px\],.text-\[11px\],.text-\[11\.5px\]){ font-size:12px !important }
html.ui-apple body :is([style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"],[style*="font-size:.6875rem"]){ font-size:12px !important }
html.ui-apple body #mVerBadge{ font-size:11px !important }
/* 5) Tippflächen mind. 40 px (vorher: ⋯ 30 px hoch, „einklappen ✕" 20 px, Text-Links 20 px) */
html.ui-apple body :is(#mBody,#mMoreSheet,#mTabSheet,.m-sheet,.app-header,#mKopfPop,#mAndereZeitOverlay) button{ min-height:40px; min-width:40px }
html.ui-apple body .app-header button{ min-width:44px }
/* Farbe per Skript gesetzt (el.style.background) → der Browser schreibt sie als rgb(…) ins style-Attribut,
   die Hex-Regeln oben greifen dann nicht. Dieselben Farben in rgb-Schreibweise (v2.147.0). */
html.ui-apple body :is(#mAvatar,.text-white):is([style*="245, 158, 11"],[style*="20, 184, 166"],[style*="14, 165, 233"],[style*="16, 185, 129"],[style*="6, 182, 212"],[style*="132, 204, 22"],[style*="249, 115, 22"],[style*="251, 191, 36"],[style*="34, 197, 94"],[style*="234, 179, 8"]){ color:#1d1d1f !important }
html.ui-apple body :is(#mAvatar,.text-white):is([style*="244, 63, 94"],[style*="239, 68, 68"]){ background-color:#d70015 !important }
html.ui-apple body :is(#mAvatar,.text-white):is([style*="148, 163, 184"],[style*="203, 213, 225"]){ background-color:#6e6e73 !important }
html.ui-apple body .bg-rose-500.text-white{ background-color:#d70015 !important }
/* Dunkel: graue Etiketten/Haken aus Daten- bzw. Stufenfarben (#64748b, #6b7280) auf Schwarz aufhellen */
html.ui-apple:not(.light) body :is(.m-chip,span,div):is([style*="64748b" i],[style*="100, 116, 139"],[style*="6b7280" i],[style*="107, 114, 128"]){ color:#a1a1a6 !important }
html.ui-apple:not(.light) body :is(.text-gray-400,.text-gray-500,.text-gray-600){ color:#a1a1a6 !important }

/* ════════════════════════════════════════════════════════════════════════════
   GLEICHER LOOK WIE DAS BÜRO (v2.180.0) – Wunsch Lars 24.09.2026: „Jetzt noch die
   Monteur-App im gleichen Apple-Look". Die Büro-„Neu" hat seit v2.171.0 feste Muster
   (Satzstil statt GROSSBUCHSTABEN, Flächen statt Rahmen, Auswahl als weiße Pille im
   Segment, Gelb nur für die EINE Hauptaktion); hier dieselben Muster für die App.
   Warn-/Hinweiskästen (Fixtermin, Wichtiger Hinweis, Stundenzettel offen, Standort)
   behalten ihre Farbe – sie tragen Bedeutung. Nur Optik, keine Abläufe.
   ════════════════════════════════════════════════════════════════════════════ */
/* 1) Satzstil: Datum, „Zuerst: womit fährst du heute?", „Betriebsanweisung – Lesen ist Pflicht", Chat-Kopf …
      (Eingabefelder mit Großschreibung bleiben groß) */
html.ui-apple body .uppercase:not(input,textarea){ text-transform:none !important; letter-spacing:-.003em !important }
html.ui-apple body :is(.tracking-wide,.tracking-wider,.tracking-widest,.tracking-\[\.14em\]).uppercase{ font-size:13px !important; font-weight:600 !important }
/* Kleine Überschriften in Gelb („Zuerst: …", „Betriebsanweisung …") → ruhiges Grau wie in den Einstellungen */
html.ui-apple body .uppercase.text-brand-400:not(button){ color:var(--ap-label-2) !important }
/* 2) Reiter der Aufträge (Heute · Aktiv · Frei · Erledigt): Apple-Segment – Auswahl weiße Pille statt Gelb */
html.ui-apple body #mBody .flex.gap-1.rounded-xl.p-1:has(> button.rounded-lg){ background:var(--ap-fill) !important; border-radius:10px !important; padding:2px !important; gap:0 !important }
html.ui-apple body #mBody .flex.gap-1.rounded-xl.p-1 > button.rounded-lg{ border-radius:8px !important; color:var(--ap-label) !important; font-weight:500 !important; font-size:14px !important }
html.ui-apple body #mBody .flex.gap-1.rounded-xl.p-1 > button.rounded-lg.bg-brand-400{ background:var(--ap-card) !important; font-weight:600 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.14), 0 1px 1px rgba(0,0,0,.04) !important }
html.ui-apple:not(.light) body #mBody .flex.gap-1.rounded-xl.p-1 > button.rounded-lg.bg-brand-400{ background:#636366 !important; color:#fff !important }
/* 3) Kacheln (Fotos · Material · Bericht) und ⋯-Knopf: Fläche ohne Rahmen */
html.ui-apple body #mBody button.rounded-xl.border.border-white\/10,
html.ui-apple body button.rounded-lg.border.border-white\/10{ border-color:transparent !important; background:var(--ap-fill) !important }
/* 4) Standort-Hinweis: ruhige Gruppe statt gelb umrandet (der gelbe Zustimmen-Knopf bleibt die Aktion) */
html.ui-apple body .rounded-xl.bg-brand-400\/10.border-brand-400\/30{ background:var(--ap-card) !important; border-color:transparent !important; box-shadow:var(--ap-shadow) }
html.ui-apple body .rounded-xl.bg-brand-400\/10.border-brand-400\/30 .text-brand-400{ color:var(--ap-label) !important }
/* 5) Gelbe Knöpfe mit weißer Schrift: dunkle Schrift (wie im Büro) */
html.ui-apple body :is(button,a).text-white:is(.bg-brand-400,.bg-brand-500){ color:#1d1d1f !important }
/* 6) Fenster gleiten weich auf (nicht bei „Bewegung reduzieren") */
@keyframes apAppSheet{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: no-preference){
  html.ui-apple body .m-mehr{ animation:apAppSheet .22s cubic-bezier(.2,.8,.2,1) }
}