/* Ajustes finos para replicar o layout usando DaisyUI */
:root {
    --sidebar-bg: #f9f9f9;
    --sidebar-transition-duration: 0.35s;
    --sidebar-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alpine.js x-cloak to prevent flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* Ocultar scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===================================== */
/*        SIDEBAR TOOLTIP FIXES          */
/* ===================================== */

/* Allow tooltips to overflow the sidebar when collapsed */
.sidebar-collapsed {
    overflow: visible !important;
}

.sidebar-collapsed nav {
    overflow: visible !important;
}

.sidebar-collapsed .menu {
    overflow: visible !important;
}

/* Tooltip container needs relative positioning */
.menu li.tooltip {
    position: relative;
    overflow: visible !important;
}

/* Tooltip text styling */
.menu li.tooltip-right::before {
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999 !important;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background-color: oklch(var(--n));
    color: oklch(var(--nc));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Tooltip arrow styling */
.menu li.tooltip-right::after {
    position: absolute;
    left: calc(100% + 0.25rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999 !important;
    border-color: transparent oklch(var(--n)) transparent transparent;
    pointer-events: none;
}

/* ===================================== */
/*       SIDEBAR ICON TRANSITIONS        */
/* ===================================== */

/* Smooth icon size transition */
.sidebar-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-icon-collapsed {
    font-size: 1.5rem !important;
}

/* ===================================== */
/*    SIDEBAR COLLAPSE/EXPAND ANIMATION  */
/* ===================================== */

/* Sidebar transition */
aside {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease;
}

/* Menu item transitions */
.menu a {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text fade out/in animation */
.menu span {
    transition: opacity 0.2s ease,
        transform 0.2s ease;
}

/* Menu title transitions */
.menu-title {
    transition: opacity 0.2s ease,
        transform 0.2s ease,
        margin 0.25s ease;
}

/* Icon scaling on hover when collapsed */
.sidebar-collapsed .menu a:hover .sidebar-icon {
    transform: scale(1.15);
}

/* Smooth logo/header transition */
.sidebar-header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapse button rotation */
.collapse-btn-icon {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================== */
/*         ANIMATION EFFECTS             */
/* ===================================== */

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================== */
/*         RESPONSIVE UTILITIES          */
/* ===================================== */

@media (max-width: 1024px) {
    .sidebar-collapsed {
        width: 16rem !important;
    }
}

/* ===================================== */
/*         CUSTOM KEYFRAMES              */
/* ===================================== */

@keyframes float {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 0.7;
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}