/* Sidebar Styles - Shared across pages */

/* Force Flexbox Layout for Sidebar */
.page-with-sidebar.row,
.page-with-sidebar .row,
section.page-with-sidebar .row {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.page-with-sidebar .main-content-col,
.page-with-sidebar.row>.main-content-col {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    padding-right: 2rem;
}

.page-with-sidebar .sidebar-col,
.page-with-sidebar.row>.sidebar-col {
    flex: 0 0 30% !important;
    max-width: 30% !important;
}

@media (max-width: 991px) {

    .page-with-sidebar.row,
    .page-with-sidebar .row,
    section.page-with-sidebar .row {
        flex-wrap: wrap !important;
    }

    .page-with-sidebar .main-content-col,
    .page-with-sidebar .sidebar-col,
    .page-with-sidebar.row>.main-content-col,
    .page-with-sidebar.row>.sidebar-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-right: 0;
    }

    .page-with-sidebar .sidebar-col,
    .page-with-sidebar.row>.sidebar-col {
        margin-top: 3rem;
    }
}

/* Sidebar Widget Styles */
.sidebar-cat-item:hover {
    background: white !important;
    border: 1px solid var(--pill-color, var(--primary));
    /* Ensure border is visible */
    color: var(--pill-color, var(--primary)) !important;
    box-shadow: var(--shadow-sm);
}

.sidebar-cat-item:hover .cat-icon {
    background: transparent !important;
    /* Keep transparent or light tint if desired */
    color: var(--pill-color, var(--primary)) !important;
    border-color: var(--pill-color, var(--primary)) !important;
}

.sidebar-cat-item.active {
    background: white !important;
    border: 1px solid var(--pill-color, var(--primary));
    box-shadow: var(--shadow-sm);
    color: var(--pill-color, var(--primary)) !important;
}

.sidebar-cat-item.active .cat-icon {
    background: transparent !important;
    /* Keep inline tint */
    color: var(--pill-color, var(--primary)) !important;
    border-color: var(--pill-color, var(--primary)) !important;
}

.tag-item:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(1, 115, 92, 0.05) !important;
}