/* ===========================================================================
   Side menu — flat, modern sidebar nav (shadcn style) built on Bootstrap's
   accordion. Section headers are flat collapsible rows with a chevron; their
   items sit indented under a thin vertical connector line, each a flat row with
   a subtle rounded hover. No bordered / rounded-card accordion chrome.
   =========================================================================== */

/* Card-header tab strip styled like the sidebar nav: flat rows, rounded hover,
   subtle accent highlight on the selected tab (instead of the boxed tab look). */
.nav-menu .nav-link {
    color: var(--foreground);
    border: 0;
    border-radius: .5rem;
    padding: .4rem .75rem;
}

    .nav-menu .nav-link:hover {
        background-color: var(--accent);
    }

    .nav-menu .nav-link.active {
        background-color: var(--accent);
        color: var(--foreground);
        font-weight: 600;
    }

/* Top-level menu links (Welcome/Persons/Documents/Tickets) — same flat look as the
   section headers: rounded hover + subtle accent highlight on the current page. */
.menu .menu-link {
    display: flex;
    align-items: center;
    padding: .45rem .6rem;
    border-radius: .5rem;
    color: var(--foreground);
    text-decoration: none;
    font-weight: 500;
}

    .menu .menu-link:hover {
        background-color: var(--accent);
    }

    .menu .menu-link.active {
        background-color: var(--accent);
        font-weight: 600;
    }

/* Strip the accordion's card chrome inside the sidebar. */
.menu .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-color: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--foreground);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-padding-y: .45rem;
    --bs-accordion-btn-padding-x: .6rem;
}

.menu .accordion-item {
    background: transparent;
    border: 0;
}

/* Fixed-width icon box so labels line up regardless of glyph width. */
.menu i {
    display: inline-block;
    width: 1.25rem;
    text-align: center;
}

/* Section header: a flat row that gets a subtle rounded hover. */
.menu .accordion-button {
    border-radius: .5rem;
    font-weight: 500;
    color: var(--foreground);
}

    .menu .accordion-button:hover {
        background-color: var(--accent);
    }

    .menu .accordion-button:not(.collapsed) {
        background-color: transparent;
        box-shadow: none;
    }

/* Sub-items: indented to the right of a thin vertical connector line. */
.menu .accordion-body {
    padding: .1rem .25rem .4rem .9rem;
}

.menu .list-group {
    --bs-list-group-border-width: 0;   /* drop the dividers between items */
    border-left: 1px solid var(--border);
    border-radius: 0;
}

.menu .list-group-item {
    background: transparent;
    border: 0;
    margin-left: .4rem;
    padding: .35rem .6rem;
    border-radius: .5rem;
}

    .menu .list-group-item a {
        color: var(--muted-foreground);
    }

    .menu .list-group-item:hover {
        background-color: var(--accent);
    }

        .menu .list-group-item:hover a {
            color: var(--foreground);
        }

/* Current page: subtle highlight + darker, semibold label. */
.menu .list-group-item.active {
    background-color: var(--accent);
}

    .menu .list-group-item.active a {
        color: var(--foreground);
        font-weight: 600;
    }