/* =============================================================
 * klickbar.css — sichtbar machen, was anklickbar ist
 * 09.09.2026 · Ansage Matthias: "meine MA beschweren sich, dass man nicht
 * erkennen kann was klickbar ist und was nicht. z.B. die verschiedenen
 * Dashboards und im Menue. Kannst du bitte ueberall ein optische Button und
 * Mausreaktion einfuegen"
 *
 * WARUM ZENTRAL: die App verteilt rund tausend onclick-Attribute ueber 69
 * Moduldateien. Jede einzeln anzufassen waere weder vollstaendig noch
 * haltbar — die naechste neue Zeile haette den Hinweis wieder nicht. Diese
 * Datei greift stattdessen am Merkmal "hat onclick" an und gilt damit auch
 * fuer alles, was spaeter dazukommt.
 *
 * EINGEHAENGT als LETZTES Stylesheet (nach base.css und mobile.css), damit
 * sie bei gleicher Spezifitaet gewinnt. Achtung: Module haengen zur Laufzeit
 * eigene <style>-Bloecke an den Kopf — die stehen im DOM danach und gewinnen
 * weiterhin. Das ist Absicht, kein Versehen: eine Sonderregel eines Moduls
 * soll die Grundregel schlagen duerfen.
 *
 * OPT-OUT: Klasse "keine-klickoptik" an ein Element haengen.
 * ============================================================= */

/* --- Farben. base.css kennt keine Hover- und keine Fokusvariable; die
   bestehenden Hover-Flaechen sind hart als rgba(255,255,255,…) codiert und
   damit im HELLEN Thema praktisch unsichtbar. Genau daher kommt ein Teil der
   Beschwerde. --- */
:root, :root[data-theme="dark"] {
  --klick-flaeche: rgba(255,255,255,0.07);
  --klick-flaeche-stark: rgba(255,255,255,0.13);
  --klick-rand: rgba(255,255,255,0.20);
  --klick-fokus: #60a5fa;
}
:root[data-theme="light"] {
  --klick-flaeche: rgba(15,23,42,0.06);
  --klick-flaeche-stark: rgba(15,23,42,0.11);
  --klick-rand: rgba(15,23,42,0.24);
  --klick-fokus: #2563eb;
}

/* --- 1. Der Mauszeiger. Gilt fuer alles mit onclick, fuer alles, dem ein
   Modul inline cursor:pointer verpasst (so werden z.B. die Dashboard-Kacheln
   in core.js verdrahtet), und fuer die Klasse .klickbar. --- */
[onclick],
[style*="cursor:pointer"],
[style*="cursor: pointer"],
.klickbar,
.dropdown-trigger,
.panel-title.clickable,
.gp-value[onclick] { cursor: pointer; }

[onclick][disabled], .keine-klickoptik { cursor: default; }

/* --- 2. Mausreaktion auf textartigen Klickzielen (div, span, Zeile, Zelle,
   Listeneintrag, Link ohne Ziel). Ausgenommen sind die grossen Flaechen —
   ein Hover ueber den halben Bildschirm hilft niemandem. --- */
div[onclick]:not(.modal-backdrop):not(.modal):not(.panel):not(.view):not(.sidebar):not(.keine-klickoptik):hover,
span[onclick]:not(.keine-klickoptik):hover,
li[onclick]:not(.keine-klickoptik):hover,
td[onclick]:not(.keine-klickoptik):hover,
a[onclick]:not([href]):not(.nav-item):not(.keine-klickoptik):hover,
.klickbar:not(.keine-klickoptik):hover {
  background: var(--klick-flaeche);
  border-radius: 6px;
}
tr[onclick]:not(.keine-klickoptik):hover { background: var(--klick-flaeche); }

div[onclick]:not(.modal-backdrop):not(.modal):not(.panel):not(.view):not(.sidebar),
span[onclick], li[onclick], td[onclick], tr[onclick], a[onclick]:not([href]), .klickbar {
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

/* Gedrueckt: kurze, spuerbare Rueckmeldung statt Stille. */
div[onclick]:not(.modal-backdrop):not(.modal):not(.panel):not(.view):not(.sidebar):active,
span[onclick]:active, li[onclick]:active, .klickbar:active,
.btn:active, button:active, .nav-item:active, .panel-tab:active, .gp-tab:active, .zw-tab:active,
.kpi-card[style*="pointer"]:active { transform: translateY(1px); }

/* --- 3. Ein Klickziel, das wie Fliesstext aussieht, bleibt unsichtbar. Links
   ohne href (in VANSS das uebliche Muster fuer "hier klicken") bekommen daher
   Farbe und beim Zeigen eine Unterstreichung. --- */
a[onclick]:not([href]):not(.nav-item):not(.btn) {
  color: var(--accent-blue);
  text-decoration: none;
}
a[onclick]:not([href]):not(.nav-item):not(.btn):hover { text-decoration: underline; }

/* --- 4. Knoepfe. .btn hatte bisher weder Hover noch gedrueckten Zustand —
   jeder <button class="btn"> ohne -primary/-secondary reagierte gar nicht. --- */
.btn, button.btn { border: 1px solid transparent; }
.btn:hover { filter: brightness(1.10); }
.btn-secondary:hover { background: var(--klick-flaeche-stark); color: var(--text); border-color: var(--klick-rand); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; transform: none; }

/* Kleine Knopfvarianten, die in den Modulen benutzt, aber nie definiert
   wurden — ohne diese Regeln zeigt der Browser seinen eigenen Systemknopf. */
.btn-small, .msg-reply-btn, .btn-mini {
  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  background: var(--klick-flaeche); color: var(--text-secondary);
  border: 1px solid var(--border); transition: all 0.12s ease;
}
.btn-small:hover, .msg-reply-btn:hover, .btn-mini:hover {
  background: var(--klick-flaeche-stark); color: var(--text); border-color: var(--klick-rand);
}

/* --- 5. Menue. Der Hover war im hellen Thema unsichtbar; der aktive Punkt
   nur eine schwache Flaeche. Jetzt: deutliche Flaeche und ein Balken links,
   der auch bei schlechtem Bildschirm zu sehen ist. --- */
.nav-item { position: relative; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--klick-flaeche-stark); color: var(--text); }
.nav-item.active { border-left-color: var(--accent-blue); font-weight: 600; }
:root[data-theme="light"] .nav-item:hover { background: var(--klick-flaeche-stark); }

/* --- 6. Karten und Kacheln, die etwas oeffnen. core.js setzt beim Verdrahten
   inline cursor:pointer — daran ist eine wirklich klickbare Kachel zu
   erkennen, eine reine Anzeigekachel bleibt unberuehrt. --- */
.kpi-card[style*="pointer"], .kpi-card[onclick], .ticket-card, .card[onclick], .klickbar-karte {
  border: 1px solid var(--border);
}
.kpi-card[style*="pointer"]:hover, .kpi-card[onclick]:hover, .card[onclick]:hover, .klickbar-karte:hover {
  border-color: var(--klick-rand);
  background: var(--bg-card-hover);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.panel-header.clickable:hover, .panel-title.clickable:hover { background: var(--klick-flaeche); }

/* --- 7. Reiter und Pillen --- */
.panel-tab:hover:not(.active), .gp-tab:hover:not(.active), .zw-tab:hover:not(.active) {
  background: var(--klick-flaeche); color: var(--text);
}
.dropdown-trigger { border: 1px solid transparent; }
.dropdown-trigger:hover { border-color: var(--klick-rand); }
.modal-close:hover { background: var(--klick-flaeche-stark); color: var(--text); }
.zw-item:hover { background: var(--klick-flaeche); }

/* --- 8. Tastatur. base.css schaltet den Fokusring neunmal mit outline:none
   ab; wer mit Tabulator arbeitet, sieht heute nirgends, wo er steht. Der Ring
   erscheint nur bei Tastaturbedienung (:focus-visible), stoert also beim
   Mausklick nicht. Das !important ist noetig, weil die outline:none-Regeln in
   base.css hoehere Spezifitaet haben. --- */
*:focus-visible {
  outline: 2px solid var(--klick-fokus) !important;
  outline-offset: 2px;
  border-radius: 6px;
}