/* remitza v4 theme: graphite sidebar (spec 7.1), 216px wide and 88px collapsed. Markup: Dcat partials/sidebar + partials/menu. */

body.rz-theme .main-sidebar,
body.rz-theme .main-sidebar::before {
    width: var(--rz-sidebar-w);
    transition: width 300ms var(--ease-spay), margin-left 300ms var(--ease-spay);
}

body.rz-theme .main-sidebar {
    border-right: 1px solid var(--sidebar-border);
    background-color: var(--sidebar) !important; /* Dcat dark mode: [class*=sidebar-dark-] #223 !important until theme.js swaps it back */
    background-image: none;
    box-shadow: none !important; /* beats Bootstrap's .shadow !important */
    color: var(--sidebar-foreground);
}

/* Logo band: the same height as the topbar */
body.rz-theme .main-sidebar .navbar-header {
    display: flex;
    align-items: center;
    height: var(--rz-topbar-h);
    padding: 0 20px;
    border-bottom: 1px solid var(--sidebar-border);
    background: var(--sidebar);
}

body.rz-theme .main-sidebar .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    transition: opacity 150ms var(--ease-spay);
}

body.rz-theme .main-sidebar .navbar-header .navbar-brand .logo-lg,
body.rz-theme .main-sidebar .navbar-header .navbar-brand .logo-mini {
    color: var(--sidebar-accent-foreground);
    font-weight: inherit; /* Dcat dark mode: `.main-menu .navbar-header .logo-lg { font-weight: 300 }` */
}

body.rz-theme .main-sidebar .navbar-brand:hover {
    opacity: .8;
}

body.rz-theme .main-sidebar .navbar-brand img {
    width: auto;
    height: 36px;
    max-width: 168px;
    filter: brightness(1.1);
}

/* Menu */
body.rz-theme:not(.sidebar-separate) .main-sidebar .sidebar {
    margin-top: 0; /* Dcat adds 1rem in dark mode only */
}

body.rz-theme .main-sidebar .nav-sidebar {
    position: relative;
    flex-wrap: nowrap; /* Bootstrap's .nav wraps, which lets one long label widen every row past the sidebar */
    padding: 6px 12px 12px !important; /* beats the inline padding-top in partials/sidebar */
}

body.rz-theme .main-sidebar .nav-sidebar > .nav-item {
    margin-bottom: 1px;
}

body.rz-theme .main-sidebar .nav-sidebar .nav-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: 0; /* AdminLTE's .nav.nav-pills .nav-item .nav-link adds .5rem */
    border-radius: 9px;
    background-color: transparent !important; /* AdminLTE: active links get background-color … !important */
    box-shadow: none;
    color: var(--sidebar-foreground) !important; /* Dcat: active links get color #e09c41 !important */
    transition: color 150ms var(--ease-spay), background-color 150ms var(--ease-spay);
}

body.rz-theme .main-sidebar .nav-sidebar > .nav-item > .nav-link {
    padding: 9px 12px !important; /* beats AdminLTE's .main-sidebar .nav .nav-item .nav-link padding !important */
    font-size: 13.5px;
    font-weight: 500;
    line-height: 20px;
}

body.rz-theme .main-sidebar .nav-sidebar .nav-link:hover {
    background-color: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

/* Hovering the current item (or the parent of the current child) keeps the highlight behind it; only other items turn grey */
body.rz-theme .main-sidebar .nav-sidebar > .nav-item:has(.nav-link.active) > .nav-link:hover {
    background-color: transparent !important; /* beats the hover rule above */
}

body.rz-theme .main-sidebar .nav-sidebar .nav-link.active,
body.rz-theme .main-sidebar .nav-sidebar > .nav-item:has(.nav-link.active) > .nav-link {
    color: var(--brand) !important;
    font-weight: 600;
}

body.rz-theme .main-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--brand-soft) !important; /* beats AdminLTE's .nav-treeview > .nav-item > .nav-link.active(:hover) transparent !important */
}

body.rz-theme .main-sidebar .nav-sidebar > .nav-item > .nav-link > i,
body.rz-theme .main-sidebar .nav-sidebar > .nav-item > .nav-link > .rz-glyph-wrap {
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    color: inherit;
    font-size: 18px;
}

body.rz-theme .main-sidebar .rz-glyph {
    width: 20px;
    height: 20px;
}

body.rz-theme .main-sidebar .nav-sidebar .nav-link > p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: inherit; /* follow the link: in dark mode dark.css's and Dcat's generic `p` colour rules match the label itself */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Parent arrow: fa-angle-left turned to point down when closed and up when open (a 180° turn, spec 7.1) */
body.rz-theme .main-sidebar .nav-sidebar .nav-link > p > .right {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -8px;
    font-size: 16px;
    line-height: 16px;
    transform: rotate(-90deg);
    transition: transform 300ms var(--ease-spay);
}

body.rz-theme .main-sidebar .nav-sidebar .menu-open > .nav-link > p > .right {
    transform: rotate(90deg);
}

/* Sub-menus: indented with a guide line, no icons */
body.rz-theme .main-sidebar .nav-treeview {
    margin: 2px 0 4px 26px;
    padding-left: 16px;
    border-left: 1px solid var(--sidebar-border);
}

body.rz-theme .main-sidebar .nav-treeview > .nav-item > .nav-link {
    gap: 0; /* the   depth indent is a flex item; no gap around it */
    padding: 7px 12px !important; /* beats AdminLTE's .main-sidebar .nav-treeview.nav .nav-item .nav-link padding !important */
    font-size: 0; /* hides that   indent */
}

body.rz-theme .main-sidebar .nav-treeview > .nav-item > .nav-link > i {
    display: none;
}

body.rz-theme .main-sidebar .nav-treeview > .nav-item > .nav-link > p {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 19px;
}

/* Sliding highlight behind the active top-level item (an <li> positioned by theme-sidebar.js) */
body.rz-theme .main-sidebar .rz-menu-highlight {
    position: absolute;
    top: 0;
    right: 12px;
    left: 12px;
    height: 0;
    border-radius: 9px;
    background-color: var(--brand-soft);
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms var(--ease-spay), height 300ms var(--ease-spay), opacity 150ms linear;
}

body.rz-theme .main-sidebar .rz-menu-highlight.is-visible {
    opacity: 1;
}

body.rz-theme .main-sidebar .rz-menu-highlight::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    border-radius: 0 3px 3px 0;
    background-color: var(--brand);
}

/* Desktop: content offsets and the collapsed rail */
@media (min-width: 992px) {
    body.rz-theme .content-wrapper,
    body.rz-theme .main-footer {
        margin-left: var(--rz-sidebar-w);
        transition: margin-left 300ms var(--ease-spay);
    }

    body.rz-theme.sidebar-mini.sidebar-collapse .content-wrapper,
    body.rz-theme.sidebar-mini.sidebar-collapse .main-footer {
        margin-left: var(--rz-sidebar-w-collapsed) !important; /* beats AdminLTE's 5.4rem !important */
    }

    /* AdminLTE widens the rail to 260px on hover and while a menu link has focus (.sidebar-focused) */
    body.rz-theme.sidebar-collapse .main-sidebar,
    body.rz-theme.sidebar-collapse .main-sidebar::before,
    body.rz-theme.sidebar-collapse .main-sidebar:hover,
    body.rz-theme.sidebar-collapse .main-sidebar.sidebar-focused {
        width: var(--rz-sidebar-w-collapsed);
        margin-left: 0;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .navbar-header {
        justify-content: center;
        padding: 0;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .logo-lg {
        display: none !important; /* Dcat shows the wide logo while the rail is hovered */
    }

    body.rz-theme.sidebar-collapse .main-sidebar .logo-mini {
        display: inline-flex !important;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .logo-mini img {
        width: 36px;
        height: 36px;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar {
        padding: 6px 8px 12px !important;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item {
        margin-bottom: 4px;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link {
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px !important; /* beats AdminLTE's .sidebar-collapse .main-sidebar .nav .nav-item .nav-link padding !important */
        border-radius: 11px;
        text-align: center;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link > i,
    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link > .rz-glyph-wrap,
    body.rz-theme.sidebar-collapse .main-sidebar .rz-glyph {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 22px;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link > p {
        display: -webkit-box !important; /* AdminLTE hides labels on the rail (width 0, visibility hidden) */
        width: 100%;
        margin: 0 !important;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.15;
        white-space: normal;
        visibility: visible !important;
        opacity: 1 !important; /* also beats AdminLTE's fade-out animation */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-sidebar .nav-link > p > .right {
        display: none;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .nav-treeview {
        display: none !important; /* children open in the flyout; beats the treeview's inline display */
    }

    body.rz-theme.sidebar-collapse .main-sidebar .rz-menu-highlight {
        right: 8px;
        left: 8px;
        border-radius: 11px;
    }

    body.rz-theme.sidebar-collapse .main-sidebar .rz-menu-highlight::before {
        display: none;
    }
}

/* Small screens: Dcat's off-canvas sidebar stays, with the new width and scrim */
@media (max-width: 991.98px) {
    body.rz-theme .main-sidebar,
    body.rz-theme .main-sidebar::before {
        margin-left: calc(-1 * var(--rz-sidebar-w));
    }

    body.rz-theme.sidebar-open .main-sidebar,
    body.rz-theme.sidebar-open .main-sidebar::before {
        margin-left: 0;
    }

    body.rz-theme #sidebar-overlay {
        background-color: var(--scrim);
    }
}

/* Flyout for parent items on the collapsed rail (built by theme-sidebar.js, appended to <body>).
   z-index sits above AdminLTE's sidebar (1038) and Dcat's navbar (997); the spec's 50 would sit under both. */
body.rz-theme .rz-flyout {
    position: fixed;
    top: 0;
    left: calc(var(--rz-sidebar-w-collapsed) + 2px);
    z-index: 1040;
    min-width: 180px;
    padding: 7px;
    border-radius: 16px;
    background-color: var(--brand);
    box-shadow: 0 18px 44px var(--brand-soft-2);
    color: var(--brand-ink);
    opacity: 0;
    transform: translateX(-7px);
    transition: opacity 150ms var(--ease-spay), transform 150ms var(--ease-spay);
}

body.rz-theme .rz-flyout.is-open {
    opacity: 1;
    transform: none;
}

body.rz-theme .rz-flyout::before {
    content: "";
    position: absolute;
    top: var(--rz-notch-top, 24px);
    left: -4px;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    background-color: var(--brand);
    transform: rotate(45deg);
}

body.rz-theme .rz-flyout .rz-flyout-list {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

body.rz-theme .rz-flyout .rz-flyout-title {
    padding: 6px 12px 4px;
    color: rgba(21, 24, 29, .8);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Two classes deep so the generic `a` colour rules (Dcat dark mode) do not win */
body.rz-theme .rz-flyout .rz-flyout-item {
    display: block;
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--brand-ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

body.rz-theme .rz-flyout .rz-flyout-item:hover {
    background-color: rgba(21, 24, 29, .10);
    color: var(--brand-ink);
    text-decoration: none;
}

body.rz-theme .rz-flyout .rz-flyout-item.is-active {
    background-color: rgba(21, 24, 29, .16);
    font-weight: 600;
}