/**
 * Qadeem brand shell overrides — loaded after app bundle + theme-style-css.
 * Neutral dark surfaces, Wabo green accents, no blue/slate undertones.
 */

.dark {
    color-scheme: dark;

    /* Beat theme-style-css blue-grey secondary palette */
    --color-secondary-50: 250, 250, 250 !important;
    --color-secondary-100: 245, 245, 245 !important;
    --color-secondary-200: 229, 229, 229 !important;
    --color-secondary-300: 212, 212, 212 !important;
    --color-secondary-400: 163, 163, 163 !important;
    --color-secondary-500: 115, 115, 115 !important;
    --color-secondary-600: 82, 82, 82 !important;
    --color-secondary-700: 64, 64, 64 !important;
    --color-secondary-800: 30, 30, 30 !important;
    --color-secondary-900: 23, 23, 23 !important;
    --color-secondary-950: 17, 17, 17 !important;

    --color-slate-700: 38, 38, 38 !important;
    --color-slate-800: 30, 30, 30 !important;
    --color-slate-900: 17, 17, 17 !important;

    --color-gray-700: 38, 38, 38 !important;
    --color-gray-800: 30, 30, 30 !important;
    --color-gray-900: 17, 17, 17 !important;
}

.dark body {
    background-color: #111111;
    color: #ececec;
}

.dark .bg-gray-50,
.dark .bg-neutral-50 {
    background-color: #111111 !important;
}

.dark .bg-white {
    background-color: #1e1e1e !important;
}

/* Surface backgrounds */
.dark .dark\:bg-slate-800,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-secondary-800 {
    background-color: #1e1e1e !important;
}

.dark .dark\:bg-slate-900,
.dark .dark\:bg-neutral-900,
.dark .dark\:bg-secondary-900 {
    background-color: #111111 !important;
}

.dark .dark\:bg-slate-700,
.dark .dark\:bg-gray-700,
.dark .dark\:bg-secondary-700 {
    background-color: #262626 !important;
}

.dark .dark\:bg-gray-700\/50,
.dark .dark\:bg-secondary-700\/50 {
    background-color: rgba(38, 38, 38, 0.5) !important;
}

.dark .bg-slate-50,
.dark .bg-secondary-50 {
    background-color: #171717 !important;
}

/* Borders */
.dark .border-slate-300,
.dark .border-gray-300,
.dark .border-secondary-200,
.dark .border-secondary-300,
.dark .dark\:border-slate-600,
.dark .dark\:border-gray-600,
.dark .dark\:border-secondary-600,
.dark .dark\:border-secondary-700 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .ring-slate-300,
.dark .dark\:ring-slate-600 {
    --tw-ring-color: rgba(255, 255, 255, 0.08);
}

/* Text — headings without dark: variant */
.dark .text-slate-800,
.dark .text-slate-900,
.dark .text-gray-800,
.dark .text-gray-900,
.dark .text-secondary-900,
.dark .dark\:text-slate-100,
.dark .dark\:text-slate-200,
.dark .dark\:text-gray-100 {
    color: #ececec !important;
}

.dark .text-slate-600,
.dark .text-slate-700,
.dark .dark\:text-slate-300,
.dark .dark\:text-slate-400,
.dark .text-gray-500,
.dark .text-gray-600,
.dark .dark\:text-gray-400,
.dark .text-secondary-500,
.dark .text-secondary-600,
.dark .dark\:text-secondary-300,
.dark .dark\:text-secondary-400 {
    color: #a3a3a3 !important;
}

.dark .text-primary-600,
.dark .text-primary-500,
.dark .text-primary-700,
.dark .dark\:text-primary-400,
.dark .dark\:text-primary-300 {
    color: #4ade80 !important;
}

.dark .hover\:text-primary-800:hover,
.dark .hover\:text-primary-700:hover,
.dark .dark\:hover\:text-primary-300:hover,
.dark .dark\:hover\:text-primary-200:hover {
    color: #86efac !important;
}

/* Solid buttons — white label on green fill */
.bg-primary-500,
.bg-primary-600,
.bg-primary-700,
.hover\:bg-primary-500:hover,
.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover,
.focus\:bg-primary-700:focus,
.active\:bg-primary-700:active {
    color: #ffffff !important;
}

button,
[type='button'],
[type='submit'],
.inline-flex.items-center {
    line-height: 1.25;
    letter-spacing: normal;
}

/* Form controls */
.dark input:not([type='checkbox']):not([type='radio']),
.dark select,
.dark textarea,
.dark .ts-control,
.dark .vs__dropdown-toggle {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ececec !important;
}

.dark .ts-dropdown,
.dark .vs__dropdown-menu {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .ts-dropdown [data-selectable].option:hover,
.dark .vs__dropdown-option--highlight {
    background-color: rgba(74, 222, 128, 0.12) !important;
}

/* Vue Flow */
.vue-flow__edge-path {
    stroke: #22c55e !important;
}

.vue-flow__handle {
    background: #22c55e !important;
    border-color: #ffffff !important;
}

.dark .vue-flow__minimap-mask {
    fill: rgba(17, 17, 17, 0.8);
}

.dark .vue-flow__minimap-node {
    fill: #22c55e !important;
    stroke: #4ade80 !important;
}