/* ============================================================================
   call a bee · Design-Baukasten (Phase 2 „Optik", v1.310.0)
   ----------------------------------------------------------------------------
   EINE Quelle für Farben, Radien, Schatten und die Basis-Bausteine aller
   Frontends (Büro /admin, Monteur-App /app, Schadensmeldung /melden).
   Regel: Neue Oberflächen bedienen sich HIER (.cab-*-Klassen + Variablen),
   statt Tailwind-Utilities frei zu kombinieren. Bestehende Masken werden
   Modul für Modul umgestellt (Optik-Sprints, siehe KONZEPT.md).

   Markenfarben (CI): Schwarz #1A1A1A · Gelb #F5C800 · Weiß #FFFFFF
   Die brand-Skala in den tailwind.configs der index.html-Dateien ist auf
   dieselben Werte abgestimmt – Änderungen bitte IMMER an beiden Stellen.
   ============================================================================ */

:root{
  /* ── Marke ── */
  --cab-ink:        #1A1A1A;   /* call-a-bee-Schwarz (Logo, Topbar, Primärtext) */
  --cab-brand-50:   #fffceb;
  --cab-brand-100:  #fff7c2;
  --cab-brand-200:  #ffee85;
  --cab-brand-300:  #fce147;
  --cab-brand-400:  #f8d41f;   /* Primär-Buttons (mit dunkler Schrift) */
  --cab-brand-500:  #f5c800;   /* DAS CI-Gelb */
  --cab-brand-600:  #d4a800;
  --cab-brand-700:  #a37f00;   /* gelber TEXT auf hellem Grund (WCAG AA) */
  --cab-brand-800:  #866700;
  --cab-brand-900:  #715600;

  /* ── Flächen & Text (Hellmodus) ── */
  --cab-bg:         #f8fafc;   /* Seitengrund (slate-50) */
  --cab-surface:    #ffffff;   /* Karten/Masken */
  --cab-surface-2:  #f1f5f9;   /* eingelassene Flächen (slate-100) */
  --cab-line:       #e2e8f0;   /* Rahmen (slate-200) */
  --cab-text:       #0f172a;   /* Primärtext (slate-900) */
  --cab-text-2:     #64748b;   /* Sekundärtext (slate-500) */

  /* ── Status (semantisch – NICHT die Markenfarbe) ── */
  --cab-ok:         #059669;   /* erledigt/frei (emerald-600) */
  --cab-warn:       #d97706;   /* wartet/offen (amber-600) */
  --cab-crit:       #dc2626;   /* überfällig/Fehler (red-600) */
  --cab-info:       #0284c7;   /* Hinweis/neu (sky-600) */

  /* ── Auftrags-Statusfarben – EINE Quelle für Büro-App UND Monteur-App (v1.486.0).
        Beide Apps lesen diese Werte beim Start aus (STATUS_DOT bzw. mColColor); die Werte
        müssen 6-stellige Hex bleiben, weil die Chips daraus Alpha-Varianten (#rrggbb22) bauen. ── */
  --cab-st-ungeplant:   #cbd5e1;
  --cab-st-geplant:     #94a3b8;
  --cab-st-unterwegs:   #f59e0b;
  /* v1.525.0: „In Arbeit" ist Violett statt Grün. Vorher waren „In Arbeit" (#22c55e) und
     „Erledigt" (#15803d) zwei Grüntöne und auf der Plantafel kaum zu trennen. Grün bleibt
     jetzt AUSSCHLIESSLICH dem Endzustand „Erledigt" vorbehalten. Violett ist der einzige
     freie kräftige Farbplatz (Blau=Geplant, Orange=Unterwegs, Rot=Störung, Grün=Erledigt). */
  --cab-st-arbeit:      #7c3aed;
  --cab-st-pause:       #a78bfa;
  --cab-st-fertig:      #15803d;
  --cab-st-abgerechnet: #64748b;
  --cab-st-stoerung:    #f43f5e;
  /* v1.750.0: „Folgetermin nötig" – der Einsatz ist vorbei, der Auftrag aber nicht fertig und
     wartet auf einen neuen Termin. Magenta ist der letzte freie kräftige Platz (Blau=Geplant,
     Orange=Unterwegs, Violett=In Arbeit, Grün=Erledigt, Rot=Störung, Teal=Geschlossen). */
  --cab-st-folgetermin: #db2777;

  /* ── Schrift-Leiter (v1.744.0, Optik-Sprint) ──────────────────────────────
     FÜNF Stufen, mehr gibt es nicht. Vorher waren 14 Größen im Umlauf, darunter
     handgesetzte Zwischenwerte (text-[10.5px], [11.5px], [12.5px]) – das erzeugt
     genau den Eindruck „irgendwie unruhig", ohne dass man den Grund benennen kann.
     Neue Masken nutzen die .cab-t-*-Klassen, nicht mehr die Tailwind-Größen.      */
  --cab-fs-meta:    0.6875rem; /* 11px · Label, Meta, Hilfstext        */
  --cab-fs-base:    0.8125rem; /* 13px · Fließtext, Werte, Namen       */
  --cab-fs-strong:  0.9375rem; /* 15px · Zeilentitel, Name, Betrag     */
  --cab-fs-title:   1.25rem;   /* 20px · Seiten-/Maskentitel           */
  --cab-fs-kpi:     1.75rem;   /* 28px · Kennzahl                      */

  /* ── Form ── */
  --cab-radius:     0.75rem;   /* Karten/Buttons (rounded-xl) */
  --cab-radius-sm:  0.5rem;    /* kleine Elemente (rounded-lg) */
  --cab-shadow:     0 1px 2px rgb(2 6 23 / .06), 0 1px 3px rgb(2 6 23 / .08);
  --cab-shadow-lg:  0 10px 24px rgb(2 6 23 / .12);
  --cab-focus:      0 0 0 3px rgb(245 200 0 / .45);  /* Tastatur-Fokusring in CI-Gelb */
}
html.dark{
  --cab-bg:         #0f172a;
  --cab-surface:    #1e293b;
  --cab-surface-2:  #16233a;
  --cab-line:       #334155;
  --cab-text:       #f1f5f9;
  --cab-text-2:     #94a3b8;
  --cab-shadow:     0 1px 2px rgb(0 0 0 / .35);
  --cab-shadow-lg:  0 10px 24px rgb(0 0 0 / .5);
}

/* ============================================================================
   Bausteine – gleiches Element, gleiches Aussehen, in jedem Modul.
   ============================================================================ */

/* ── Buttons ── */
.cab-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-weight:600; font-size:.875rem; line-height:1;
  padding:.625rem 1rem; border-radius:var(--cab-radius-sm);
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition:background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.cab-btn:active{ transform:scale(.99) }
.cab-btn:focus-visible{ outline:none; box-shadow:var(--cab-focus) }
.cab-btn[disabled]{ opacity:.5; cursor:not-allowed }
.cab-btn-primary{ background:var(--cab-brand-400); color:var(--cab-ink) }
.cab-btn-primary:hover{ background:var(--cab-brand-500) }
.cab-btn-ghost{ background:transparent; border-color:var(--cab-line); color:var(--cab-text) }
.cab-btn-ghost:hover{ border-color:var(--cab-brand-400); color:var(--cab-brand-700) }
html.dark .cab-btn-ghost:hover{ color:var(--cab-brand-300) }
.cab-btn-danger{ background:var(--cab-crit); color:#fff }
.cab-btn-danger:hover{ filter:brightness(1.08) }
.cab-btn-sm{ padding:.375rem .75rem; font-size:.8125rem }  /* Kompakt-Variante (v1.488.0) für enge Leisten/Tabellen */

/* ════════════════════════════════════════════════════════════════════════════
   OPTIK-REGELWERK (v1.744.0) · KONZEPT-OPTIK.md
   ────────────────────────────────────────────────────────────────────────────
   REGEL 1 – GELB BEDEUTET GENAU EINE SACHE: „das hier als Nächstes".
   Vorher trug Gelb fünf Bedeutungen gleichzeitig (Marke, Hauptaktion, aktiver
   Reiter, Warnung, Hinweiskasten) – eine Farbe mit fünf Bedeutungen hat keine.
   Verbindliche Belegung, an die sich JEDE neue Maske hält:

     Gelb (brand-400/500)  →  ausschließlich die EINE Hauptaktion je Maske
                              (.cab-btn-primary) + Marken-Akzent der Seitenleiste
     Anthrazit (cab-ink)   →  aktiver Reiter / aktiver Filter (.cab-tab-on)
     Bernstein (cab-warn)  →  Warnung, und dort NUR als Chip (.cab-badge-warn),
                              nie als Fläche, nie als Knopf
     Grau (surface-2)      →  Hinweis-/Erklärkästen (.cab-hint) – ein Erklärtext
                              ist kein Alarm
     Randlos/leise         →  Schließen, Abbrechen, Zweitaktionen (.cab-btn-quiet)

   Merksatz für die Prüfung: höchstens EIN gelb gefüllter Knopf je Bildschirm.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Leiser Knopf (Regel 1) ──
   Für alles, was man tun KANN, aber selten tut: Schließen, Abbrechen, Zweitaktion.
   Randlos, damit er nicht mit der Hauptaktion um Aufmerksamkeit ringt. */
.cab-btn-quiet{ background:transparent; border-color:transparent; color:var(--cab-text-2) }
.cab-btn-quiet:hover{ background:var(--cab-surface-2); color:var(--cab-text) }

/* ── Aktiver Reiter / aktiver Filter (Regel 1) ──
   Anthrazit statt Gelb: „wo bin ich" ist ein ZUSTAND, keine Aktion. Die Marke
   bleibt gewahrt (Schwarz/Gelb), aber Gelb bleibt der Aktion vorbehalten.
   Bewusst ohne eigenen Radius/Padding – die Klasse wird auf bestehende
   Reiter-Knöpfe gesetzt und erbt deren Maße. */
.cab-tab-on{ background:var(--cab-ink) !important; color:#fff !important;
             border-color:var(--cab-ink) !important; font-weight:600 }
.cab-tab-on:hover{ background:#2b2d33 !important }
html.dark .cab-tab-on{ background:var(--cab-brand-500) !important; color:#1a1a1a !important;
                       border-color:var(--cab-brand-500) !important }

/* ── Navigation: „wo bin ich" (v1.749.0, Entwurf-Navigation_2026-07-31) ──────────
   Vorher gab es zwei konkurrierende Markierungen: der aktive BEREICH war eine gelb
   gefüllte Pille (ab v1.744 anthrazit – und damit auf der anthrazitfarbenen Leiste
   praktisch unsichtbar), der aktive UNTERPUNKT eine cremeweiße Pille und damit das
   hellste Element der ganzen Leiste. Die Rangfolge stand auf dem Kopf, und beide
   wirkten wie zwei unabhängige Zustände statt wie EINE Kette „Arbeit › Aufträge".

   Jetzt: ein gelber Balken am Bereich, ein gelber Punkt am Unterpunkt, beide auf der
   Führungslinie – zusammen eine Aussage. Keine Füllfläche mehr, die Leiste bleibt
   ruhig. Das Gelb ist hier der MARKEN-Akzent der Seitenleiste, den Regel 1 aus-
   drücklich zulässt – kein zweiter Aktions-Knopf. Gilt in jeder Breite, also auch
   in der Schmal-Ansicht, wo der Ort bisher gar nicht erkennbar war.               */
.cab-nav-on{ position:relative; color:#fff !important; font-weight:700 }
.cab-nav-on::before{
  content:''; position:absolute; left:-.375rem; top:.35rem; bottom:.35rem; width:3px;
  border-radius:0 3px 3px 0; background:var(--cab-brand-500);
}
.cab-nav-on .nav-icon{ color:var(--cab-brand-500); opacity:1 }
html.dark .cab-nav-on{ color:#fff !important }
/* Im Hellmodus ist die Seitenleiste dennoch anthrazit (Marken-Vorgabe, index.html) –
   deshalb braucht es hier keine eigene Hell-Variante. */

.cab-nav-sub-on{ position:relative; color:#fff !important; font-weight:700 }
.cab-nav-sub-on::before{
  content:''; position:absolute; left:-1.06rem; top:50%; width:9px; height:9px;
  margin-top:-4.5px; border-radius:9999px; background:var(--cab-brand-500);
}

/* ── Hinweis-/Erklärkasten (Regel 1) ──
   Ruhig grau. Alarmfarben sind für Alarme reserviert. */
.cab-hint{ background:var(--cab-surface-2); border:1px solid var(--cab-line);
           border-radius:var(--cab-radius-sm); padding:.75rem .875rem;
           font-size:var(--cab-fs-meta); line-height:1.55; color:var(--cab-text-2) }
.cab-hint b, .cab-hint strong{ color:var(--cab-text) }

/* ── Schrift-Leiter als Klassen (Regel 3) ── */
.cab-t-meta  { font-size:var(--cab-fs-meta);   font-weight:500; color:var(--cab-text-2) }
.cab-t-base  { font-size:var(--cab-fs-base);   font-weight:400; color:var(--cab-text) }
.cab-t-strong{ font-size:var(--cab-fs-strong); font-weight:600; color:var(--cab-text) }
.cab-t-title { font-size:var(--cab-fs-title);  font-weight:800; color:var(--cab-text) }
.cab-t-kpi   { font-size:var(--cab-fs-kpi);    font-weight:800; color:var(--cab-text);
               font-variant-numeric:tabular-nums }

/* ── Kopfband (Regel 4) ──
   Jede Detailmaske beantwortet oben dieselben vier Fragen in derselben Reihenfolge:
   Was ist das · In welchem Zustand · Woran hängt es · Was ist der nächste Schritt.
   Ersetzt die sechs gleich großen Zellen (sechs gleich laute Aussagen) durch EINE
   Textzeile mit Trennpunkten – gleiche Information, ~60 px weniger Höhe. */
.cab-kb{ display:flex; align-items:flex-start; gap:.6rem; flex-wrap:nowrap }
.cab-kb-l{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; flex:1; min-width:0 }
.cab-kb-act{ flex:none; display:flex; align-items:center; gap:.4rem }
.cab-kb-meta{ font-size:var(--cab-fs-base); color:var(--cab-text-2); margin-top:.35rem;
              line-height:1.55 }
.cab-kb-meta b{ color:var(--cab-text); font-weight:600 }
@media (max-width:640px){
  .cab-kb{ flex-wrap:wrap }
  .cab-kb-act{ width:100%; justify-content:flex-end }
}

/* ── Überlauf-Menü „⋯" (Regel 5) ──
   Je Abschnitt EINE sichtbare Aktion – die, die in vier von fünf Fällen gemeint
   ist. Alles Weitere liegt hier drin: nichts wird entfernt, nur nicht mehr
   gleichzeitig laut. Zerstörendes (Löschen) gehört IMMER hierher, nie in die
   Fußzeile neben „Schließen". */
.cab-more{ position:relative; display:inline-block }
.cab-more-btn{ font-weight:800; letter-spacing:.06em; color:var(--cab-text-2) }
.cab-more-pop{
  position:absolute; right:0; top:calc(100% + .35rem); z-index:70; min-width:230px;
  background:var(--cab-surface); border:1px solid var(--cab-line);
  border-radius:var(--cab-radius); box-shadow:var(--cab-shadow-lg); padding:.3rem;
  display:none; text-align:left;
}
.cab-more.open .cab-more-pop{ display:block }
/* In Fußzeilen klappt das Menü nach oben auf – unten ist der Fensterrand. */
.cab-more.cab-more-up .cab-more-pop{ top:auto; bottom:calc(100% + .35rem) }
.cab-more-pop button{
  display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  font-size:var(--cab-fs-base); font-weight:500; color:var(--cab-text);
  padding:.5rem .6rem; border:0; border-radius:var(--cab-radius-sm);
  background:transparent; cursor:pointer; white-space:nowrap;
}
.cab-more-pop button:hover{ background:var(--cab-surface-2) }
.cab-more-pop button.danger{ color:var(--cab-crit) }
.cab-more-pop .cab-more-sep{ height:1px; background:var(--cab-line); margin:.3rem .2rem }

/* ── Dichte (Regel 7) ──
   „Einfachheit UND alle Informationen" ist kein Widerspruch, wenn die Entscheidung
   dem Nutzer gehört. Drei Stufen, gemerkt je Nutzer (localStorage cab.dichte).
   Es geht NIE eine Information verloren – sie ist nur einen Klick entfernt statt
   dauerhaft laut. Greift über die Klasse an <html> auf jede Karten-/Listenzeile,
   die .cab-d-1 (Kernzeile) / .cab-d-2 (Zusatzzeile) / .cab-d-3 (Chips) trägt. */
html.dichte-kompakt .cab-d-2,
html.dichte-kompakt .cab-d-3{ display:none !important }
html.dichte-kompakt .cab-d-row{ padding-top:.3rem !important; padding-bottom:.3rem !important }
/* Werkszustand „Normal": Zusatz-Chips gefaltet hinter +n */
.cab-d-rest{ display:none }
.cab-d-mehr{ display:inline-flex }
/* „Komfort" zeigt alles, „+n" entfällt. Gleiches gilt für eine einzeln aufgeklappte Karte. */
html.dichte-komfort .cab-d-rest,
.cab-chips.cab-chips-auf .cab-d-rest{ display:contents }
html.dichte-komfort .cab-d-mehr,
.cab-chips.cab-chips-auf .cab-d-mehr{ display:none }

/* ── Dichte-Schalter (drei Stufen) ── */
.cab-dsw{ display:inline-flex; background:var(--cab-surface-2); border:1px solid var(--cab-line);
          border-radius:var(--cab-radius-sm); padding:2px; gap:2px }
.cab-dsw button{ font:inherit; font-size:var(--cab-fs-meta); font-weight:600; color:var(--cab-text-2);
                 padding:.3rem .6rem; border:0; border-radius:calc(var(--cab-radius-sm) - 2px);
                 background:transparent; cursor:pointer; line-height:1 }
.cab-dsw button:hover{ color:var(--cab-text) }
.cab-dsw button.on{ background:var(--cab-surface); color:var(--cab-text); font-weight:700;
                    box-shadow:0 1px 2px rgb(2 6 23 / .12) }

/* ── Karten ── */
.cab-card{
  background:var(--cab-surface); border:1px solid var(--cab-line);
  border-radius:var(--cab-radius); box-shadow:var(--cab-shadow);
}
.cab-card-title{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.8125rem; letter-spacing:.02em;
  color:var(--cab-text);
}

/* ── Badges (Status-Chips) ── */
.cab-badge{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.6875rem; font-weight:700; line-height:1;
  padding:.25rem .5rem; border-radius:9999px; white-space:nowrap;
}
.cab-badge-ok{   background:rgb(5 150 105 / .12);  color:var(--cab-ok) }
.cab-badge-warn{ background:rgb(217 119 6 / .12);  color:var(--cab-warn) }
.cab-badge-crit{ background:rgb(220 38 38 / .12);  color:var(--cab-crit) }
.cab-badge-info{ background:rgb(2 132 199 / .12);  color:var(--cab-info) }
.cab-badge-neutral{ background:var(--cab-surface-2); color:var(--cab-text-2) }
html.dark .cab-badge-ok{   color:#34d399 }
html.dark .cab-badge-warn{ color:#fbbf24 }
html.dark .cab-badge-crit{ color:#f87171 }
html.dark .cab-badge-info{ color:#38bdf8 }

/* ── Eingaben ── */
.cab-input{
  width:100%; font-size:.875rem; color:var(--cab-text);
  background:var(--cab-surface); border:1px solid var(--cab-line);
  border-radius:var(--cab-radius-sm); padding:.55rem .75rem;
}
.cab-input:focus-visible{ outline:none; border-color:var(--cab-brand-400); box-shadow:var(--cab-focus) }
.cab-input::placeholder{ color:var(--cab-text-2) }

/* ── Ladezustand (Skeleton) ──
   Platzhalter statt springender Inhalte: <div class="cab-skeleton h-4 w-32"></div> */
.cab-skeleton{
  border-radius:var(--cab-radius-sm);
  background:linear-gradient(90deg, var(--cab-surface-2) 25%, var(--cab-line) 50%, var(--cab-surface-2) 75%);
  background-size:200% 100%;
  animation:cab-shimmer 1.4s ease-in-out infinite;
}
@keyframes cab-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){
  .cab-skeleton{ animation:none; background:var(--cab-surface-2) }
}

/* ── Leerzustand ──
   Leere Listen sagen, was zu tun ist:
   <div class="cab-empty"><div class="cab-empty-icon">…SVG…</div>
     <div class="cab-empty-title">Noch keine Aufträge</div>
     <div class="cab-empty-hint">Lege den ersten Auftrag über „+ Neu" an.</div></div> */
.cab-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; text-align:center; padding:1.75rem 1rem; color:var(--cab-text-2);
}
.cab-empty-icon{ opacity:.45; margin-bottom:.25rem }
.cab-empty-icon svg{ width:28px; height:28px }
.cab-empty-title{ font-weight:600; font-size:.875rem; color:var(--cab-text) }
.cab-empty-hint{ font-size:.8125rem }