:root {
    --trigger-width: 26px;      /* Very wide for early highlighting */
    --content-gap: 10px;        /* Safe gap for main content in autohide mode */
    --sidebar-width: 288px;     /* Default sidebar width */
    --header-height: 64px;      /* Navbar height */
}

/* =========================================
   MODE: Autohide
   ========================================= */

/* 1. OUTER WRAPPER */
/* Collapses the flex container that usually holds the sidebar's space */
body.sidebar-autohide #sidebar-outer-wrapper {
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
}

/* 2. MIDDLE WRAPPER */
/* This is the moving container. It holds the sidebar. */
body.sidebar-autohide #sidebar-middle-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    z-index: 100 !important;
    width: var(--sidebar-width) !important;
    
    /* Default state: Hidden to the left */
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    box-shadow: 4px 0 15px rgba(0,0,0,0.15) !important;
    
    /* Ensure visibility despite Alpine's attempts to hide */
    display: block !important;
    visibility: visible !important;
}

/* Visible state on hover */
body.sidebar-autohide #sidebar-middle-wrapper.sidebar-hover-visible {
    transform: translateX(0) !important;
}

/* 3. INNER SIDEBAR */
/* Fills the middle wrapper */
body.sidebar-autohide #nav-sidebar {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 4. TRIGGER ZONE */
/* Invisible strip on the left to activate the sidebar */
#sidebar-trigger-zone {
    display: none;
    position: fixed;
    top: var(--header-height); /* Below header */
    left: 0;
    width: var(--trigger-width);
    height: calc(100vh - var(--header-height));
    z-index: 110 !important;
    background: transparent;
}

body.sidebar-autohide #sidebar-trigger-zone {
    display: block;
}

/* Elegant visual hint on hover - stays 80px */
body.sidebar-autohide #sidebar-trigger-zone:hover {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
}

/* Glowing line on the edge */
body.sidebar-autohide #sidebar-trigger-zone::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--primary-500, #3b82f6);
    box-shadow: 0 0 15px var(--primary-500, #3b82f6);
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.sidebar-autohide #sidebar-trigger-zone:hover::after {
    opacity: 1;
}

/* Don't block sidebar clicks when it's open */
body.sidebar-autohide #sidebar-middle-wrapper.sidebar-hover-visible ~ #sidebar-trigger-zone {
    width: 20px;
}

/* 5. MAIN CONTENT */
/* Adds a small gap so user can click left-side content easily */
body.sidebar-autohide #main {
    margin-left: var(--content-gap) !important;
    width: auto !important;
    transition: margin-left 0.3s ease;
}

/* =========================================
   MODE: Pinned (Default)
   ========================================= */
/* Reset overrides to let Unfold handle layout */

body.sidebar-pinned #sidebar-middle-wrapper {
    transform: none !important;
}

body.sidebar-pinned #main {
    margin-left: 0 !important;
}