/* Sidebar (namespaced, no conflicts with layout.css) */
:root {
    --sidebar-bg: #ffffff;
    --item-text: #1E4A7C; /* brand blue */
    --item-muted: #64748b;
    --line: #e5e7eb; /* slightly darker for mobile visibility */
    --hover-bg: #f5f6f8; /* subtle hover */
    --active-bg: #8CB54F; /* brand green */
    --accent: #8CB54F; /* left bar + focus */
}

* {
    box-sizing: border-box;
}

.sidebar {
    width: 100%;
    min-height: 490px; /* keeps sidebar tall inside a card */
    padding: 12px 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ==== RENAMED: .menu -> .side-menu ==== */
.side-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==== RENAMED: .menu-item -> .side-menu__item ==== */
.side-menu__item {
    position: relative;
}

    /* single separator line between items + bottom border on last */
    .side-menu__item + .side-menu__item {
        border-top: 1px solid var(--line);
    }

    .side-menu__item:last-child {
        border-bottom: 1px solid var(--line);
    }

/* ==== RENAMED: link rules -> .side-menu__link ==== */
.side-menu__link {
    display: block;
    padding: 12px 36px 12px 20px; /* extra right padding for the arrow */
    color: var(--item-text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
    position: relative;
}

    /* Arrow (SVG) — avoids missing glyphs */
    .side-menu__link::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 12px;
        /* neutral (muted) chevron */
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
    }

    /* Hover state */
    .side-menu__link:hover {
        background: var(--hover-bg);
        color: #1E4A7C;
        padding-left: 22px;
    }
        /* darker chevron on hover */
        .side-menu__link:hover::after {
            background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4A7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
        }

    /* Active/selected state (use .is-active on LI OR aria-current="page" on the link) */
    .side-menu__item.is-active > .side-menu__link,
    .side-menu__link[aria-current="page"] {
        background: var(--active-bg);
        color: #ffffff;
    }
        /* white chevron on active */
        .side-menu__item.is-active > .side-menu__link::after,
        .side-menu__link[aria-current="page"]::after {
            background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
        }

        /* Left accent bar for the selected item */
        .side-menu__item.is-active > .side-menu__link::before,
        .side-menu__link[aria-current="page"]::before {
            content: "";
            position: absolute;
            left: 0;
            top: -1px;
            width: 3px;
            height: calc(100% + 2px);
            background: var(--accent);
            border-radius: 0 2px 2px 0;
        }

    /* Keyboard focus */
    .side-menu__link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

/* Mobile guards */
@media (max-width: 640px) {
    .sidebar {
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
    }
    /* if the sidebar sits inside a .card__content, avoid clipping */
    .card__content {
        overflow: visible !important;
    }
}