/* --- Outline Item Decorative Border --- */
#outline-panel .list-group-item {
    border-left: 2px solid var(--bs-border-color-translucent);
    transition: border-left-width 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
}

#outline-panel .list-group-item:hover {
    border-left-width: 4px;
    border-left-color: var(--bs-primary);
}

/* --- Outline Panel Style Fixes --- */
#outline-links .list-group-item.p-0 {
    padding: 0 !important;
    border: none;
}

#outline-links .list-group-item .d-flex {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

#outline-links .list-group-item .list-group-item-action {
    border: none;
}

#outline-links .list-group-item .list-group .list-group-item-action {
    background-color: var(--bs-tertiary-bg);
}

/* --- Outline Header Controls (icon-only, right aligned) --- */
/* Make control group sit at the right of the header row and show icon-only buttons
   Assumes header row uses the existing `.d-flex` container. */
#outline-panel .list-group-item .d-flex { 
    align-items: center;
}

#outline-links .list-group-item .d-flex .controls {
    margin-left: auto; /* push controls to the right */
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Make buttons compact and hide any textual label while keeping the icon visible. 
   These selectors target common icon markup (.bi, .fa). If your project uses a
   different icon structure, adjust selectors accordingly. */
#outline-links .list-group-item .d-flex .controls .btn {
    padding: 0.25rem 0.45rem;
    min-width: auto;
    height: auto;
}

#outline-links .list-group-item .d-flex .controls .btn .btn-label {
    display: none !important; /* hide text labels if present */
}

#outline-links .list-group-item .d-flex .controls .btn .bi,
#outline-links .list-group-item .d-flex .controls .btn .fa,
#outline-links .list-group-item .d-flex .controls .btn svg {
    display: inline-block;
    font-size: 1rem; /* icon size — tweak if needed */
    line-height: 1;
}

/* small spacing for a close button if present */
#outline-links .list-group-item .d-flex .controls .btn.close {
    margin-left: 0.25rem;
}

/* --- Hide expand toggle when there are no subparts --- */
/* Uses :has() to detect absence of a child .list-group. Modern Chromium/Firefox
   support :has() but older browsers may not. If you need broader support, a
   small JS toggle (add/remove a .has-children class) is recommended. */
#outline-links .list-group-item:not(:has(.list-group)) .expand-toggle {
    display: none !important;
}

/* When the item is expanded (JS may add an .expanded class), ensure the toggle is visible */
#outline-links .list-group-item.expanded > .d-flex .expand-toggle,
#outline-links .list-group .list-group-item.expanded > .d-flex .expand-toggle {
    display: inline-flex !important;
}

/* small transition for toggles */
#outline-links .list-group-item .expand-toggle {
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

/* --- Outline Panel Header Controls --- */
#outline-panel .offcanvas-header {
    justify-content: space-between;
}

/* --- Outline expand/collapse arrow rotation --- */
#outline-links .outline-h4-header .btn[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
}
#outline-links .outline-h4-header .btn .fa-chevron-down {
    transition: transform 0.2s ease-in-out;
}