:root {
    --layout-sidebar-width: 290px;
    --layout-sidebar-collapsed-width: 90px;
}

/* == Layout: Sidebar == */
/* Menu styles are handled exclusively by DaisyUI - only layout customizations here */
.sidebar-menu {
    /* Use DaisyUI menu component - styles come from theme */
    .menu {
        /* Only layout/spacing customizations that don't interfere with DaisyUI styles */
    }
    
    .menu-label {
        /* DaisyUI menu title - uses theme colors */
        @apply text-base-content opacity-50 text-xs font-medium uppercase;
    }
    
    /* Ensure DaisyUI active state is visible */
    .menu-item.active {
        /* DaisyUI handles active state automatically - ensure it's visible */
        background-color: var(--color-base-300);
        color: var(--color-base-content);
    }

    .collapse {
        input {
            @apply min-h-8 p-0;
        }

        .collapse-title {
            @apply peer-hover:bg-base-200 rounded-box flex min-h-8 items-center gap-2 text-sm;

            .arrow-icon {
                @apply opacity-60 transition-all;
            }

            &:is(:where(.peer):checked ~ *) {
                @apply font-medium;

                .arrow-icon {
                    @apply rotate-90 opacity-100;
                }
            }
        }

        .collapse-content {
            &:before {
                @apply bg-base-content/10 absolute start-4 top-10 bottom-2 w-px;
                content: "";
            }
        }
    }
}

/* == Layout: Sidebar == */

#layout-sidebar {
    width: var(--layout-sidebar-width);
    min-width: var(--layout-sidebar-width);
    border-width: 0;
    background: transparent;
    height: 100vh;

    @apply sticky top-0 self-start flex flex-col;

    &.hide {
        width: var(--layout-sidebar-collapsed-width);
        min-width: var(--layout-sidebar-collapsed-width);
    }
}

/* == Layout: Topbar == */

#layout-topbar {
    background: var(--layout-topbar-background);
    @apply sticky top-0 max-h-16 min-h-16 transition-[top,_margin,_border-radius] duration-300;
}

/* == Layout: Content == */


/* == Sidebar: Toggle == */

/* Legacy support for .collapsed class */
#layout-sidebar.collapsed {
    width: var(--layout-sidebar-collapsed-width);
    min-width: var(--layout-sidebar-collapsed-width);
}

/* == Sidebar: Collapsed State - Hide labels and center icons == */
/* DaisyUI menu styles are handled by theme - only layout customizations for collapsed state */
#layout-sidebar .menu li {
}

#layout-sidebar .menu .menu-item {
}

/* Ensure DaisyUI active state is visible - explicit CSS rule */
/* DaisyUI applies active state automatically, but we ensure it's not hidden by other rules */
#layout-sidebar .menu .menu-item.active {
    /* Explicit active state styling using DaisyUI theme variables */
    background-color: var(--color-base-300);
    color: var(--color-base-content);
}

#layout-sidebar.collapsed .menu li {
    padding: 0.25rem 0 !important;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

#layout-sidebar.collapsed .menu .menu-item {
    justify-content: center !important;
    align-items: center !important;
    padding: 0.5rem !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* Ensure DaisyUI active state works correctly - preserve active styles even when collapsed */
/* DaisyUI applies active styles automatically - we just need to ensure they're not overridden */
#layout-sidebar.collapsed .menu .menu-item.active {
    /* Explicit active state styling when collapsed - ensure it's visible */
    background-color: var(--color-base-300);
    color: var(--color-base-content);
    /* The !important on padding/justify-content above doesn't override DaisyUI's active background */
}

/* Hide text in menu items when sidebar is collapsed */
#layout-sidebar .menu .menu-item .grow,
#layout-sidebar .menu .menu-item .menu-item-text,
#layout-sidebar .menu .menu-item .submenu-item-text,
#layout-sidebar .menu .menu-item > span:not(.iconify):not(.badge) {
    max-width: 1000px;
    width: auto;
    visibility: visible;
    flex-shrink: 1;
}

#layout-sidebar.collapsed .menu .menu-item .grow,
#layout-sidebar.collapsed .menu .menu-item .menu-item-text,
#layout-sidebar.collapsed .menu .menu-item .submenu-item-text,
#layout-sidebar.collapsed .menu .menu-item > span:not(.iconify):not(.badge) {
    opacity: 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    visibility: hidden !important;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Center icons when collapsed */
#layout-sidebar .menu .menu-item .iconify {
}

#layout-sidebar.collapsed .menu .menu-item .iconify {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Show tooltips only when sidebar is collapsed */
/* Hide tooltips when sidebar is expanded */
#layout-sidebar:not(.collapsed) .menu .menu-item.tooltip::before,
#layout-sidebar:not(.collapsed) .menu .menu-item.tooltip::after {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show tooltips when sidebar is collapsed */
#layout-sidebar.collapsed .menu .menu-item.tooltip::before,
#layout-sidebar.collapsed .menu .menu-item.tooltip::after {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Ensure tooltips are visible and not clipped by overflow */
#layout-sidebar.collapsed .menu .menu-item.tooltip {
    position: relative;
    overflow: visible;
}

#layout-sidebar.collapsed .menu .menu-item.tooltip::before {
    z-index: 9999 !important;
}

#layout-sidebar.collapsed .menu .menu-item.tooltip::after {
    z-index: 9998 !important;
}

/* Ensure sidebar container allows tooltips to overflow when collapsed */
#layout-sidebar.collapsed .layout-sidebar-content {
    overflow: visible !important;
}

#layout-sidebar.collapsed [data-simplebar] {
    overflow: visible !important;
}

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

/* Hide logo/title when collapsed */
#layout-sidebar .nav-brand {
    max-width: 1000px;
    visibility: visible;
}

#layout-sidebar.collapsed .nav-brand {
    opacity: 0;
    max-width: 0;
    visibility: hidden;
    display: none !important;
}

/* Center toggle button */
#layout-sidebar.collapsed .inline-flex.items-center {
    justify-content: center !important;
    width: 100% !important;
}

/* Adjust padding for collapsed state */
#layout-sidebar .layout-sidebar-content {
}

#layout-sidebar.collapsed .layout-sidebar-content {
    padding: 0.5rem !important;
}


/* Center the menu container */
#layout-sidebar .layout-sidebar-menu-items {
    @apply px-2;
}

#layout-sidebar.collapsed .layout-sidebar-menu-items {
    @apply px-0;
}

/* Ensure menu items are centered when collapsed */
#layout-sidebar.collapsed .menu {
    align-items: center;
}

/* Hide badges and other text elements when collapsed - DaisyUI menu styles */
#layout-sidebar .menu .menu-item .badge {
    max-width: 100px;
    visibility: visible;
}

#layout-sidebar.collapsed .menu .menu-item .badge {
    opacity: 0;
    max-width: 0;
    visibility: hidden;
    display: none !important;
}

/* User menu - show avatar when collapsed, hide text */
#layout-sidebar .menu.flex.flex-col {
}

#layout-sidebar.collapsed .menu.flex.flex-col {
    /* Keep menu visible but hide text, show only avatar */
    @apply px-0;
}

#layout-sidebar.collapsed .menu.flex.flex-col .menu-item {
    justify-content: center !important;
    align-items: center !important;
    padding: 0.5rem !important;
    width: 100%;
}

/* Hide text in user menu when collapsed, but keep avatar visible */
#layout-sidebar.collapsed .menu.flex.flex-col .menu-item .submenu-item-text {
    opacity: 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    visibility: hidden !important;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Keep avatar visible when collapsed */
#layout-sidebar.collapsed .menu.flex.flex-col .menu-item > div,
#layout-sidebar.collapsed .menu.flex.flex-col .menu-item > img {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide role switcher when collapsed */
#layout-sidebar .role-switcher {
    max-height: 500px;
    visibility: visible;
}

#layout-sidebar.collapsed .role-switcher {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    display: none !important;
}

#layout-sidebar-hover {
    @apply fixed top-0 bottom-0 left-0 z-11 hidden;
}

#layout-sidebar-hover-trigger:checked~#layout-sidebar {
    @apply fixed z-12;
    margin-inline-start: calc(var(--layout-sidebar-width));
}

#layout-sidebar-hover-trigger:checked~#layout-sidebar-hover {
    @apply block;
}

#layout-sidebar-hover:hover~#layout-sidebar,
#layout-sidebar-hover-trigger:checked~#layout-sidebar:hover {
    @apply z-12;
    margin-inline-start: 0;
}

/* Sticky header */
.layout-sticky-header {
    background: linear-gradient(to bottom, var(--root-bg) 60%, transparent 100%);
}


/* == Layout: Monochrome Layer == */

#layout-monochrome-layer {
    @apply pointer-events-none fixed inset-0 z-[999999] opacity-0 grayscale-100 backdrop-opacity-100 transition-all duration-1000;
}

html[data-monochrome-enabled] #layout-monochrome-layer {
    @apply opacity-100;
}

/* == Sidebar: @media for small devices (phone, tablet), <= lg size == */

@media (max-width: 1023px) {
    /* Sidebar fixed from left on mobile - hidden by default */
    #layout-sidebar {
        @apply fixed top-0 bottom-0 left-0 z-[500];
        width: var(--layout-sidebar-collapsed-width) !important;
        min-width: var(--layout-sidebar-collapsed-width) !important;
        transform: translateX(-100%);
    }
    
    #layout-sidebar:not(.collapsed) {
        width: var(--layout-sidebar-width) !important;
        min-width: var(--layout-sidebar-width) !important;
    }

    /* Show sidebar when marked as visible on mobile */
    #layout-sidebar.is-mobile-visible {
        transform: translateX(0);
    }

    /* Allow full width when expanded explicitly */
    #layout-sidebar.is-mobile-visible:not(.collapsed) {
        width: var(--layout-sidebar-width) !important;
        min-width: var(--layout-sidebar-width) !important;
    }

    /* Show overlay when sidebar is visible on mobile */
    body:has(#layout-sidebar.is-mobile-visible) #mobile-sidebar-overlay {
        display: block !important;
    }
}

/* Mobile overlay */
#mobile-sidebar-overlay {
}

/* Hide overlay on desktop */
@media (min-width: 1024px) {
    #mobile-sidebar-overlay {
        display: none !important;
    }
}

/* == Overrides: specific to material theme and non-material theme == */

html:not([data-theme="material"], [data-theme="material-dark"]) {
    #layout-sidebar {
        border: none;
    }
}

html[data-theme="material"],
html[data-theme="material-dark"] {
    #layout-sidebar {
        max-height: calc(100vh - 32px);
        @apply rounded-box top-4 bottom-4 ms-4;
    }

    #layout-topbar {
        @apply rounded-box static mx-5 mt-4;
    }
}