:root {
    --layout-sidebar-width: 240px;
    --layout-sidebar-collapsed-width: 72px;
    /* Navbar height (min-h-14) so mobile sidebar/overlay start below it and hamburger stays tappable */
    --layout-navbar-height: 3.5rem;
    /* Mobile: top offset for overlay/sidebar (below navbar; increased when trial banner is present) */
    --mobile-header-top: 3.5rem;
}

/* When trial banner is visible, push mobile overlay/sidebar down so they start below banner + navbar */
body:has([data-trial-banner="true"]) {
    --mobile-header-top: 7rem;
}

/* == Layout: Sidebar == */
/* Menu: horizontal alignment of icon + label */
#layout-sidebar:not(.collapsed) .menu .menu-item {
    @apply flex items-center;
}

/* Active/selected: highlight with background and show label */
#layout-sidebar .menu .menu-item.menu-item-active {
    @apply text-primary font-bold bg-primary/10;
}

#layout-sidebar .menu .menu-item.menu-item-active .iconify {
    color: var(--color-primary);
}

/* Keep selected item unchanged on hover (no visual change) */
#layout-sidebar .menu .menu-item.menu-item-active:hover {
    cursor: default;
}

/* Hover background for non-active menu items */
#layout-sidebar .menu .menu-item:not(.menu-item-active):hover {}

#layout-sidebar:not(.collapsed) .menu .menu-item .iconify {
    @apply shrink-0;
}

#layout-sidebar:not(.collapsed) .menu .menu-item .menu-item-text,
#layout-sidebar:not(.collapsed) .menu .menu-item .grow {
    @apply flex items-center min-h-[1.25rem];
    text-align: start;
}

.sidebar-menu {

    .menu-label {
        /* DaisyUI menu title - uses theme colors */
        @apply text-base-content opacity-50 text-xs font-medium uppercase;
    }

    .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: 100%;
    min-height: 100%;
    /* Full viewport height below header (and trial banner when present) so background reaches bottom */
    min-height: calc(100vh - var(--mobile-header-top));
    position: sticky;
    top: 0;
    @apply sticky self-start flex flex-col;

    .layout-sidebar-content {
        border-width: 0;
        border-color: var(--color-base-300);
        border-style: solid;
        min-height: 100%;
        min-height: calc(100vh - var(--mobile-header-top));
    }



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

/* == Layout: Topbar (admin top header) == */
#admin-top-header {
    /* background: var(--layout-topbar-background, var(--color-base-100)); */
    transition-property: top, margin, border-radius;
}

/* Desktop sidebar toggle: show collapse icon when expanded, expand icon when collapsed */
[data-controller~="sidebar"] .desktop-sidebar-collapse-icon {
    display: block;
}

[data-controller~="sidebar"] .desktop-sidebar-expand-icon {
    display: none;
}

[data-controller~="sidebar"].sidebar-collapsed .desktop-sidebar-collapse-icon {
    display: none !important;
}

[data-controller~="sidebar"].sidebar-collapsed .desktop-sidebar-expand-icon {
    display: block !important;
}

/* == 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);
    z-index: 50;
    isolation: isolate;
}


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

/* Desktop only: when collapsed keep responsive visibility – e.g. only Calendar, not Occurrences */
@media (min-width: 768px) {
    #layout-sidebar.collapsed .menu li.md\:hidden {
        display: none !important;
    }
}

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

/* Allow active item to show label when collapsed (override overflow and alignment) */
#layout-sidebar.collapsed .menu .menu-item.menu-item-active,
#layout-sidebar.collapsed .menu li:has(.menu-item-active) {
    overflow: visible !important;
}

/* When any menu item is hovered, allow overflow so its tooltip is not clipped */
#layout-sidebar.collapsed .menu li:has(.menu-item.tooltip:hover),
#layout-sidebar.collapsed .menu .menu-item.tooltip:hover {
    overflow: visible !important;
}

#layout-sidebar.collapsed .menu .menu-item.menu-item-active {
    justify-content: flex-start !important;
}



/* 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>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>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;
}

/* Show label when sidebar is collapsed and menu item is selected (override hide rules) */
#layout-sidebar.collapsed .menu .menu-item.menu-item-active .menu-item-text,
#layout-sidebar.collapsed .menu .menu-item.menu-item-active .grow {
    opacity: 1 !important;
    max-width: 120px !important;
    width: auto !important;
    min-width: 0 !important;
    visibility: visible !important;
    display: inline-block !important;
    padding: 0 0.25rem 0 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hide menu titles when sidebar is collapsed */
#layout-sidebar.collapsed .menu .menu-title .tracking-wider {
    display: none !important;
}

/* Center icons when collapsed */

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

/* 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;
}

/* Collapsed: show tooltip only on hover (not on focus or on load) */
#layout-sidebar.collapsed .menu .menu-item.tooltip::before,
#layout-sidebar.collapsed .menu .menu-item.tooltip::after {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show tooltip on hover for every collapsed menu item (not only the active one) */
#layout-sidebar.collapsed .menu .menu-item.tooltip:hover::before,
#layout-sidebar.collapsed .menu .menu-item.tooltip:hover::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: 10001 !important;
}

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

/* Collapsed sidebar: raise stacking context so tooltips appear above main content */

/* 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;
}

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

    .menu-item {
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
    }
}

/* 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;
}

/* 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 == */
/* Mobile: sidebar overlays the content (drawer). Fixed below header; top set by JS so hamburger stays visible.
   Content does not move; overlay dims it and blocks clicks; sidebar slides in on top. */

@media (max-width: 1023px) {

    /* Sidebar: fixed overlay from header bottom to viewport bottom; always 290px, slide in from left */
    #layout-sidebar {
        @apply fixed left-0 bottom-0 bg-white;
        top: var(--mobile-header-top);
        width: var(--layout-sidebar-width) !important;
        min-width: var(--layout-sidebar-width) !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        border-right: 1px solid var(--color-base-300);
    }

    #layout-sidebar.is-mobile-visible {
        transform: translateX(0);
    }

    /* Inner content fills height so white bg goes to bottom */
    #layout-sidebar .layout-sidebar-content {
        min-height: 100%;
    }

    /* Overlay: fixed below header, full width; blocks clicks; top from JS */
    #mobile-sidebar-overlay {
        top: var(--mobile-header-top);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        pointer-events: none;
    }

    body:has(#layout-sidebar.is-mobile-visible) #mobile-sidebar-overlay {
        display: block !important;
        pointer-events: auto;
    }
}

/* 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;
    }
}

/* Material theme sidebar offset only on desktop; on mobile layout.css uses --mobile-header-top */
@media (min-width: 1024px) {

    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;
        }

        #admin-top-header {
            @apply rounded-box static mx-5 mt-4;
        }
    }
}