/**
 * Brand Colors Override - LOADED ✅
 *
 * This file maps Tailwind CSS classes to CSS variables defined in brand-colors.json
 * Edit public/json/brand-colors.json to customize colors
 *
 * CLEANED VERSION: Only includes overrides for sidebar, header, footer, and buttons
 * Removed general overrides that were affecting unintended areas
 */


/* ============================================
   BUTTON COLORS
   ============================================ */

/* Primary Button - Yellow/Brand Color */
.bg-\[\#fede11\] {
    background: linear-gradient(to right, var(--color-button-primary-bg_from, #fede11), var(--color-button-primary-bg_to, #fede11)) !important;
    color: var(--color-button-primary-text, #000000) !important;
}
.dark .bg-\[\#fede11\] {
    background: linear-gradient(to right, var(--color-button-primary-bg_from, #fede11), var(--color-button-primary-bg_to, #fede11)) !important;
    color: var(--color-button-primary-text, #000000) !important;
}

/* Primary Button Hover */
.bg-\[\#fede11\]:hover,
.hover\:bg-\[\#e6c50f\]:hover {
    background: linear-gradient(to right, var(--color-button-primary-hover_from, #e6c50f), var(--color-button-primary-hover_to, #e6c50f)) !important;
    color: var(--color-button-primary-text_hover, #000000) !important;
}
.dark .bg-\[\#fede11\]:hover,
.dark .hover\:bg-\[\#e6c50f\]:hover {
    background: linear-gradient(to right, var(--color-button-primary-hover_from, #e6c50f), var(--color-button-primary-hover_to, #e6c50f)) !important;
    color: var(--color-button-primary-text_hover, #000000) !important;
}

/* Secondary Button - Gray */
.bg-\[\#eee\] {
    background: linear-gradient(to right, var(--color-button-secondary-bg_from, #eeeeee), var(--color-button-secondary-bg_to, #eeeeee)) !important;
    color: var(--color-button-secondary-text, #000000) !important;
}
.dark .dark\:bg-\[\#ddd\] {
    background: linear-gradient(to right, var(--color-button-secondary-bg_from, #dddddd), var(--color-button-secondary-bg_to, #dddddd)) !important;
    color: var(--color-button-secondary-text, #000000) !important;
}

/* Secondary Button Hover */
.bg-\[\#eee\]:hover,
.hover\:bg-\[\#ddd\]:hover {
    background: linear-gradient(to right, var(--color-button-secondary-hover_from, #dddddd), var(--color-button-secondary-hover_to, #dddddd)) !important;
    color: var(--color-button-secondary-text_hover, #000000) !important;
}
.dark .dark\:bg-\[\#ddd\]:hover,
.dark .dark\:hover\:bg-\[\#ccc\]:hover {
    background: linear-gradient(to right, var(--color-button-secondary-hover_from, #cccccc), var(--color-button-secondary-hover_to, #cccccc)) !important;
    color: var(--color-button-secondary-text_hover, #000000) !important;
}

/* Danger Button - Red Gradient with White Text */
.btn-danger {
    background: linear-gradient(to right, var(--color-button-danger-bg_from, #ef4444), var(--color-button-danger-bg_to, #dc2626)) !important;
    color: var(--color-button-danger-text, #ffffff) !important;
}
.dark .btn-danger {
    background: linear-gradient(to right, var(--color-button-danger-bg_from, #ef4444), var(--color-button-danger-bg_to, #dc2626)) !important;
    color: var(--color-button-danger-text, #ffffff) !important;
}

/* Danger Button Hover */
.btn-danger:hover {
    background: linear-gradient(to right, var(--color-button-danger-hover_from, #dc2626), var(--color-button-danger-hover_to, #b91c1c)) !important;
    color: var(--color-button-danger-text_hover, #ffffff) !important;
}
.dark .btn-danger:hover {
    background: linear-gradient(to right, var(--color-button-danger-hover_from, #dc2626), var(--color-button-danger-hover_to, #b91c1c)) !important;
    color: var(--color-button-danger-text_hover, #ffffff) !important;
}

/* ============================================
   SIDEBAR COLORS
   ============================================ */

/* Sidebar containers use CSS variables set by brand-colors component */
.sidebar-container {
    background: linear-gradient(to bottom, var(--sidebar-bg-from), var(--sidebar-bg-to)) !important;
    border-color: var(--sidebar-border) !important;
}

.sidebar-header {
    border-color: var(--sidebar-header-border) !important;
}

.sidebar-logo-text {
    color: var(--sidebar-logo-text) !important;
}

.sidebar-menu-text {
    color: var(--sidebar-menu-text) !important;
}

.sidebar-menu-text:hover {
    color: var(--sidebar-menu-text-hover) !important;
}

.sidebar-menu-hover {
    background: linear-gradient(to right, var(--sidebar-menu-hover-from), var(--sidebar-menu-hover-to)) !important;
}

.sidebar-menu-active {
    background: linear-gradient(to right, var(--sidebar-menu-active-from), var(--sidebar-menu-active-to)) !important;
    color: var(--sidebar-menu-active-text) !important;
}

.sidebar-icon {
    color: var(--sidebar-icon-color) !important;
}

.sidebar-icon:hover {
    color: var(--sidebar-icon-hover) !important;
}

.sidebar-submenu-text {
    color: var(--sidebar-submenu-text) !important;
}

.sidebar-submenu-text:hover {
    color: var(--sidebar-submenu-text-hover) !important;
}

.sidebar-submenu-active {
    background: linear-gradient(to right, var(--sidebar-submenu-active-from), var(--sidebar-submenu-active-to)) !important;
    color: var(--sidebar-submenu-active-text) !important;
}

.sidebar-card {
    background: linear-gradient(to right, var(--sidebar-card-from), var(--sidebar-card-to)) !important;
    border-color: var(--sidebar-card-border) !important;
    color: var(--sidebar-card-text) !important;
}

.sidebar-card:hover {
    background: linear-gradient(to right, var(--sidebar-card-hover-from), var(--sidebar-card-hover-to)) !important;
    border-color: var(--sidebar-card-border-hover) !important;
}

.sidebar-card-icon {
    color: var(--sidebar-card-icon) !important;
}

/* ============================================
   HEADER COLORS
   ============================================ */

/* Header containers use CSS variables set by brand-colors component */
.header-container {
    background: linear-gradient(to bottom, var(--header-bg-from), var(--header-bg-to)) !important;
    border-color: var(--header-border) !important;
}

.header-text {
    color: var(--header-text) !important;
}

.header-icon {
    color: var(--header-icon) !important;
}

.header-icon:hover {
    color: var(--header-icon-hover) !important;
}

.header-button-hover:hover {
    background-color: var(--header-button-hover-bg) !important;
}

/* ============================================
   FOOTER COLORS
   ============================================ */

/* Footer containers use CSS variables set by brand-colors component */
.footer-container {
    background: linear-gradient(to bottom, var(--footer-bg-from), var(--footer-bg-to)) !important;
    border-color: var(--footer-border) !important;
}

.footer-text {
    color: var(--footer-text) !important;
}

.footer-text:hover {
    color: var(--footer-text-hover) !important;
}

.footer-link {
    color: var(--footer-link) !important;
}

.footer-link:hover {
    color: var(--footer-link-hover) !important;
}