/* ==============================================
   VitalCX / Grace AI — Zammad 6.x Desktop Theme
   Overrides Tailwind compiled colors with brand palette

   VitalCX Brand:
     Vital Blue:   #0063FF    Deep Indigo: #0051CF
     Soft Sky:     #A3C7FF    Air Blue:    #D8E7FF
     Black:        #1C1A19    Charcoal:    #575A66
     Drift:        #9DA2B3    Mist:        #E0E3ED
     Paper:        #F8F8FB    White:       #FFFFFF
   ============================================== */

/* ============================================
   1. OVERRIDE TAILWIND COLOR PALETTE
   Map Zammad's Tailwind colors to VitalCX
   ============================================ */

/* --- Blue scale → Vital Blue scale --- */
:root .bg-blue-50  { background-color: #F0F4FF !important }
:root .bg-blue-100 { background-color: #D8E7FF !important }
:root .bg-blue-200 { background-color: #D8E7FF !important }
:root .bg-blue-300 { background-color: #A3C7FF !important }
:root .bg-blue-500 { background-color: #A3C7FF !important }
:root .bg-blue-600 { background-color: #3384FF !important }
:root .bg-blue-700 { background-color: #0063FF !important }
:root .bg-blue-800 { background-color: #0063FF !important }
:root .bg-blue-900 { background-color: #0051CF !important }
:root .bg-blue-950 { background-color: #003DA0 !important }
:root .\!bg-blue-800 { background-color: #0063FF !important }

:root .text-blue-800 { color: #0063FF !important }
:root .text-blue-600 { color: #3384FF !important }

:root .border-blue-600 { border-color: #3384FF !important }
:root .border-blue-700 { border-color: #0063FF !important }
:root .border-blue-800 { border-color: #0063FF !important }

/* Hover states */
:root .hover\:bg-blue-500:hover { background-color: #A3C7FF !important }
:root .hover\:bg-blue-600:hover { background-color: #3384FF !important }
:root .hover\:bg-blue-800:hover { background-color: #0063FF !important }
:root .hover\:bg-blue-900:hover { background-color: #0051CF !important }
:root .hover\:border-blue-700:hover { border-color: #0063FF !important }
:root .hover\:border-blue-800:hover { border-color: #0063FF !important }

/* Focus states */
:root .focus\:bg-blue-800:focus { background-color: #0063FF !important }
:root .focus-within\:bg-blue-500:focus-within { background-color: #A3C7FF !important }
:root .focus-within\:bg-blue-800:focus-within { background-color: #0063FF !important }
:root .focus-visible\:bg-blue-800:focus-visible { background-color: #0063FF !important }
:root .active\:bg-blue-800:active { background-color: #0051CF !important }

/* Group interactions */
:root :is(.group\:hover .group-hover\:bg-blue-800) { background-color: #0063FF !important }
:root :is(.group\/tab\:hover .group-hover\/tab\:bg-blue-600) { background-color: #3384FF !important }
:root :is(.group\:focus .group-focus\:hover\:bg-blue-600:hover) { background-color: #3384FF !important }
:root :is(.group\:hover\:focus .group-hover\:group-focus\:bg-blue-600) { background-color: #3384FF !important }

/* Peer interactions */
:root :is(.peer\:hover~.peer-hover\:border-blue-600) { border-color: #3384FF !important }
:root :is(.peer\:hover~.peer-hover\:text-blue-600) { color: #3384FF !important }
:root :is(.peer\:focus~.peer-focus\:border-blue-800) { border-color: #0063FF !important }
:root :is(.peer\:focus~.peer-focus\:text-blue-800) { color: #0063FF !important }

/* Before pseudo */
:root .before\:bg-blue-200:before { background-color: #D8E7FF !important }

/* --- Dark mode blue overrides --- */
:root .dark\:bg-blue-800:is([data-theme=dark] *) { background-color: #0063FF !important }
:root .dark\:bg-blue-900:is([data-theme=dark] *) { background-color: #0051CF !important }
:root .dark\:bg-blue-950:is([data-theme=dark] *) { background-color: #003DA0 !important }
:root .dark\:text-blue-800:is([data-theme=dark] *) { color: #A3C7FF !important }
:root .dark\:hover\:bg-blue-900:hover:is([data-theme=dark] *) { background-color: #0051CF !important }
:root .dark\:hover\:bg-blue-950:hover:is([data-theme=dark] *) { background-color: #003DA0 !important }
:root .dark\:hover\:border-blue-700:hover:is([data-theme=dark] *) { border-color: #0063FF !important }
:root .dark\:focus-within\:bg-blue-950:focus-within:is([data-theme=dark] *) { background-color: #003DA0 !important }
:root .dark\:hover\:focus-within\:bg-blue-800:focus-within:hover:is([data-theme=dark] *) { background-color: #0063FF !important }
:root .dark\:hover\:focus-within\:bg-blue-950:focus-within:hover:is([data-theme=dark] *) { background-color: #003DA0 !important }
:root .focus\:dark\:bg-blue-800:is([data-theme=dark] *):focus { background-color: #0063FF !important }
:root .dark\:hover\:focus\:bg-blue-800:focus:hover:is([data-theme=dark] *) { background-color: #0063FF !important }
:root .hover\:dark\:bg-blue-900:is([data-theme=dark] *):hover { background-color: #0051CF !important }
:root .active\:dark\:bg-blue-800:is([data-theme=dark] *):active { background-color: #0051CF !important }
:root :is(.group\/tab\:hover .group-hover\/tab\:dark\:bg-blue-900:is([data-theme=dark] *)) { background-color: #0051CF !important }
:root :is(.group\:hover\:focus .dark\:group-hover\:group-focus\:bg-blue-900:is([data-theme=dark] *)) { background-color: #0051CF !important }
:root :is(.group\:focus .dark\:group-focus\:hover\:bg-blue-900:hover:is([data-theme=dark] *)) { background-color: #0051CF !important }
:root :is(.peer\:hover~.dark\:peer-hover\:border-blue-900:is([data-theme=dark] *)) { border-color: #0051CF !important }
:root :is(.peer\:hover~.dark\:peer-hover\:text-blue-900:is([data-theme=dark] *)) { color: #0051CF !important }
:root .before\:dark\:bg-gray-500:is([data-theme=dark] *):before { background-color: #575A66 !important }
:root .before\:dark\:bg-gray-700:is([data-theme=dark] *):before { background-color: #1C1A19 !important }
:root .hover\:before\:dark\:bg-gray-500:is([data-theme=dark] *):hover:before { background-color: #575A66 !important }
:root .hover\:before\:dark\:bg-gray-700:is([data-theme=dark] *):hover:before { background-color: #1C1A19 !important }
:root :is(.group\:focus-within .group-focus-within\:before\:dark\:bg-gray-500:is([data-theme=dark] *)):before { background-color: #575A66 !important }
:root :is(.group\:focus-within .group-focus-within\:before\:dark\:bg-gray-700:is([data-theme=dark] *)):before { background-color: #1C1A19 !important }

/* Formkit checked dark */
:root [data-checked=true]:not([data-type=repeater]).dark\:formkit-checked\:border-neutral-400:is([data-theme=dark] *) { border-color: #9DA2B3 !important }
:root [data-checked=true]:not([data-type=repeater]).dark\:formkit-checked\:text-neutral-400:is([data-theme=dark] *) { color: #9DA2B3 !important }
:root :is([data-checked=true]:not([data-type=repeater]) .dark\:formkit-checked\:border-neutral-400:is([data-theme=dark] *)) { border-color: #9DA2B3 !important }
:root :is([data-checked=true]:not([data-type=repeater]) .dark\:formkit-checked\:text-neutral-400:is([data-theme=dark] *)) { color: #9DA2B3 !important }
:root :is([data-checked=true]:not([data-type=repeater]).peer\:hover~.dark\:formkit-checked\:peer-hover\:border-blue-900:is([data-theme=dark] *)) { border-color: #0051CF !important }
:root :is([data-checked=true]:not([data-type=repeater]).peer\:hover~.dark\:formkit-checked\:peer-hover\:text-blue-900:is([data-theme=dark] *)) { color: #0051CF !important }

/* ============================================
   2. LOADING SCREEN / SPLASH
   ============================================ */
:root {
  --background-primary: #1C1A19 !important;
}

/* ============================================
   3. OLD ZAMMAD APP (legacy views)
   ============================================ */

/* Override legacy CSS variables too */
:root {
  --highlight: #0063FF !important;
  --text-link: #0063FF !important;
  --button-primary-background: #0063FF !important;
  --button-primary-background-active: #0051CF !important;
  --background-active: #0063FF !important;
  --border-highlight: #0063FF !important;
  --info: #0063FF !important;
  --menu-background-active: #0063FF !important;
}

[data-theme="dark"] {
  --highlight: #0063FF !important;
  --text-link: #A3C7FF !important;
  --button-primary-background: #0063FF !important;
  --button-primary-background-active: #0051CF !important;
  --background-active: #0063FF !important;
}

/* ============================================
   4. HIDE ZAMMAD BRANDING
   ============================================ */
[class*="powered-by"],
.poweredBy,
a[href*="zammad.org"],
a[href*="zammad.com"] {
  display: none !important;
}

/* ============================================
   5. FORCE DARK MODE — HIDE THEME TOGGLE
   ============================================ */

/* Force dark theme on html element */
html {
  background-color: #1C1A19 !important;
}

/* Hide the appearance/theme toggle in settings */
[data-test-id="appearance"],
[class*="theme-toggle"],
[class*="ThemeSwitch"],
[class*="appearance-switch"],
label:has(+ [name*="theme"]),
div:has(> [name*="theme"]),
/* Hide the light/dark/auto radio buttons in profile */
[role="radiogroup"]:has([value="light"]),
/* Hide appearance section in user preferences */
section:has([data-test-id="appearance"]) {
  display: none !important;
}