/* ===== Base ===== */
html, body { height: 100%; }

/* ===== Sidebar Menu Styling ===== */
#sidebarMenu {
    background: #f5f5f5; /* overall sidebar background */
    min-height: 100vh;
}

#sidebarMenu .nav.flex-column > li {
    border-bottom: 1px solid #ddd;
}

/* Default link appearance */
#sidebarMenu .nav-link {
    display: block;
    padding: 0.25rem 1rem;
    background-color: #f5f5f5; /* light grey for each item */
    color: #343a40;            /* dark grey text */
    text-decoration: none;     /* no underline */
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover + focus */
#sidebarMenu .nav-link:hover,
#sidebarMenu .nav-link:focus {
    background-color: #d6d8db; /* darker grey on hover */
    color: #212529;            /* darker text */
    text-decoration: none;
}

/* Active link */
#sidebarMenu .nav-link.active {
    background-color: #cfd3d6; /* slightly darker active state */
    color: #000;
    font-weight: 600;
}

/* Optional: remove default list padding */
#sidebarMenu .nav.flex-column {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sidebar hover expand behavior (as before) */
@media (min-width: 765px) {
    #sidebarMenu {
        width: 100%;
        margin-left: -160px;
        transition: margin 200ms ease-out;
    }

    #sidebarMenu:hover {
        margin-left: 0;
    }

    #sidebarMenu:hover + .main,
    #sidebarMenu:hover ~ .main {
        margin-left: 200px;
    }
}

/* Maintain content spacing */
.main {
    transition: margin 200ms ease-out;
}

/* ===== Desktop / widescreen behaviors ===== */
@media (min-width: 765px) {
    /* main content starts slightly shifted, expands when sidebar opens */
    .main {
        position: absolute;
        width: calc(100% - 40px);
        margin-left: 40px;
        float: right;
    }

    /* Sidebar collapsed-by-default on desktop, expands on hover */
    #sidebarMenu {
        width: 100%;
        margin-left: -160px; /* collapsed */
        margin-bottom: 0;
    }
    #sidebarMenu:hover { margin-left: 0; }

    /* When sidebar opens, push content over */
    #sidebarMenu:hover + .main,
    #sidebarMenu:hover ~ .main {  /* support either adjacent or general sibling */
        margin-left: 200px;
    }

    /* Optional: fade-in elements you mark with .forAnimate */
    .forAnimate { opacity: 0; }
    #sidebarMenu:hover .forAnimate { opacity: 1; }
}

@media (min-width: 1330px) {
    .main {
        width: calc(100% - 200px);
        margin-left: 200px;
    }
    #sidebarMenu { margin-left: 0; }
    #sidebarMenu .forAnimate { opacity: 1; }
}

/* Title bar (unchanged) */
.title_background { background-color: #005E97; color: #fff; }
.title_background a { color: #fff; }

/* Cards (panel -> card) */
.card { border-radius: 0; }

/* Rows: BS5 has no bottom margin by default; keep if you relied on it */
.row { margin-bottom: 0; }

/* If you ever need zero gutters globally, prefer .g-0 on the row in markup
   rather than forcing it here. */