/* ==========================================================================
   Sidebar Tree Menu
   Targets .sidebar_nav and its nested ul/li structure from nav-example.php
   Bootstrap 5.3 collapse support wired via nav-collapse.js
   ========================================================================== */

/* Bootstrap collapse: hide submenus by default, show when .show is added */
.sidebar_nav ul.collapse {
    display: none;
}

.sidebar_nav ul.collapse.show,
.sidebar_nav ul.collapsing {
    display: block;
}

/* Toggle indicator on parent anchors */
.sidebar_nav li > a[data-bs-toggle="collapse"]::after {
    content: "\f0d7"; /* FA caret-down */
    font-family: FontAwesome, sans-serif;
    font-size: 10px;
    float: right;
    margin-top: 2px;
    transition: transform 0.2s ease;
}

.sidebar_nav li > a[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    transform: rotate(-180deg);
}

/* Root container */
.sidebar_nav {
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* All ul elements */
.sidebar_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* All li elements */
.sidebar_nav ul li {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar_nav ul li:last-child {
    border-bottom: none;
}

/* All anchor elements */
.sidebar_nav ul li > a {
    display: block;
    padding: 8px 12px;
    color: #1a1a1a;
    text-decoration: none;
    background: #f5f5f5;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar_nav ul li > a:hover,
.sidebar_nav ul li > a:focus {
    background: #e0e8f4;
    color: #003580;
    text-decoration: none;
    outline: none;
}

/* Top-level items — slightly bolder */
.sidebar_nav > ul > li > a {
    font-size: 13px;
    background: #eaeaea;
    color: #111;
    border-left: 3px solid transparent;
}

.sidebar_nav > ul > li > a[href="#"] {
    /* Parent-only links (no real URL) */
    cursor: default;
    color: #444;
}

.sidebar_nav > ul > li > a:hover,
.sidebar_nav > ul > li > a:focus {
    background: #d6e4f7;
    border-left-color: #1a5fb4;
    color: #003580;
}

/* Level 2 — first nested ul directly after a top-level li */
.sidebar_nav > ul > ul,
.sidebar_nav > ul > li + ul {
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
}

.sidebar_nav > ul > ul > li > a,
.sidebar_nav > ul > li + ul > li > a {
    padding-left: 22px;
    font-weight: 400;
    font-size: 12.5px;
    background: #fafafa;
}

.sidebar_nav > ul > ul > li > a:hover,
.sidebar_nav > ul > li + ul > li > a:hover {
    background: #e8f0fb;
    color: #003580;
}

/* Level 3 — nested ul inside level-2 */
.sidebar_nav > ul > ul > ul,
.sidebar_nav > ul > li + ul > ul,
.sidebar_nav > ul > li + ul > li + ul {
    background: #f2f2f2;
    border-top: 1px solid #e8e8e8;
}

.sidebar_nav > ul > ul > ul > li > a,
.sidebar_nav > ul > li + ul > ul > li > a,
.sidebar_nav > ul > li + ul > li + ul > li > a {
    padding-left: 36px;
    font-size: 12px;
    color: #333;
    background: #f2f2f2;
}

.sidebar_nav > ul > ul > ul > li > a:hover,
.sidebar_nav > ul > li + ul > ul > li > a:hover,
.sidebar_nav > ul > li + ul > li + ul > li > a:hover {
    background: #dde9f9;
    color: #003580;
}

/* Level 4 — deepest nesting seen in nav-example.php */
.sidebar_nav > ul > ul > ul > ul > li > a,
.sidebar_nav > ul > li + ul > ul > ul > li > a,
.sidebar_nav > ul > li + ul > li + ul > ul > li > a,
.sidebar_nav > ul > li + ul > li + ul > li + ul > li > a {
    padding-left: 50px;
    font-size: 11.5px;
    color: #555;
    background: #efefef;
}

.sidebar_nav > ul > ul > ul > ul > li > a:hover,
.sidebar_nav > ul > li + ul > ul > ul > li > a:hover,
.sidebar_nav > ul > li + ul > li + ul > ul > li > a:hover,
.sidebar_nav > ul > li + ul > li + ul > li + ul > li > a:hover {
    background: #d4e5f8;
    color: #003580;
}

/* Visual indent guide lines for nested levels */
.sidebar_nav > ul > ul > li,
.sidebar_nav > ul > li + ul > li {
    border-left: 3px solid #c8d8ee;
}

.sidebar_nav > ul > ul > ul > li,
.sidebar_nav > ul > li + ul > ul > li,
.sidebar_nav > ul > li + ul > li + ul > li {
    border-left: 3px solid #a8c4e8;
}

.sidebar_nav > ul > ul > ul > ul > li,
.sidebar_nav > ul > li + ul > ul > ul > li,
.sidebar_nav > ul > li + ul > li + ul > ul > li,
.sidebar_nav > ul > li + ul > li + ul > li + ul > li {
    border-left: 3px solid #88aadc;
}

/* Parent-category anchors pointing to # (non-navigable) */
.sidebar_nav ul li > a[href="#"] {
    cursor: default;
    color: #555;
    font-style: italic;
}

.sidebar_nav ul li > a[href="#"]:hover {
    background: inherit;
    color: #555;
    border-left-color: transparent;
}

/* Focus visible for accessibility */
.sidebar_nav ul li > a:focus-visible {
    outline: 2px solid #1a5fb4;
    outline-offset: -2px;
}