/* ============================================================
 * KCS Medical — Custom Chatwoot Branding & UI Overrides
 * ============================================================
 * Wird via Nginx sub_filter in das Chatwoot-Dashboard injiziert.
 *
 * Chatwoot v4.10.1 nutzt Radix Colors + Tailwind mit
 * hardcodierten Farbwerten (rgb(39, 129, 246) = Chatwoot-Blau).
 * Die --blue-* CSS-Variablen decken nur Utility-Klassen ab,
 * .bg-n-brand etc. sind zur Build-Zeit kompiliert.
 *
 * Strategie: Beide Ebenen überschreiben:
 * 1. --blue-* Variablen (fuer Utility-Klassen)
 * 2. .bg-n-brand etc. direkt (fuer kompilierte Tailwind-Klassen)
 *
 * BEI CHATWOOT-UPDATE PRUEFEN:
 * 1. Dashboard oeffnen -> Farben korrekt (Orange)?
 * 2. DevTools -> .bg-n-brand Background-Color pruefen
 * 3. Neue Farbklassen suchen die nicht ueberschrieben werden
 * ============================================================ */

/* --- KCS Medical Brand Color: #fa851e (Orange) --- */
/* RGB-Kanaele: 250 133 30 */

/* 1. Radix --blue-* Variablen ueberschreiben (Utility-Klassen) */
:root {
  --blue-9: 250 133 30;   /* Primaer — war 39 129 246 */
  --blue-10: 224 118 15;  /* Hover — war 21 116 231 */
  --blue-11: 253 181 118; /* Text on dark bg */
  --blue-12: 254 224 194; /* Lightest text */
}

/* 2. Kompilierte Tailwind-Klassen direkt ueberschreiben */

/* Primaer-Buttons (Einloggen, Senden, etc.) */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.before\:bg-n-brand::before {
  background-color: #fa851e !important;
}

.hover\:enabled\:brightness-110:enabled:hover {
  filter: brightness(1.1);
}

/* Hover-States */
.hover\:bg-n-brand\/80:hover {
  background-color: rgba(250, 133, 30, 0.8) !important;
}

.hover\:bg-n-brand\/10:hover,
.hover\:enabled\:bg-n-brand\/20:enabled:hover {
  background-color: rgba(250, 133, 30, 0.1) !important;
}

/* Focus-States */
.focus-visible\:bg-n-brand\/20:focus-visible {
  background-color: rgba(250, 133, 30, 0.2) !important;
}

/* Transparente Brand-Hintergruende */
.bg-n-brand\/5 {
  background-color: rgba(250, 133, 30, 0.05) !important;
}

.bg-n-brand\/10 {
  background-color: rgba(250, 133, 30, 0.1) !important;
}

/* Dark Mode Varianten */
.dark\:bg-n-brand\/10:is(.dark *) {
  background-color: rgba(250, 133, 30, 0.1) !important;
}

.dark\:bg-n-brand\/20:is(.dark *) {
  background-color: rgba(250, 133, 30, 0.2) !important;
}

.dark\:bg-n-brand\/30:is(.dark *) {
  background-color: rgba(250, 133, 30, 0.3) !important;
}

.dark\:checked\:bg-n-brand:checked:is(.dark *) {
  background-color: #fa851e !important;
}

/* Focus-Ring / Outline in Brand-Farbe */
.focus\:outline-n-brand:focus,
.dark\:focus\:outline-n-brand:focus:is(.dark *) {
  outline-color: #fa851e !important;
}

/* --- Chatwoot Branding ausblenden --- */
.branding--footer,
.brand-name,
[class*="branding"] {
  display: none !important;
}

/* --- Custom Font (optional, deaktiviert) --- */
/*
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body, .app-wrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
*/

/* --- Sidebar Logo ersetzen (optional, deaktiviert) --- */
/*
.sidebar .logo--thumbnail {
  background-image: url('/kcs-logo.svg') !important;
  background-size: contain !important;
}
*/

/* ============================================================
 * UI-Element Hiding — Snoozed-Status ausblenden
 * ============================================================
 * KCS Medical nutzt nur Agent (open) und Zoe (pending).
 * Snoozed-Status wird nicht verwendet und wird ausgeblendet.
 *
 * STRATEGIE:
 * CSS allein kann keine Elemente nach Text-Inhalt verstecken.
 * Chatwoot v4.10.1 rendert Status-Filter als <button> ohne
 * data-Attribute, daher ist JS-basiertes Hiding notwendig.
 *
 * CSS Pre-Hiding (hier): Verhindert kurzes Aufblitzen (FOUC)
 * fuer Elemente mit bekannten Selektoren.
 * JS Hiding (kcs-overrides.js): Text-basiertes Matching fuer
 * alle dynamischen Elemente per MutationObserver.
 *
 * BEI CHATWOOT-UPDATE PRUEFEN:
 * 1. Pruefen ob neue Snooze-Buttons an anderen Stellen erscheinen
 * 2. Fluent-Icon-Namen validieren (snooze, alarm-clock-minus)
 * 3. kcs-overrides.js Textmuster ggf. anpassen
 * ============================================================ */

/* Kontext-Menu: Snooze-Option hat fluent-icon "snooze" */
/* MenuItem-Container ist Eltern von fluent-icon[icon="snooze"] */
.menu:has(fluent-icon[icon="snooze"]) {
  display: none !important;
}

/* Kontext-Menu: Trennlinie vor Snooze-Option (optional, wird per JS bereinigt) */

/* ============================================================
 * Navigation-Hiding — Ungenutzte Menuepunkte ausblenden
 * ============================================================
 * KCS Medical nutzt Mentions, Captain und Help Center nicht.
 * Diese Sidebar-Eintraege werden per CSS :has() ausgeblendet.
 *
 * WARUM NUR CSS (kein JS wie beim Snooze-Hiding):
 * Sidebar-Elemente sind statisch im DOM ab dem initialen Render.
 * CSS :has() ist deklarativ und greift automatisch bei Re-Renders.
 * Snooze brauchte JS wegen dynamischer Dropdowns/Modals/Shadow DOM.
 *
 * HINWEIS: Nur visuelles Hiding! Routen sind weiterhin per URL
 * erreichbar. Fuer echte Zugriffskontrolle: Feature Flags nutzen.
 *
 * COLLAPSED SIDEBAR: Captain und Help Center werden auch im
 * eingeklappten Modus versteckt (Icon-Match ohne role="button").
 * Mentions im Collapsed-Popover bleibt sichtbar (Teleport-DOM,
 * niedriger Impact — kleines Team).
 *
 * BEI CHATWOOT-UPDATE PRUEFEN:
 * 1. i-woot-captain Icon-Klasse noch vorhanden?
 * 2. i-lucide-library-big Icon-Klasse noch vorhanden?
 * 3. child-item CSS-Klasse auf SidebarGroupLeaf.vue?
 * 4. Sidebar-Struktur: nav > ul > li Hierarchie intakt?
 * 5. Router-Link href enthaelt noch "/mentions"?
 * ============================================================ */

/* Mentions (Kind von Conversations) — via URL-Pattern */
/* Sprachunabhaengig: router-link href enthaelt immer "/mentions" */
li.child-item:has(> a[href*="/mentions"]) {
  display: none !important;
}

/* Captain (Top-Level) — via Icon-Klasse, sidebar-scoped */
/* Funktioniert in Expanded + Collapsed Mode */
nav > ul > li:has(.i-woot-captain) {
  display: none !important;
}

/* Help Center (Top-Level) — via Icon-Klasse, sidebar-scoped */
/* Funktioniert in Expanded + Collapsed Mode */
nav > ul > li:has(.i-lucide-library-big) {
  display: none !important;
}

/* ============================================================
 * Icon-Override: "Ordner/Filter" Sidebar-Icon ersetzen
 * ============================================================
 * Chatwoot v4.10.1 nutzt i-lucide-folder fuer das "Folders"
 * SubGroup in der Conversations-Sidebar. KCS Medical benennt
 * diesen Punkt in "Filter" um (via i18n-Patch) und ersetzt
 * das Ordner-Icon durch das Lucide "funnel" Icon.
 *
 * Technik: @egoist/tailwindcss-icons generiert Mask-Mode-CSS
 * mit --svg Custom Property. Wir ueberschreiben nur --svg,
 * alle anderen Properties (mask-image, background-color etc.)
 * bleiben intakt.
 *
 * Scope: nav-Selektor begrenzt Override auf Sidebar.
 * i-lucide-folder wird nur in Sidebar.vue verwendet (1 Stelle).
 *
 * BEI CHATWOOT-UPDATE PRUEFEN:
 * 1. Wird i-lucide-folder noch fuer Folders verwendet?
 * 2. Liegt die Sidebar noch in einem <nav>?
 * 3. Nutzt Tailwind-Icons noch --svg Custom Property?
 * ============================================================ */
nav .i-lucide-folder {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E%3C/svg%3E") !important;
}