/* ==========================================================================
   Dryft Sidebar — Clean, Stable, Theme-aware
   ========================================================================== */

/* ---- Constants --------------------------------------------------------- */
:root {
    --sb-collapsed: 64px; /* closed rail width */
    --sb-expanded: 240px; /* open rail width   */
    --sb-row-h: 44px; /* row height        */
    --sb-icon: 36px; /* square icon box   */
}

/* ---- Shell layout (only when a sidebar exists) ------------------------ */
.app-shell.has-sidebar {
    display: grid;
    grid-template-columns: var(--sb-collapsed) 1fr;
    transition: grid-template-columns .2s ease;
}

    .app-shell.has-sidebar.sidebar-expanded {
        grid-template-columns: var(--sb-expanded) 1fr;
    }

.app-shell.no-sidebar {
    display: block;
}

/* ---- Sidebar container ------------------------------------------------- */
.sidebar {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-right: 1px solid var(--bs-border-color);
    width: var(--sb-collapsed);
    transition: width .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: .5rem .5rem;
    overflow: hidden; /* prevent anything from sticking out */
    box-sizing: border-box;
}

    .sidebar.expanded {
        width: var(--sb-expanded);
    }

    /* ---- Sections & header ------------------------------------------------- */
    .sidebar .sidebar-header {
        border-bottom: 1px solid var(--bs-border-color);
        margin-bottom: .25rem;
        padding-bottom: .25rem;
    }

    .sidebar .section-title {
        display: grid;
        grid-template-columns: var(--sb-icon) 1fr; /* icon | label */
        align-items: center;
        gap: .5rem;
        height: var(--sb-row-h);
        color: var(--bs-secondary-color);
        opacity: .95;
    }

    /* ---- Rows (links/buttons/toggle/userblock) ---------------------------- */
    .sidebar .item,
    .sidebar .sidebar-toggle,
    .sidebar .sidebar-userblock {
        display: grid !important;
        grid-template-columns: var(--sb-icon) 1fr; /* icon | label */
        align-items: center;
        gap: .5rem;
        height: var(--sb-row-h);
        margin: 0;
        padding: 0; /* fixed → no jump */
        border: 0;
        background: transparent;
        color: var(--bs-secondary-color);
        text-decoration: none;
        cursor: pointer;
    }

        /* Remove Bootstrap button quirks when .item is a button */
        .sidebar .item.btn,
        .sidebar form .item.btn {
            background: transparent;
            box-shadow: none !important;
            text-align: left;
        }

        /* Icon box — fixed square, always centered */
        .sidebar .item > i,
        .sidebar .sidebar-toggle > i,
        .sidebar .sidebar-userblock .avatar,
        .sidebar .section-title > i {
            width: var(--sb-icon);
            height: var(--sb-icon);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            text-align: center;
            font-size: 1.15rem;
            color: var(--bs-secondary-color);
        }

        /* Avatar look */
        .sidebar .sidebar-userblock .avatar {
            border-radius: 50%;
            font-weight: 700;
            color: var(--bs-primary-contrast, #fff);
            background: var(--bs-primary);
        }

        /* Labels — fade only (never reflow) */
        .sidebar .item .label,
        .sidebar .sidebar-toggle .label,
        .sidebar .section-title .label,
        .sidebar .sidebar-userblock .user-meta {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--bs-body-color);
            opacity: 1;
            transition: opacity .18s ease;
        }

/* Collapsed state: hide label column via width var, fade text out */
.sidebar {
    --sb-label-col: 0;
}

    .sidebar.expanded {
        --sb-label-col: 1fr;
    }

    .sidebar .item,
    .sidebar .sidebar-toggle,
    .sidebar .sidebar-userblock,
    .sidebar .section-title {
        grid-template-columns: var(--sb-icon) var(--sb-label-col);
        transition: grid-template-columns .2s ease;
    }

    .sidebar:not(.expanded) .item .label,
    .sidebar:not(.expanded) .sidebar-toggle .label,
    .sidebar:not(.expanded) .section-title .label,
    .sidebar:not(.expanded) .sidebar-userblock .user-meta {
        opacity: 0; /* fades with column shrink → no snap */
        pointer-events: none;
    }

    /* ---- Hover/active (theme-aware) --------------------------------------- */
    .sidebar .item:hover {
        background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
        color: var(--bs-body-color);
    }

    .sidebar .item[aria-current="page"] {
        background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
        outline: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    }

    /* ---- Collapsed-only icon hover circle (no layout impact) -------------- */
    .sidebar .item > i,
    .sidebar .sidebar-toggle > i,
    .sidebar .sidebar-userblock .avatar {
        position: relative;
    }

        .sidebar .item > i::after,
        .sidebar .sidebar-toggle > i::after,
        .sidebar .sidebar-userblock .avatar::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 999px;
            background-color: color-mix(in srgb, var(--bs-primary) 16%, transparent);
            opacity: 0;
            transition: opacity .12s ease;
            pointer-events: none;
        }

    .sidebar:not(.expanded) .item:hover > i::after,
    .sidebar:not(.expanded) .item:focus > i::after,
    .sidebar:not(.expanded) .sidebar-toggle:hover > i::after,
    .sidebar:not(.expanded) .sidebar-toggle:focus > i::after,
    .sidebar:not(.expanded) .sidebar-userblock:hover .avatar::after,
    .sidebar:not(.expanded) .sidebar-userblock:focus .avatar::after {
        opacity: 1;
    }

    /* ---- Spacing & sticky bottom sections --------------------------------- */
    .sidebar .section-settings,
    .sidebar .section-user {
        margin-top: auto;
    }

/* ---- Theme safety (explicitly tie to Bootstrap tokens) ---------------- */
:root[data-bs-theme="dark"] .sidebar,
:root[data-bs-theme="light"] .sidebar {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-right-color: var(--bs-border-color);
}


/* Center the icon box in its grid cell */
.sidebar .item > i,
.sidebar .sidebar-toggle > i,
.sidebar .sidebar-userblock .avatar,
.sidebar .section-title > i {
    justify-self: center; /* 👈 guarantees perfect centering in the icon column */
}

/* Rework the hover circle so it’s geometrically centered (not using inset) */
.sidebar .item > i,
.sidebar .sidebar-toggle > i,
.sidebar .sidebar-userblock .avatar {
    position: relative;
}

    .sidebar .item > i::after,
    .sidebar .sidebar-toggle > i::after,
    .sidebar .sidebar-userblock .avatar::after {
        content: "";
        position: absolute;
        width: calc(var(--sb-icon) + 8px);
        height: calc(var(--sb-icon) + 8px);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* 👈 true center */
        border-radius: 999px;
        background-color: color-mix(in srgb, var(--bs-primary) 16%, transparent);
        opacity: 0;
        transition: opacity .12s ease;
        pointer-events: none;
    }

/* Show hover circle only when collapsed and NOT on the active item */
.sidebar:not(.expanded) .item:hover > i::after,
.sidebar:not(.expanded) .item:focus > i::after,
.sidebar:not(.expanded) .sidebar-toggle:hover > i::after,
.sidebar:not(.expanded) .sidebar-toggle:focus > i::after,
.sidebar:not(.expanded) .sidebar-userblock:hover .avatar::after,
.sidebar:not(.expanded) .sidebar-userblock:focus .avatar::after {
    opacity: 1;
}

.sidebar .item[aria-current="page"] > i::after {
    opacity: 0 !important;
}
/* 👈 no circle on active */

/* --- Logout item styling ----------------------------------------------- */
.sidebar .item.logout {
    color: var(--bs-danger) !important;
}

    .sidebar .item.logout i {
        color: var(--bs-danger) !important;
    }

    /* Optional hover state: darker red background tint */
    .sidebar .item.logout:hover,
    .sidebar .item.logout:focus {
        background-color: color-mix(in srgb, var(--bs-danger) 15%, transparent);
        color: var(--bs-danger) !important;
    }

        .sidebar .item.logout:hover i,
        .sidebar .item.logout:focus i {
            color: var(--bs-danger) !important;
        }

/* ===== Fix: no rectangular hover in collapsed rail ===================== */

/* Only show row hover when the sidebar is expanded */
.sidebar.expanded .item:hover,
.sidebar.expanded .item:focus {
    background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    color: var(--bs-body-color);
}

/* Suppress row hover when collapsed (keep only the circular icon hover) */
.sidebar:not(.expanded) .item:hover,
.sidebar:not(.expanded) .item:focus {
    background-color: transparent !important;
    outline: none;
}

/* Logout: red tint on hover ONLY when expanded */
.sidebar.expanded .item.logout:hover,
.sidebar.expanded .item.logout:focus {
    background-color: color-mix(in srgb, var(--bs-danger) 15%, transparent);
    color: var(--bs-danger) !important;
}

.sidebar:not(.expanded) .item.logout:hover,
.sidebar:not(.expanded) .item.logout:focus {
    background-color: transparent !important; /* circle only */
}

/* Ensure the active row keeps its selected background (both states) */
.sidebar .item[aria-current="page"] {
    background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    outline: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
}

    /* Never show the circle on the active item */
    .sidebar .item[aria-current="page"] > i::after {
        opacity: 0 !important;
    }

/* === Collapsed-mode: use ONLY the icon circle for the active item ====== */

/* 1) Remove the rectangular active background when collapsed */
.sidebar:not(.expanded) .item[aria-current="page"] {
    background-color: transparent !important;
    outline: none !important;
}

    /* 2) Show a persistent circle on the active item (same size as hover circle) */
    .sidebar:not(.expanded) .item[aria-current="page"] > i::after {
        opacity: 1 !important; /* keep visible even without hover */
        /* optional: slightly stronger tint than hover to distinguish selection */
        background-color: color-mix(in srgb, var(--bs-primary) 22%, transparent);
    }

    /* 3) Ensure hover does NOT remove/override the active circle */
    .sidebar:not(.expanded) .item[aria-current="page"]:hover > i::after,
    .sidebar:not(.expanded) .item[aria-current="page"]:focus > i::after {
        opacity: 1 !important;
    }

/* Keep the sidebar above any content overlays */
.app-shell .sidebar {
    position: sticky; /* you already have this */
    z-index: 1040; /* above card overlays/z=1 and typical content */
}