/* ============================================================ * 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 (nur Light Mode!) * WICHTIG: !important ueberschreibt sonst dark:bg-n-background auf der Login-Seite * und erzeugt einen Orange-Tint im Dark Mode. * .dark wird von Tailwind auf gesetzt (Selector Strategy). * MUSS html:not(.dark) sein — ":not(.dark)" allein matched als Vorfahren! */ html:not(.dark) .bg-n-brand\/5 { background-color: rgba(250, 133, 30, 0.05) !important; } html:not(.dark) .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; } /* --- FOUC-Prevention: Component-level .dark Wrapper verstecken --- * Vue-Komponenten (z.B. Login-Seite) rendern mit eigener "dark"-Klasse * auf einem Wrapper-Div, unabhaengig von . Unser Inline-Script * entfernt .dark von sofort, aber Vue-Komponenten erst per * setInterval (~100ms). Ohne dieses CSS blitzt der dunkle Kasten kurz auf. * * visibility:hidden verhindert das Aufblitzen, behaelt aber das Layout. * Sobald JS .dark vom Wrapper entfernt, matched der Selektor nicht * mehr und das Element wird automatisch sichtbar. * * NUR aktiv wenn html KEIN .dark hat (= Light Mode). Im Dark Mode * werden .dark-Wrapper normal gerendert. */ html:not(.dark) .dark { visibility: hidden; } /* --- 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