/* ============================================================================
   masken.css · call a bee
   Gemeinsames Design-System für ALLE Eingabemasken (Modal-Dialoge).
   EINE Quelle der Wahrheit – ergänzt auftragsmaske.css (die nur die
   React-/Auftrags-Maske betrifft).

   Ziele (Wunsch Lars, 25.06.2026):
   1. Responsiv: Dialoge passen sich der Monitorbreite an (Breiten-Varianten
      sm/md/lg/xl), 2-Spalten-Felder brechen auf schmalen Schirmen einspaltig
      um  → weniger Scrollen.
   2. Mehr Kontrast: grau abgesetzte Sektionen, kontrastreiche Felder.
      Standard = "Kräftig" (graue Felder). Pro Nutzer auf "Dezent" umschaltbar
      über die Body-Klasse `mask-soft` (gesetzt aus app.js / localStorage).

   Geltungsbereich: alles ist auf `#modalBox` gescoped, damit nichts in die
   restliche App ausläuft. Die Kontrast-Variablen wirken zusätzlich auf die
   Auftrags-Maske (`.cab-am-scope`), damit Hell/Kräftig dort konsistent ist.
   ============================================================================ */

/* ---- Farb- & Kontrast-Variablen ---------------------------------------------
   Standardwerte = KRÄFTIG (graue Felder, deutliche Abgrenzung).
   `body.mask-soft` schaltet auf DEZENT (weiße Felder) zurück. */
:root{
  --mk-gold:#EF9F27; --mk-gold-tint:#fef3da; --mk-gold-deep:#b45309;
  --mk-ink:#1e2025; --mk-ink-soft:#4b5563; --mk-muted:#9ca3af;
  --mk-req:#f43f5e;
  /* Kräftig (Default) */
  --mk-sec-bg:#f4f5f7; --mk-sec-line:#d1d5db;
  --mk-field-bg:#eef0f3; --mk-field-line:#cbd0d8;
  --mk-foot-bg:#e9ebef; --mk-line:#d1d5db;
}
body.mask-soft{
  /* Dezent: weiße Felder, hellgraue Linien */
  --mk-sec-bg:#ffffff; --mk-sec-line:#e5e7eb;
  --mk-field-bg:#ffffff; --mk-field-line:#e5e7eb;
  --mk-foot-bg:#f7f8fa; --mk-line:#e5e7eb;
}

/* ============================================================================
   1) RESPONSIVE BREITE
   Die Dialog-Breite wird über die BESTEHENDE Funktion `modalWide(size)`
   (app.js) mit Tailwind-Klassen gesteuert: max-w-lg(≈512) · max-w-2xl(672) ·
   max-w-3xl(768) · max-w-5xl(1024). Migrierte Masken rufen modalWide() auf –
   bewusst KEIN zweites Breiten-System hier (eine Quelle der Wahrheit).
   `width` bleibt fluid: die Karte schrumpft mit dem Fenster, nur die
   Obergrenze ändert sich → kein seitliches Scrollen.
   ============================================================================ */

/* ============================================================================
   2) FELD-KONTRAST – wirkt SOFORT auf alle Masken (auch noch nicht migrierte),
   weil Text-Eingaben in Modals bisher `bg-transparent` (Tailwind) nutzen.
   Checkbox/Radio/Color/File ausgenommen.
   ============================================================================ */
/* NUR Hellmodus (html:not(.dark)) – im Dunkelmodus bleibt alles unverändert,
   damit keine hellen Felder auf dunklem Grund entstehen. */
html:not(.dark) #modalBox input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),
html:not(.dark) #modalBox select,
html:not(.dark) #modalBox textarea{
  background:var(--mk-field-bg) !important;
  border:1px solid var(--mk-field-line) !important;
  color:var(--mk-ink);
  border-radius:10px;
}
html:not(.dark) #modalBox input:focus,
html:not(.dark) #modalBox select:focus,
html:not(.dark) #modalBox textarea:focus{
  outline:none;
  border-color:var(--mk-gold) !important;
  box-shadow:0 0 0 3px rgba(239,159,39,.18);
}
/* Kontrast auch in der Auftrags-Maske (Vollbild, nicht in #modalBox) – nur Hellmodus */
html:not(.dark) body.mask-strong .cab-am-scope input[type=text],
html:not(.dark) body.mask-strong .cab-am-scope input[type=number],
html:not(.dark) body.mask-strong .cab-am-scope input[type=datetime-local],
html:not(.dark) body.mask-strong .cab-am-scope input[type=date],
html:not(.dark) body.mask-strong .cab-am-scope input[type=time],
html:not(.dark) body.mask-strong .cab-am-scope select,
html:not(.dark) body.mask-strong .cab-am-scope textarea{
  background:var(--mk-field-bg);
  border-color:var(--mk-field-line);
}

/* Hinweis: Der Footer wird bewusst NICHT per :last-child getönt, weil Masken
   ohne Footer sonst ihren Inhaltsbereich eingefärbt bekämen. Die bestehende
   Footer-Optik (border-t) bleibt unverändert. */

/* ============================================================================
   3) LAYOUT-HELFER für die per-Maske-Umstellung auf 2-Spalten.
   Bewusst eigener Prefix `mk-` (kein Clash mit Tailwind/cab-am).
   ============================================================================ */
/* Responsive Grids – brechen automatisch um */
#modalBox .mk-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#modalBox .mk-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
#modalBox .mk-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#modalBox .mk-c2{grid-column:span 2}
@media(max-width:760px){
  #modalBox .mk-g3,#modalBox .mk-g4{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  #modalBox .mk-g2,#modalBox .mk-g3,#modalBox .mk-g4{grid-template-columns:1fr}
  #modalBox .mk-c2{grid-column:span 1}
}

/* Feld-Baustein: Label oben, Eingabe darunter */
#modalBox .mk-f{display:flex;flex-direction:column;gap:5px;min-width:0}
#modalBox .mk-f > label,
#modalBox .mk-lbl{font-size:12px;font-weight:600;color:var(--mk-ink-soft)}
#modalBox .mk-lbl .req{color:var(--mk-req)}
#modalBox .mk-lbl .opt{color:var(--mk-muted);font-weight:500}
#modalBox .mk-hint{font-size:11.5px;color:var(--mk-muted)}

/* Grau abgesetzte Sektion (Gruppierung zusammengehöriger Felder) */
#modalBox .mk-sec{
  border:1px solid var(--mk-sec-line);
  border-radius:14px;padding:15px;background:var(--mk-sec-bg);
  margin-bottom:14px;
}
#modalBox .mk-sec:last-child{margin-bottom:0}
#modalBox .mk-sh{display:flex;align-items:center;gap:9px;margin:0 0 12px}
#modalBox .mk-sh .ico{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:14px;background:var(--mk-gold-tint);color:var(--mk-gold)
}
#modalBox .mk-sh h3{
  margin:0;font-size:12.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:#374151
}
#modalBox .mk-sh .hint{
  font-size:11.5px;color:var(--mk-muted);margin-left:auto;font-weight:500;
  text-transform:none;letter-spacing:0
}

/* Checkbox-/Radio-Zeile als abgesetzte Kachel (mehr Kontrast & Klickfläche) */
#modalBox .mk-check{
  display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mk-ink-soft);
  padding:8px 10px;border:1px solid var(--mk-field-line);border-radius:10px;
  background:var(--mk-field-bg);cursor:pointer
}
#modalBox .mk-check input{width:16px;height:16px;accent-color:var(--mk-gold);margin:0;flex:none}

/* ============================================================================
   4) KONTRAST-UMSCHALTER (kleines Segmented-Control, z. B. in Einstellungen)
   ============================================================================ */
.mk-toggle{display:inline-flex;background:#f1f2f4;border:1px solid #e5e7eb;border-radius:11px;padding:3px;gap:3px}
.mk-toggle button{border:none;background:transparent;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:700;color:#4b5563;cursor:pointer}
.mk-toggle button.on{background:#fff;color:#1e2025;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.mask-strong .mk-toggle button.on{background:var(--mk-gold-tint);color:var(--mk-gold-deep)}

/* ============================================================================
   v1.407.0 · Ticket-Board „Phasen-Gruppen" (Entwurf 2)
   Farbige Gruppen-Bänder über den Spalten + Kompakt-Modus. Die Spalten selbst
   nutzen weiter .cab-board-grid (Drag&Drop + Mobile-Scroll unverändert); die
   Bänder-Zeile bekommt dasselbe Spaltenraster und sitzt bündig darüber.
   ============================================================================ */
.tk-bands{ margin-bottom:2px; }
.tk-band{
  display:flex; align-items:center; gap:.5rem; min-width:0;
  padding:7px 12px; border-radius:10px 10px 0 0;
  color:#fff; background:var(--tkg,#475569);
}
.tk-band-t{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.tk-band-d{ font-size:11px; font-weight:500; opacity:.85; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-band-n{ margin-left:auto; flex:none; font-size:11px; font-weight:800; background:rgba(255,255,255,.22); border-radius:999px; padding:1px 9px; font-variant-numeric:tabular-nums; }
/* Farbige Oberkante je Spalte = Zugehörigkeit zur Gruppe, auch beim Scrollen sichtbar. */
.tk-col{ border-top:3px solid var(--tkg,#e2e8f0); }

/* Kompakt-Modus: Karten auf Titel + Fußzeile (Nr./Avatare) eindampfen, damit
   alle Phasen ohne großes Scrollen auf den Schirm passen. Nur innerhalb des
   Ticket-Boards – Auftrags-/Aufgaben-Board bleibt unberührt. */
.tk-compact .kcard{ padding:.45rem .6rem; }
.tk-compact .kcard .text-sm{ font-size:12.5px; line-height:1.25; }
.tk-compact .kcard .mt-1{ display:none; }                 /* Zusatz-Badges ausblenden */
.tk-compact .kcard .text-xs.text-slate-400{ display:none; } /* Objekt-/Mieter-Zeile ausblenden */

/* Mobil (< lg): Spalten werden horizontal scrollbar – die 9-spaltige Bänder-
   Zeile ließe sich nicht mehr bündig ausrichten, daher dort ausblenden. Die
   farbige Spalten-Oberkante bleibt als Gruppen-Hinweis erhalten. */
@media (max-width: 1023px){
  .tk-bands{ display:none; }
}

/* ============================================================================
   v1.411.0 · Optische Politur Ticket-Board
   Reine Feinschliff-Ebene: bindet Spalten sichtbar an ihre Gruppenfarbe, gibt
   den Bändern etwas Tiefe, definiert den (bislang fehlenden) Aktiv-Zustand der
   Fokus-Chips und einen ruhigen Leerzustand. Alles über die je Spalte gesetzte
   CSS-Variable --tkg; degradiert sauber, wenn color-mix nicht unterstützt wird.
   ============================================================================ */
/* Bänder: dezenter Verlauf + Schlagschatten für sanfte Tiefe. */
.tk-band{ background-image:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.10)); box-shadow:0 1px 2px rgba(0,0,0,.10); }
/* Spaltenkopf: feine Trennlinie in der Gruppenfarbe – verbindet Kopf und farbige Oberkante. */
.tk-col .tk-colhead{ border-bottom:1px solid color-mix(in srgb, var(--tkg) 22%, transparent); }
/* Zähler-Pille in der Gruppenfarbe statt neutralem Grau. */
.tk-col .tk-cnt{ background:color-mix(in srgb, var(--tkg) 15%, transparent); color:var(--tkg); }
/* Leerzustand: ruhig, nicht leer wirkend. */
.tk-empty{ text-align:center; font-size:11px; color:#94a3b8; padding:14px 8px; border:1px dashed color-mix(in srgb, var(--tkg) 25%, #e2e8f0); border-radius:9px; }
/* Fokus-Chips: weicher Übergang, dezenter Hover – und der zuvor unstyled Aktiv-Zustand. */
.tk-chip{ transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; }
.tk-chip:hover{ box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tk-chip:active{ transform:translateY(.5px); }
.tk-chip.tk-chip-on{ background:#1e2025; color:#fff; border-color:#1e2025; box-shadow:0 1px 5px rgba(0,0,0,.16); }
body.mask-strong .tk-chip.tk-chip-on{ background:var(--mk-gold-deep, #1e2025); }
/* Karten im Ticket-Board: einen Hauch mehr Anfasslust beim Hover. */
.tk-board .kcard{ transition:box-shadow .12s ease, border-color .12s ease, transform .06s ease; }
.tk-board .kcard:hover{ transform:translateY(-1px); }
/* Bewegungsreduktion respektieren (Politur ist rein dekorativ). */
@media (prefers-reduced-motion: reduce){
  .tk-chip, .tk-board .kcard{ transition:none; }
  .tk-chip:active, .tk-board .kcard:hover{ transform:none; }
}

/* ═══ v1.557.0 (struktur-konzept Phase C2) · Aktions-Regel für Modal-Fußzeilen ═══
   Abbrechen/Schließen (Klasse cab-btn-cancel, gesetzt zentral in btnGhost) rückt ganz nach
   links, die Hauptaktion bleibt rechts – dieselbe Ordnung wie in der Auftragsmaske (C1).
   Steht der Knopf allein in der Fußzeile, bleibt er rechts (nur „Schließen"-Masken). */
.cab-mfoot > .cab-btn-cancel:not(:only-child){ margin-right:auto }

/* ═══ v1.741.0 · Formulargenerator: Dokumentansicht („Blatt") ═══
   Das Formular liegt als weißes Blatt im Editor und wird direkt beschrieben (contenteditable).
   Bewusst IMMER hell – es zeigt den späteren Ausdruck, nicht die Oberfläche. Die Blöcke bekommen
   erst beim Überfahren Rahmen/Löschknopf, damit das Blatt beim Lesen ruhig bleibt. */
.fgdoc-sheet{ background:#fff; color:#131311; border:1px solid #e2e8f0; border-radius:12px;
  padding:26px 30px 30px; box-shadow:0 1px 3px rgba(0,0,0,.08); max-width:210mm; margin:0 auto; }
.fgdoc-e{ outline:none; border-radius:6px; padding:1px 3px; margin:0 -3px; }
.fgdoc-e:hover{ background:#f8fafc; }
.fgdoc-e:focus{ background:#fffbeb; box-shadow:0 0 0 2px rgba(241,204,1,.55); }
.fgdoc-e:empty:before{ content:attr(data-ph); color:#94a3b8; }
.fgdoc-e b, .fgdoc-e strong{ font-weight:700; }
.fgdoc-blk{ position:relative; border:1px solid transparent; border-radius:8px; padding:2px 4px; }
.fgdoc-blk:hover{ border-color:#e2e8f0; background:#fcfcfd; }
.fgdoc-del{ position:absolute; top:2px; right:2px; opacity:0; transition:opacity .12s ease;
  color:#e11d48; font-size:12px; line-height:1; padding:3px 5px; border-radius:6px; background:#fff; border:1px solid #fecdd3; }
.fgdoc-blk:hover .fgdoc-del{ opacity:1; }
.fgdoc-del:hover{ background:#fff1f2; }
.fgdoc-tag{ position:absolute; top:3px; left:-6px; transform:translateX(-100%);
  font-size:10px; color:#94a3b8; white-space:nowrap; opacity:0; transition:opacity .12s ease; }
.fgdoc-blk:hover .fgdoc-tag{ opacity:1; }
@media (max-width:640px){ .fgdoc-sheet{ padding:18px 16px 22px; } .fgdoc-tag{ display:none; } }