/* World System Builder GXCalc palette */
:root {
    --wsb-green: #00a654;
    --wsb-green-dark: #00934a;
    --wsb-green-panel: #00ae58;
    --wsb-green-panel-hover: #009b4e;
    --wsb-link: #00a654;
    --wsb-bg: #d3d3d3;
    --wsb-surface: #ffffff;
    --wsb-surface-muted: #f5f5f5;
    --wsb-border: #cfcfcf;
    --wsb-text: #303030;
    --wsb-text-muted: #777777;
    --wsb-danger: #e21b24;
}

/* Flat app shell: no gradients / glass */
html,
body,
.glass-bg-canvas {
    background: var(--wsb-bg) !important;
    background-image: none !important;
}

.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.bg-gradient-to-r,
.bg-gradient-to-l,
.bg-gradient-to-t,
.bg-gradient-to-b,
.bg-gradient-to-br,
.bg-gradient-to-tr,
.bg-gradient-to-bl,
.bg-gradient-to-tl {
    background-image: none !important;
    background-color: var(--wsb-surface) !important;
}

div[aria-hidden="true"].pointer-events-none.fixed.inset-0.overflow-hidden {
    display: none !important;
}

.bg-white\/80,
.bg-white\/90,
.bg-white\/95,
.bg-slate-50,
.bg-slate-100,
.bg-indigo-50,
.bg-indigo-100 {
    background-color: var(--wsb-surface) !important;
}

/* Surfaces */
.dashboard-hero,
.dashboard-filter,
.dashboard-panel,
.rounded-2xl,
.rounded-3xl {
    background: var(--wsb-surface) !important;
    border-color: var(--wsb-border) !important;
}

.dashboard-table-head {
    background: #d9efdf !important;
}

.border-indigo-50,
.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-slate-200,
.border-slate-300 {
    border-color: var(--wsb-border) !important;
}

/* Typography */
body,
.text-slate-900,
.text-slate-800,
.text-slate-700,
.text-indigo-950 {
    color: var(--wsb-text) !important;
}

.text-slate-600,
.text-slate-500,
.text-slate-400 {
    color: var(--wsb-text-muted) !important;
}

.text-brand,
.text-indigo-600,
.text-indigo-700,
.text-indigo-800,
.text-blue-600,
.text-blue-700,
.text-green-500,
.text-green-600,
.text-green-700,
.text-teal-600,
.text-teal-700,
.text-cyan-600,
.text-cyan-700,
.text-cyan-800,
.text-sky-600,
.text-sky-700,
.text-sky-800,
.text-violet-600,
.text-violet-700,
.text-violet-800,
.text-purple-600,
.text-purple-700,
.text-purple-800,
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-orange-600,
.text-orange-700,
.text-orange-800,
.text-pink-600,
.text-pink-700,
.text-pink-800,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.hover\:text-indigo-700:hover,
.hover\:text-indigo-900:hover,
.hover\:text-cyan-700:hover,
.hover\:text-violet-700:hover,
.hover\:text-emerald-700:hover,
.hover\:text-amber-700:hover,
.hover\:text-blue-700:hover {
    color: var(--wsb-link) !important;
}

/* Icon chips / badges use WSB green tint */
.bg-indigo-50,
.bg-indigo-100,
.bg-indigo-200,
.bg-green-50,
.bg-green-100,
.bg-green-200,
.bg-amber-50,
.bg-amber-100,
.bg-amber-200,
.bg-orange-50,
.bg-orange-100,
.bg-orange-200,
.bg-pink-50,
.bg-pink-100,
.bg-pink-200,
.bg-rose-50,
.bg-rose-100,
.bg-rose-200,
.bg-cyan-50,
.bg-cyan-100,
.bg-cyan-200,
.bg-sky-50,
.bg-sky-100,
.bg-sky-200,
.bg-violet-50,
.bg-violet-100,
.bg-violet-200,
.bg-purple-50,
.bg-purple-100,
.bg-purple-200,
.bg-emerald-50,
.bg-emerald-100,
.bg-emerald-200,
.bg-blue-50,
.bg-blue-100,
.bg-blue-200,
.bg-teal-50,
.bg-teal-100 {
    background-color: #d9efdf !important;
}

.border-indigo-200,
.border-indigo-300,
.border-green-200,
.border-green-300,
.border-amber-200,
.border-amber-300,
.border-orange-200,
.border-orange-300,
.border-pink-200,
.border-pink-300,
.border-rose-200,
.border-rose-300,
.border-cyan-200,
.border-cyan-300,
.border-sky-200,
.border-sky-300,
.border-violet-200,
.border-violet-300,
.border-purple-200,
.border-purple-300,
.border-emerald-200,
.border-emerald-300,
.border-blue-200,
.border-blue-300,
.ring-indigo-200,
.ring-amber-200,
.ring-pink-200,
.ring-rose-200,
.ring-cyan-200,
.ring-sky-200,
.ring-violet-200,
.ring-purple-200,
.ring-emerald-200 {
    border-color: #9bcfb2 !important;
}

/* Buttons (all major variants -> WSB green except danger) */
.btn-primary,
.btn-success,
.bg-green-500,
.bg-green-600,
.bg-blue-500,
.bg-blue-600,
.bg-indigo-500,
.bg-indigo-600,
.bg-cyan-500,
.bg-cyan-600,
.bg-violet-500,
.bg-violet-600,
button[class*="bg-indigo-500"],
button[class*="bg-indigo-600"],
a[class*="bg-indigo-500"],
a[class*="bg-indigo-600"],
button[class*="bg-cyan-500"],
a[class*="bg-cyan-500"],
button[class*="bg-violet-500"],
a[class*="bg-violet-500"] {
    background-color: var(--wsb-green) !important;
    border-color: var(--wsb-green) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.hover\:bg-green-600:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-cyan-600:hover,
.hover\:bg-violet-600:hover,
button[class*="hover:bg-indigo-600"]:hover,
a[class*="hover:bg-indigo-600"]:hover,
button[class*="hover:bg-cyan-600"]:hover,
a[class*="hover:bg-cyan-600"]:hover,
button[class*="hover:bg-violet-600"]:hover,
a[class*="hover:bg-violet-600"]:hover {
    background-color: var(--wsb-green-dark) !important;
    border-color: var(--wsb-green-dark) !important;
}

.btn-secondary,
.bg-white,
.hover\:bg-slate-200:hover {
    background-color: var(--wsb-surface) !important;
    border-color: var(--wsb-border) !important;
    color: var(--wsb-text) !important;
}

.btn-secondary:hover {
    background-color: var(--wsb-surface-muted) !important;
}

.btn-reset {
    background-color: #1e1e21 !important;
    border-color: #1e1e21 !important;
    color: #ffffff !important;
}

.btn-reset:hover {
    background-color: #161619 !important;
    border-color: #161619 !important;
    color: #ffffff !important;
}

.btn-cancel {
    background-color: #2b2a38 !important;
    border-color: #2b2a38 !important;
    color: #ffffff !important;
}

.btn-cancel:hover {
    background-color: #23222e !important;
    border-color: #23222e !important;
    color: #ffffff !important;
}

.btn-danger,
.bg-red-500,
.bg-red-600,
.bg-rose-500,
.bg-rose-600 {
    background-color: var(--wsb-danger) !important;
    border-color: var(--wsb-danger) !important;
    color: #fff !important;
}

.btn-danger:hover,
.hover\:bg-red-600:hover,
.hover\:bg-rose-600:hover {
    background-color: #c91820 !important;
    border-color: #c91820 !important;
}

/* Inputs and rings */
input,
select,
textarea {
    background-color: #fff !important;
    border-color: var(--wsb-border) !important;
    color: var(--wsb-text) !important;
}

.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus,
.focus-visible\:ring-indigo-500:focus-visible {
    --tw-ring-color: rgb(0 166 84 / 0.35) !important;
}

.focus\:border-indigo-500:focus,
.focus-visible\:border-indigo-500:focus-visible,
.focus\:border-blue-500:focus {
    border-color: var(--wsb-green) !important;
}

/* Sidebar mirrors WSB green menu */
aside.fixed.inset-y-0.left-0 {
    background: var(--wsb-green) !important;
    border-right-color: var(--wsb-green-dark) !important;
}

aside.fixed.inset-y-0.left-0 .border-indigo-100,
aside.fixed.inset-y-0.left-0 .border-indigo-200 {
    border-color: rgb(255 255 255 / 0.24) !important;
}

aside.fixed.inset-y-0.left-0 a,
aside.fixed.inset-y-0.left-0 .text-slate-900,
aside.fixed.inset-y-0.left-0 .text-slate-800,
aside.fixed.inset-y-0.left-0 .text-slate-700,
aside.fixed.inset-y-0.left-0 .text-slate-600,
aside.fixed.inset-y-0.left-0 .text-indigo-600,
aside.fixed.inset-y-0.left-0 .text-indigo-700 {
    color: #fff !important;
}

aside.fixed.inset-y-0.left-0 nav a {
    background-color: var(--wsb-green-panel) !important;
    border: 1px solid rgb(255 255 255 / 0.10) !important;
}

aside.fixed.inset-y-0.left-0 nav a:hover {
    background-color: var(--wsb-green-panel-hover) !important;
}

aside.fixed.inset-y-0.left-0 a[class*="bg-indigo-50"],
aside.fixed.inset-y-0.left-0 a[class*="hover:bg-indigo-50"],
aside.fixed.inset-y-0.left-0 a[class*="bg-white"],
aside.fixed.inset-y-0.left-0 a[class*="bg-indigo-100"] {
    background: var(--wsb-green-dark) !important;
    color: #fff !important;
    border-color: rgb(255 255 255 / 0.45) !important;
}

aside.fixed.inset-y-0.left-0 .bg-indigo-50,
aside.fixed.inset-y-0.left-0 .bg-indigo-100,
aside.fixed.inset-y-0.left-0 .bg-white,
aside.fixed.inset-y-0.left-0 .bg-white\/90,
aside.fixed.inset-y-0.left-0 .bg-white\/95 {
    background-color: transparent !important;
}

/* Flat card shadow */
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl {
    --tw-shadow: 0 2px 10px rgb(0 0 0 / 0.14) !important;
    --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color) !important;
}

/* Illustration color unification (hero/decorative SVGs) */
svg.h-20.w-52 stop,
svg.h-20.w-52 [stop-color] {
    stop-color: var(--wsb-green) !important;
}

svg.h-20.w-52 [stroke]:not([stroke='none']) {
    stroke: var(--wsb-green) !important;
}

svg.h-20.w-52 [fill]:not([fill='none']) {
    fill: var(--wsb-green) !important;
}