/*
 * RichlyAI Sleek dashboard sidebar override.
 * Keeps the Sleek sidebar scrollable on long menus and lets light mode use a light sidebar
 * without forcing those colors onto dark mode.
 */
:root {
    --richlyai-sidebar-width: 15.25rem;
    --richlyai-sidebar-collapsed-width: 80px;
    --richlyai-sidebar-transition: 200ms ease;
    --richlyai-sidebar-bg-light: #f5f7fa;
    --richlyai-sidebar-border-light: #e5e7eb;
    --richlyai-sidebar-text-light: #334155;
    --richlyai-sidebar-muted-light: #64748b;
    --richlyai-sidebar-hover-light: #e2e8f0;
    --richlyai-sidebar-active: #ff5722;
    --richlyai-sidebar-active-soft: rgb(255 87 34 / 12%);
    --richlyai-sidebar-scrollbar-thumb: rgb(100 116 139 / 45%);
    --richlyai-sidebar-scrollbar-thumb-hover: rgb(51 65 85 / 70%);
}

body[data-theme='sleek'] {
    --navbar-width: var(--richlyai-sidebar-width);
}

@media (min-width: 1024px) {
    body[data-theme='sleek'].navbar-shrinked,
    body[data-theme='sleek'].richlyai-sidebar-collapsed {
        --navbar-width: var(--richlyai-sidebar-collapsed-width);
        --navbar-ps: 0.75rem;
        --navbar-pe: 0.75rem;
        --navbar-link-ps: 0.5rem;
        --navbar-link-pe: 0.5rem;
    }

    body[data-theme='sleek'] .lqd-navbar {
        flex: 0 0 var(--navbar-width);
        min-width: var(--navbar-width);
        max-width: var(--navbar-width);
        width: var(--navbar-width) !important;
        transition:
            width var(--richlyai-sidebar-transition),
            min-width var(--richlyai-sidebar-transition),
            max-width var(--richlyai-sidebar-transition),
            flex-basis var(--richlyai-sidebar-transition),
            background-color var(--richlyai-sidebar-transition),
            border-color var(--richlyai-sidebar-transition);
    }

    body[data-theme='sleek'] .lqd-page-content-wrap {
        flex: 1 1 auto;
        min-width: 0;
        transition:
            width var(--richlyai-sidebar-transition),
            padding-inline-start var(--richlyai-sidebar-transition);
    }

    body[data-theme='sleek'] .lqd-navbar-expander {
        inset-inline-start: var(--navbar-width);
        transition:
            inset-inline-start var(--richlyai-sidebar-transition),
            background-color var(--richlyai-sidebar-transition),
            color var(--richlyai-sidebar-transition),
            transform var(--richlyai-sidebar-transition);
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-expander,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-expander {
        inset-inline-start: var(--richlyai-sidebar-collapsed-width) !important;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-inner,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-inner {
        padding-inline-end: 0.75rem;
        padding-inline-start: 0.75rem;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-logo,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-logo {
        justify-content: center;
        padding-inline: 0;
        text-align: center;
        width: 100%;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-link,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-link {
        gap: 0;
        justify-content: center;
        min-height: 2.75rem;
        padding-inline-end: 0.5rem;
        padding-inline-start: 0.5rem;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-nav-link-icon,
    body[data-theme='sleek'].navbar-shrinked .lqd-nav-link-letter-icon,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-nav-link-icon,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-nav-link-letter-icon {
        display: inline-flex;
        flex: 0 0 auto;
        margin-inline: auto;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-nav-link-expander,
    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-label-wrap,
    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-affiliation,
    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-item > .lqd-navbar-label,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-nav-link-expander,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-label-wrap,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-affiliation,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-item > .lqd-navbar-label {
        opacity: 0;
        pointer-events: none;
        transition:
            opacity 120ms ease 80ms,
            visibility 120ms ease 80ms;
        visibility: hidden;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-label-children,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-label-children {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-nav-link-label,
    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-dropdown,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-nav-link-label,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-dropdown {
        background: hsl(var(--navbar-background));
        border: 1px solid hsl(var(--navbar-border));
        border-radius: 0.625rem;
        box-shadow: 0 12px 30px rgb(15 23 42 / 14%);
        color: hsl(var(--navbar-foreground));
        inset-inline-start: calc(var(--richlyai-sidebar-collapsed-width) + 0.625rem);
        max-width: min(22rem, calc(100vw - var(--richlyai-sidebar-collapsed-width) - 2rem));
        opacity: 0;
        padding: 0.5rem 0.75rem;
        pointer-events: none;
        position: fixed;
        top: var(--item-y, 5rem);
        transform: translateX(0.5rem);
        transition:
            opacity 150ms ease,
            transform 150ms ease,
            visibility 150ms ease;
        visibility: hidden;
        white-space: nowrap;
        width: max-content;
        z-index: 1000;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-dropdown,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-dropdown {
        display: block !important;
        margin: 0;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-dropdown .lqd-nav-link-label,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-dropdown .lqd-nav-link-label {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: inherit;
        inset-inline-start: auto;
        max-width: none;
        opacity: 1;
        padding: 0;
        pointer-events: auto;
        position: static;
        top: auto;
        transform: none;
        visibility: visible;
        white-space: normal;
        width: auto;
        z-index: auto;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-item:hover > .lqd-navbar-link .lqd-nav-link-label,
    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-item:hover > .lqd-navbar-dropdown,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-item:hover > .lqd-navbar-link .lqd-nav-link-label,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-item:hover > .lqd-navbar-dropdown {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }

    body[data-theme='sleek'].navbar-shrinked .lqd-navbar-item:hover > .lqd-navbar-dropdown,
    body[data-theme='sleek'].richlyai-sidebar-collapsed .lqd-navbar-item:hover > .lqd-navbar-dropdown {
        pointer-events: auto;
    }
}

/*
 * RichlyAI override: allow long Sleek sidebar menus to scroll independently.
 * The actual scrollable element is the default navbar inner container.
 */
@media (min-width: 992px) {
    body[data-theme='sleek'] .lqd-navbar {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    body[data-theme='sleek'] .lqd-navbar-inner {
        height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 1rem;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 991.98px) {
    body[data-theme='sleek'] .lqd-navbar {
        overflow: hidden;
    }

    body[data-theme='sleek'] .lqd-navbar-inner {
        max-height: inherit;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

body[data-theme='sleek'] .lqd-navbar-inner.no-scrollbar {
    -ms-overflow-style: auto;
    scrollbar-color: var(--richlyai-sidebar-scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

body[data-theme='sleek'] .lqd-navbar-inner.no-scrollbar::-webkit-scrollbar {
    display: block;
    width: 0.375rem;
}

body[data-theme='sleek'] .lqd-navbar-inner.no-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

body[data-theme='sleek'] .lqd-navbar-inner.no-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--richlyai-sidebar-scrollbar-thumb);
    border-radius: 999px;
}

body[data-theme='sleek'] .lqd-navbar-inner.no-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--richlyai-sidebar-scrollbar-thumb-hover);
}

/*
 * RichlyAI light-mode override for Sleek only.
 * Dark mode keeps Sleek's original dark sidebar variables and colors.
 */
body[data-theme='sleek'].theme-light,
html.theme-light body[data-theme='sleek'] {
    --navbar-background: 210 40% 98%;
    --navbar-foreground: 215 16% 47%;
    --navbar-background-hover: 214 32% 91%;
    --navbar-foreground-hover: 215 25% 27%;
    --navbar-background-active: 14 100% 57%;
    --navbar-foreground-active: 14 100% 57%;
    --navbar-border: 220 13% 91%;
    --navbar-divider: 220 13% 91%;
    --navbar-icon-foreground-hover: 14 100% 57%;
    --navbar-icon-foreground-active: 14 100% 57%;
}

body[data-theme='sleek'].theme-light .lqd-navbar,
body[data-theme='sleek'].theme-light .lqd-navbar-wrap,
html.theme-light body[data-theme='sleek'] .lqd-navbar,
html.theme-light body[data-theme='sleek'] .lqd-navbar-wrap {
    background-color: var(--richlyai-sidebar-bg-light);
    border-inline-end-color: var(--richlyai-sidebar-border-light);
    color: var(--richlyai-sidebar-text-light);
}

body[data-theme='sleek'].theme-light .lqd-navbar-link,
body[data-theme='sleek'].theme-light .lqd-navbar-dropdown-link,
html.theme-light body[data-theme='sleek'] .lqd-navbar-link,
html.theme-light body[data-theme='sleek'] .lqd-navbar-dropdown-link {
    color: var(--richlyai-sidebar-muted-light);
}

body[data-theme='sleek'].theme-light .lqd-navbar-label,
html.theme-light body[data-theme='sleek'] .lqd-navbar-label {
    color: var(--richlyai-sidebar-muted-light);
}

body[data-theme='sleek'].theme-light .lqd-navbar-divider,
html.theme-light body[data-theme='sleek'] .lqd-navbar-divider {
    border-color: var(--richlyai-sidebar-border-light);
}

body[data-theme='sleek'].theme-light .lqd-navbar-link:hover,
body[data-theme='sleek'].theme-light .lqd-navbar-dropdown-link:hover,
html.theme-light body[data-theme='sleek'] .lqd-navbar-link:hover,
html.theme-light body[data-theme='sleek'] .lqd-navbar-dropdown-link:hover {
    background-color: var(--richlyai-sidebar-hover-light);
    color: var(--richlyai-sidebar-text-light);
}

body[data-theme='sleek'].theme-light .lqd-navbar-link.active,
body[data-theme='sleek'].theme-light .lqd-navbar-link[aria-current='page'],
body[data-theme='sleek'].theme-light .lqd-navbar-dropdown-link.active,
body[data-theme='sleek'].theme-light .lqd-navbar-dropdown-link[aria-current='page'],
html.theme-light body[data-theme='sleek'] .lqd-navbar-link.active,
html.theme-light body[data-theme='sleek'] .lqd-navbar-link[aria-current='page'],
html.theme-light body[data-theme='sleek'] .lqd-navbar-dropdown-link.active,
html.theme-light body[data-theme='sleek'] .lqd-navbar-dropdown-link[aria-current='page'] {
    background-color: var(--richlyai-sidebar-active-soft);
    color: var(--richlyai-sidebar-active);
}

body[data-theme='sleek'].theme-light .lqd-navbar-link.active .lqd-nav-link-icon,
body[data-theme='sleek'].theme-light .lqd-navbar-link[aria-current='page'] .lqd-nav-link-icon,
html.theme-light body[data-theme='sleek'] .lqd-navbar-link.active .lqd-nav-link-icon,
html.theme-light body[data-theme='sleek'] .lqd-navbar-link[aria-current='page'] .lqd-nav-link-icon {
    color: var(--richlyai-sidebar-active);
}

body[data-theme='sleek'].theme-light .lqd-navbar-affiliation,
html.theme-light body[data-theme='sleek'] .lqd-navbar-affiliation {
    background-color: rgb(255 255 255 / 70%);
    border-color: var(--richlyai-sidebar-border-light);
    color: var(--richlyai-sidebar-text-light);
}

body[data-theme='sleek'].theme-light .lqd-navbar-expander,
html.theme-light body[data-theme='sleek'] .lqd-navbar-expander {
    background-color: var(--richlyai-sidebar-active);
    color: #fff;
}

/* Undo older broad snippets that set the whole dashboard content area to visible overflow. */
body[data-theme='sleek'] .lqd-page-content-wrap {
    overflow: hidden;
}