/* VIP-Connect Brand Overrides — Kinly
 *
 * Kinly Purple scale replaces NetBird orange (#f68330).
 * Source: docs/design-standards.md
 *
 * Scale mapping:
 *   DEFAULT/400 : #280B56  (Kinly Purple)
 *   100         : #F0ECF5  (very light)
 *   150         : #DDD2EA
 *   200         : #BEB5CC  (30% purple)
 *   300         : #9E8BB5
 *   500         : #220A4A  (hover-dark)
 *   600         : #1D0840  (Kinly Dark Purple)
 *   900         : #120530
 *   950         : #0A0220
 */

/* ===== Base netbird classes ===== */
.fill-netbird { fill: #280B56 !important; }
.bg-netbird { background-color: #280B56 !important; }
.text-netbird { color: #280B56 !important; }
.outline-netbird { outline-color: #280B56 !important; }

/* Borders */
.border-netbird,
.border-netbird-400 { border-color: #280B56 !important; }
.border-netbird-400\/20 { border-color: rgba(40,11,86,0.2) !important; }
.border-netbird-400\/30 { border-color: rgba(40,11,86,0.3) !important; }
.border-netbird-500 { border-color: #220A4A !important; }
.border-netbird\/60 { border-color: rgba(40,11,86,0.6) !important; }

/* Backgrounds — shade variants */
.bg-netbird-100 { background-color: #F0ECF5 !important; }
.bg-netbird-500\/10 { background-color: rgba(34,10,74,0.1) !important; }
.bg-netbird-900 { background-color: #120530 !important; }
.bg-netbird-950 { background-color: #0A0220 !important; }
.bg-netbird\/10 { background-color: rgba(40,11,86,0.1) !important; }
.bg-netbird\/20 { background-color: rgba(40,11,86,0.2) !important; }

/* Text — shade variants */
.text-netbird-100 { color: #F0ECF5 !important; }
.text-netbird-150 { color: #DDD2EA !important; }
.text-netbird-200 { color: #BEB5CC !important; }
.text-netbird-300 { color: #9E8BB5 !important; }
.text-netbird-400 { color: #280B56 !important; }
.text-netbird-400\/80 { color: rgba(40,11,86,0.8) !important; }
.text-netbird-500 { color: #220A4A !important; }
.text-netbird-950 { color: #0A0220 !important; }

/* Gradients */
.from-netbird { --tw-gradient-from: #280B56 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(40,11,86,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-netbird-200 { --tw-gradient-from: #BEB5CC var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(190,181,204,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-netbird-100 { --tw-gradient-to: #F0ECF5 var(--tw-gradient-to-position) !important; }
.to-netbird-400 { --tw-gradient-to: #280B56 var(--tw-gradient-to-position) !important; }

/* ===== Hover states ===== */
.hover\:bg-netbird-500:hover { background-color: #220A4A !important; }
.hover\:bg-netbird-950\/50:hover { background-color: rgba(10,2,32,0.5) !important; }
.hover\:bg-netbird\/20:hover { background-color: rgba(40,11,86,0.2) !important; }
.hover\:bg-netbird:hover { background-color: #280B56 !important; }
.hover\:bg-netbird-100:hover { background-color: #F0ECF5 !important; }
.hover\:text-netbird:hover { color: #280B56 !important; }
.hover\:text-netbird-400:hover { color: #280B56 !important; }
.hover\:text-netbird-500:hover { color: #220A4A !important; }
.hover\:border-netbird:hover { border-color: #280B56 !important; }

/* ===== Enabled / focus states ===== */
.enabled\:bg-netbird:enabled { background-color: #280B56 !important; }
.enabled\:hover\:bg-netbird-500:hover:enabled { background-color: #220A4A !important; }
.enabled\:focus\:ring-netbird-400\/50:focus:enabled { --tw-ring-color: rgba(40,11,86,0.5) !important; }

/* Focus ring (global) */
*:focus { --tw-ring-color: rgba(40,11,86,0.5) !important; }

/* ===== Group / data-state selectors ===== */
.group\/badge:hover .group-hover\/badge\:text-netbird { color: #280B56 !important; }
.group:hover .group-hover\:text-netbird { color: #280B56 !important; }
.data-\[state\=active\]\:text-netbird[data-state=active] { color: #280B56 !important; }
.group\/trigger[data-state=active] .group-data-\[state\=active\]\/trigger\:fill-netbird { fill: #280B56 !important; }
.group\/trigger[data-state=active] .group-data-\[state\=active\]\/trigger\:text-netbird { color: #280B56 !important; }

/* ===== Dark mode — base class overrides ===== */
/* Override .text-netbird / .fill-netbird when in dark mode context
   so accent text is visible on dark backgrounds (#BEB5CC = 30% purple) */
:is(.dark *).text-netbird,
:is(.dark *) .text-netbird { color: #BEB5CC !important; }
:is(.dark *).fill-netbird,
:is(.dark *) .fill-netbird { fill: #BEB5CC !important; }
.dark .text-netbird { color: #BEB5CC !important; }
.dark .fill-netbird { fill: #BEB5CC !important; }

/* ===== Dark mode — .is(.dark *) syntax (Tailwind v3.4+) ===== */
.dark\:border-netbird:is(.dark *) { border-color: #BEB5CC !important; }
.dark\:text-netbird:is(.dark *) { color: #BEB5CC !important; }
.dark\:fill-netbird:is(.dark *) { fill: #BEB5CC !important; }
.dark\:focus\:ring-netbird-600\/50:focus:is(.dark *) { --tw-ring-color: rgba(190,181,204,0.5) !important; }
.enabled\:dark\:bg-netbird:is(.dark *):enabled { background-color: #280B56 !important; }
.enabled\:dark\:hover\:bg-netbird-500\/80:hover:is(.dark *):enabled { background-color: rgba(34,10,74,0.8) !important; }
.dark\:data-\[state\=checked\]\:bg-netbird[data-state=checked]:is(.dark *) { background-color: #280B56 !important; }
.dark\:data-\[state\=active\]\:text-netbird[data-state=active]:is(.dark *) { color: #BEB5CC !important; }

/* Dark mode — legacy .dark prefix fallback */
.dark .dark\:bg-netbird { background-color: #280B56 !important; }
.dark .dark\:bg-netbird-100 { background-color: #F0ECF5 !important; }
.dark .dark\:bg-netbird-500\/10 { background-color: rgba(34,10,74,0.1) !important; }
.dark .dark\:bg-netbird-900 { background-color: #120530 !important; }
.dark .dark\:bg-netbird-950 { background-color: #0A0220 !important; }
.dark .dark\:text-netbird { color: #BEB5CC !important; }
.dark .dark\:text-netbird-100 { color: #F0ECF5 !important; }
.dark .dark\:text-netbird-150 { color: #DDD2EA !important; }
.dark .dark\:text-netbird-200 { color: #BEB5CC !important; }
.dark .dark\:text-netbird-300 { color: #9E8BB5 !important; }
.dark .dark\:text-netbird-400 { color: #BEB5CC !important; }
.dark .dark\:text-netbird-500 { color: #9E8BB5 !important; }
.dark .dark\:border-netbird { border-color: #BEB5CC !important; }
.dark .dark\:border-netbird-400 { border-color: #BEB5CC !important; }
.dark .dark\:fill-netbird { fill: #BEB5CC !important; }
.dark .dark\:hover\:bg-netbird:hover { background-color: #280B56 !important; }
.dark .dark\:hover\:text-netbird:hover { color: #BEB5CC !important; }

/* ===== Sidebar logo replacement — handled by brand-override.js ===== */
/* The NetBird bird icon is a Next.js <img> tag, not an inline SVG.
   JavaScript MutationObserver replaces it with Kinly logo at runtime. */