/* 
 * TrustData Sidebar Styles
 * Add this to your main CSS file or Tailwind compilation
 */

/* Base styles for the sidebar component */
.nav-sidebar {
    @apply relative;
}

/* Sidebar states - expanded is default, collapsed is toggled */
.nav-sidebar.collapsed .sidebar-expandable-section {
    @apply hidden;
}

.nav-sidebar.collapsed .sidebar-label {
    @apply hidden;
}

.nav-sidebar.collapsed .lg\:w-64 {
    @apply lg:w-20;
}

/* Animation for submenu transitions */
.submenu-transition {
    @apply transition-all duration-300 ease-in-out;
}

/* Sidebar icon styling */
.sidebar-icon {
    @apply h-6 w-6 shrink-0;
}

/* Active state styling for sidebar items */
.sidebar-item-active {
    @apply bg-indigo-50 text-indigo-600;
}

.sidebar-item-active .sidebar-icon {
    @apply text-indigo-600;
}

/* Default state for sidebar items */
.sidebar-item {
    @apply text-gray-700 hover:bg-gray-50 hover:text-indigo-600;
}

.sidebar-item .sidebar-icon {
    @apply text-gray-400 group-hover:text-indigo-600;
}

/* Mobile sidebar transition */
#mobile-sidebar-panel {
    @apply transform transition-transform duration-300 ease-in-out;
}

/* Sidebar section with vertical line for child items */
.sidebar-section-with-children {
    @apply relative;
}

.sidebar-section-with-children .sidebar-children {
    @apply ml-6 border-l border-gray-200 pl-3;
}

/* Blue accent for current section */
.sidebar-section-active {
    @apply border-indigo-600;
}

/* Styling for the vertical bar that appears next to active submenu sections */
.sidebar-vertical-indicator {
    @apply absolute left-0 top-0 h-full w-0.5 bg-indigo-600 transform transition-all duration-200 ease-in-out;
    opacity: 0;
}

.sidebar-item-active .sidebar-vertical-indicator {
    opacity: 1;
}

/* TrustData brand colors */
.trustdata-primary {
    @apply text-indigo-600;
}

.trustdata-primary-bg {
    @apply bg-indigo-600;
}

.trustdata-primary-hover {
    @apply hover:bg-indigo-700;
}

/* Custom transition for submenu items */
.submenu-item-transition {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.3s ease, opacity 0.2s ease;
}

.submenu-item-transition.submenu-expanded {
    height: auto;
    opacity: 1;
}