/* Modern SaaS Sidebar - Restructured Design Style */
.modern-sidebar {
    background-color: var(--color-base-100) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border-right: 1px solid var(--color-base-300);
}

.modern-sidebar-item {
    transition: all 0.2s ease-in-out;
    border-radius: var(--radius-selector, 0.75rem);
    color: var(--color-secondary) !important;
}

.modern-sidebar-item svg {
    color: var(--color-secondary);
    transition: color 0.2s ease-in-out;
}

.modern-sidebar-item:hover {
    background-color: var(--color-base-200) !important;
    color: var(--color-primary) !important;
}

.modern-sidebar-item:hover svg {
    color: var(--color-primary);
}

.modern-sidebar-active {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}

.modern-sidebar-active svg {
    color: var(--color-primary-content) !important;
}

.modern-sidebar-active:hover {
    background-color: var(--color-base-200) !important;
    color: var(--color-primary) !important;
}

.modern-sidebar-active:hover svg {
    color: var(--color-primary) !important;
}

/* Custom transitions and scrollbars for sidebar navigation */
.modern-sidebar::-webkit-scrollbar {
    width: 4px;
}

.modern-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.modern-sidebar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 2px;
}

.modern-sidebar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Animaciones del dropdown */
@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-scale-up {
  animation: scaleUp 0.15s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.15s ease-out forwards;
}

/* Safe area para el header en PWA */
.pwa-header-safe {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}