/* Theme Overrides for Dynamic Branding */

/* Improve hover contrast for navigation menu */
.k-drawer-item:hover,
.k-drawer-item.k-hover {
    background-color: var(--primary-100) !important;
    color: var(--primary-800) !important;
}

.k-drawer-item.k-selected,
.k-drawer-item.k-selected:hover {
    background-color: var(--primary-200) !important;
    color: var(--primary-900) !important;
    font-weight: 600;
}

/* TreeView selected state override */
.k-treeview-leaf.k-selected {
    border-color: var(--primary-500) !important;
    color: white !important;
    background-color: var(--primary-500) !important;
}

.k-treeview-leaf.k-selected:hover {
    background-color: var(--primary-600) !important;
}

/* TreeView item states */
.k-treeview-item .active {
    background-color: var(--primary-100) !important;
    border-color: var(--primary-200) !important;
    color: var(--primary-900) !important;
}

.k-treeview-item .active:hover {
    background-color: var(--primary-200) !important;
}

/* Override Kendo default primary color for selected items */
.k-treeview .bg-primary-100 {
    background-color: var(--primary-100) !important;
}

.k-treeview .bg-primary-200 {
    background-color: var(--primary-200) !important;
}

.k-treeview .border-primary-200 {
    border-color: var(--primary-200) !important;
}

/* NavLink active state in TreeView */
.k-treeview .active.bg-primary-100 {
    background-color: var(--primary-100) !important;
    border-color: var(--primary-200) !important;
}

/* Ensure text color contrast */
.k-treeview .text-primary-700,
.k-treeview .text-primary-800,
.k-treeview .text-primary-900 {
    color: var(--primary-900) !important;
}

/* Override orange hover text colors to use primary */
.hover-text-orange-600:hover,
.hover-text-orange-700:hover {
    color: var(--primary-700) !important;
}

/* Ensure primary hover text colors work in TreeView */
.k-treeview .hover-text-primary-600:hover,
.k-treeview .hover-text-primary-700:hover,
.k-treeview-item .hover-text-primary-600:hover,
.k-treeview-item .hover-text-primary-700:hover {
    color: var(--primary-700) !important;
}

/* Force hover colors on navigation links */
.k-treeview .link:hover,
.k-treeview .link:hover span,
.k-treeview .link:hover .k-icon,
.k-treeview .link:hover .k-svg-icon,
.k-treeview-item .link:hover,
.k-treeview-item .link:hover span {
    color: var(--primary-700) !important;
}

/* Override any remaining orange text on hover */
.menu .link:hover,
.menu .link:hover span,
.menu .hover-text-primary-700:hover {
    color: var(--primary-700) !important;
}

/* Navigation menu hover improvements */
.hover-bg-primary-50:hover {
    background-color: var(--primary-100) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hover-bg-primary-100:hover {
    background-color: var(--primary-200) !important;
}

/* Active state with better contrast */
.bg-primary-100.active {
    background-color: var(--primary-200) !important;
    border-color: var(--primary-300) !important;
}

/* Ensure text contrast on hover */
.hover-text-primary-700:hover {
    color: var(--primary-900) !important;
}

/* Parent item when has active children */
.active-parent {
    background-color: var(--primary-50) !important;
    color: var(--primary-800) !important;
    position: relative;
}

.active-parent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary-500);
}

/* Improve contrast for primary backgrounds */
.bg-primary-500,
.bg-primary-600,
.bg-primary-700 {
    color: white !important;
}

.bg-primary-50,
.bg-primary-100,
.bg-primary-200 {
    color: var(--primary-900) !important;
}

/* Drawer specific overrides */
.k-drawer-container .k-drawer-items {
    background-color: transparent !important;
}

.k-drawer-item {
    border-radius: 0.75rem;
    margin: 0.25rem 0.5rem;
    transition: all 0.2s ease;
}

/* Focus states */
.k-drawer-item:focus,
.k-drawer-item.k-focus {
    box-shadow: 0 0 0 2px var(--primary-400) !important;
    outline: none !important;
} 