/* =========
   Variables
   ========= */
:root {
    --sb-w: 5rem;              /* collapsed sidebar width */
    --sb-w-expanded: 16rem;    /* expanded on hover */
    --content-gap: 1rem;       /* spacing from content edge */
}

/* ===========================
   Sidebar (default: left/LTR)
   =========================== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sb-w);
    padding: 2rem 1rem;
    background: linear-gradient(180deg, #ffffff, #c7defc);
    z-index: 1050;

    transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out;
    border-right: 1px solid lightgray;
}

/* RTL: pin the sidebar to the right instead */
.sidebar-rtl {
    left: auto;
    right: 0;
    border-left: 1px solid lightgray;
    border-right: none;
}

/* Expand sidebar on hover */
.sidebar:hover {
    width: var(--sb-w-expanded);
}

/* Keep nav link content from wrapping */
.sidebar .nav-link {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* Fix icon width inside nav links */
.sidebar .nav-link i {
    width: 1rem;
}

/* Hide nav link labels by default; reveal on hover */
.sidebar .nav-link span {
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}
.sidebar:hover .nav-link span {
    visibility: visible;
    opacity: 1;
    color: black;
}

/* Sidebar header layout + reveal on hover */
.sidebar-header {
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-header h2 {
    opacity: 0;
    margin-left: 1rem;
    margin-bottom: 0;
    transition: opacity 0.1s ease-in-out;
}
.sidebar:hover .sidebar-header h2 {
    opacity: 1;
}

/* ============
   Main content
   ============ */
/* Base (LTR): leave room on the left for the sidebar */
#main_page {
    margin-left: calc(var(--sb-w) + var(--content-gap));
    margin-right: var(--content-gap);
    transition: margin 0.15s ease-in-out; /* animate both sides */
}

/* RTL variant: swap margins; increase specificity to beat #main_page base */
#main_page.main-page-rtl {
    margin-left: var(--content-gap);
    margin-right: calc(var(--sb-w) + var(--content-gap));
}

/* When sidebar (left/LTR) is hovered, push content further right */
.sidebar:hover ~ #main_page {
    margin-left: calc(var(--sb-w-expanded) + var(--content-gap));
}

/* When sidebar is on the right (RTL) and hovered, push content left */
.sidebar.sidebar-rtl:hover ~ #main_page {
    margin-right: calc(var(--sb-w-expanded) + var(--content-gap));
    margin-left: var(--content-gap);
}

#login_page {
    background: linear-gradient(180deg, #ffffff, #c7defc);
}


/* ======
   Logos
   ====== */
/* Hide the expanded logo by default */
.expanded-logo { display: none; }

/* On hover, swap logos */
.sidebar:hover .expanded-logo {
    display: block;
    max-width: 50rem;
}
.sidebar:hover .collapsed-logo {
    display: none;
}