/* AUTOGENERADO por scripts/gen_branding_overrides.py — NO editar a mano.
 * Mapea las utilidades Tailwind purple/violet/indigo al color del tenant
 * (var(--color-primary)) para que la UI respete el branding configurado.
 * La marca 'Violet Security' (logo + color arbitrario #5b21b6 + emails) NO se ve
 * afectada porque no usa estas clases. Regenerar tras cambios en plantillas. */

.accent-purple-600 { accent-color: var(--color-primary) !important; }
.bg-indigo-100 { background-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.bg-indigo-50 { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.bg-purple-100 { background-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.bg-purple-200 { background-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.bg-purple-400 { background-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; }
.bg-purple-50 { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.bg-purple-500 { background-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.bg-purple-600 { background-color: var(--color-primary) !important; }
.bg-purple-700 { background-color: color-mix(in srgb, var(--color-primary) 88%, black) !important; }
.bg-violet-50 { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.border-indigo-100 { border-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.border-indigo-200 { border-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.border-purple-100 { border-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.border-purple-200 { border-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.border-purple-300 { border-color: color-mix(in srgb, var(--color-primary) 38%, white) !important; }
.border-purple-400 { border-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; }
.border-purple-50 { border-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.border-purple-500 { border-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.border-purple-600 { border-color: var(--color-primary) !important; }
.border-purple-700 { border-color: color-mix(in srgb, var(--color-primary) 88%, black) !important; }
.border-violet-200 { border-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.file\:bg-purple-50 { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.file\:text-purple-700 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.focus-within\:border-purple-400:focus-within { border-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; }
.focus-within\:ring-purple-200:focus-within { --tw-ring-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.focus\:bg-purple-50:focus { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.focus\:border-purple-300:focus { border-color: color-mix(in srgb, var(--color-primary) 38%, white) !important; }
.focus\:border-purple-400:focus { border-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; }
.focus\:border-purple-500:focus { border-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.focus\:ring-purple-100:focus { --tw-ring-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.focus\:ring-purple-200:focus { --tw-ring-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.focus\:ring-purple-300:focus { --tw-ring-color: color-mix(in srgb, var(--color-primary) 38%, white) !important; }
.focus\:ring-purple-400:focus { --tw-ring-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; }
.focus\:ring-purple-500:focus { --tw-ring-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.group:hover .group-hover\:bg-purple-50 { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.group:hover .group-hover\:text-purple-500 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.group:hover .group-hover\:text-purple-600 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.group:hover .group-hover\:text-purple-700 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.hover\:bg-indigo-100:hover { background-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.hover\:bg-indigo-50:hover { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.hover\:bg-purple-100:hover { background-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.hover\:bg-purple-200:hover { background-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.hover\:bg-purple-50:hover { background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important; }
.hover\:bg-purple-500:hover { background-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.hover\:bg-purple-600:hover { background-color: var(--color-primary) !important; }
.hover\:bg-purple-700:hover { background-color: color-mix(in srgb, var(--color-primary) 88%, black) !important; }
.hover\:border-indigo-300:hover { border-color: color-mix(in srgb, var(--color-primary) 38%, white) !important; }
.hover\:border-purple-200:hover { border-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.hover\:border-purple-300:hover { border-color: color-mix(in srgb, var(--color-primary) 38%, white) !important; }
.hover\:border-purple-400:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; }
.hover\:border-purple-500:hover { border-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.hover\:border-purple-600:hover { border-color: var(--color-primary) !important; }
.hover\:file\:bg-purple-100:hover { background-color: color-mix(in srgb, var(--color-primary) 14%, white) !important; }
.hover\:text-purple-600:hover { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.hover\:text-purple-700:hover { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.hover\:text-purple-800:hover { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.hover\:text-purple-900:hover { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.ring-purple-200 { --tw-ring-color: color-mix(in srgb, var(--color-primary) 24%, white) !important; }
.ring-purple-300 { --tw-ring-color: color-mix(in srgb, var(--color-primary) 38%, white) !important; }
.ring-purple-500 { --tw-ring-color: color-mix(in srgb, var(--color-primary) 78%, white) !important; }
.ring-purple-600 { --tw-ring-color: var(--color-primary) !important; }
.text-indigo-600 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-indigo-700 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-indigo-800 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-purple-200 { color: color-mix(in srgb, var(--color-primary) 70%, black) !important; }
.text-purple-300 { color: color-mix(in srgb, var(--color-primary) 70%, black) !important; }
.text-purple-400 { color: color-mix(in srgb, var(--color-primary) 70%, black) !important; }
.text-purple-500 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-purple-600 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-purple-700 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-purple-800 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-purple-900 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-violet-500 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-violet-600 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }
.text-violet-700 { color: color-mix(in srgb, var(--color-primary) 55%, black) !important; }

/* Look and feel: a dark sidebar colour flips the sidebar's own ink so the
   navigation stays readable (sidebar.html sets data-tone="dark"). */
#app-sidebar[data-tone="dark"] {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb;
}
#app-sidebar[data-tone="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-\[var\(--color-primary\)\]) {
  color: #f3f4f6 !important;
}
#app-sidebar[data-tone="dark"] :is(.text-gray-500, .text-gray-400, .text-gray-300, .vs-eyebrow) {
  color: #9ca3af !important;
}
#app-sidebar[data-tone="dark"] :is(.bg-white, .bg-gray-50, .bg-\[var\(--vs-surface-2\)\], .bg-\[var\(--vs-surface-3\)\]) {
  background-color: rgba(255, 255, 255, 0.07) !important;
}
#app-sidebar[data-tone="dark"] :is(.border-gray-200, .border-gray-100) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
#app-sidebar[data-tone="dark"] :is(a[href], button):hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}