/* New sidebar rail (get_new_sidebar_layout).
   Collapsed = icon-only rail; clicking the background toggles the `.expanded`
   class, which widens the rail to 300px and reveals every `.ns-label`
   (brand text, nav labels, collapse icon, user name). */

.new-sidebar {
    height: 100vh;
    width: 53px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 8px;
    cursor: default;
    /* Ease the width open/close. Children stay left-anchored (justify-content:
       flex-start) so they keep their x-position and don't drift as the rail
       resizes. The 16px nav icons, the logo box and the avatar box each fill the
       collapsed content width, so flex-start renders them centered. */
    transition: width 0.2s ease-in;
    /* No overflow:hidden — the user popover opens outside the collapsed rail. */
}

.new-sidebar.expanded {
    width: 220px;
}

/* Cursor affordances. Collapsed: the rail background shows an e-resize cursor to
   hint that clicking it expands the rail. Expanded: the background is not
   clickable (only the collapse icon collapses), so it keeps the default cursor.
   Clickable items always show the pointer. */
.new-sidebar:not(.expanded) {
    cursor: e-resize;
}

/* The nav list no longer expands the rail on click, so it shouldn't show the
   e-resize hint — items get the pointer, the gaps get the default cursor. */
.new-sidebar:not(.expanded) .ns-nav {
    cursor: default;
}

.new-sidebar .new-nav,
.new-sidebar .ns-collapse-icon,
.new-sidebar .ns-home-link {
    cursor: pointer;
}

/* Everything that only appears in the expanded state. */
.new-sidebar .ns-label {
    display: none;
}

.new-sidebar.expanded .ns-label {
    display: block;
}

/* Header ------------------------------------------------------------------ */
.new-sidebar .ns-header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}

/* The logo + brand are wrapped in a NavLink (#tursio-logo-container) so a click
   navigates home and re-inits via search_initialization. Reset the Bootstrap
   nav-link padding/underline and lay the logo and brand out in a row. */
.new-sidebar .ns-header-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    text-decoration: none;
}

/* The logo link is a `.nav-link`; suppress the global `.nav-link:hover`
   background (layout.css) so hovering the logo shows no hover effect. */
.new-sidebar .ns-header-link:hover {
    background-color: transparent;
}

.new-sidebar .ns-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background-color: #0F172A;
    flex-shrink: 0;
}

.new-sidebar .ns-brand {
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
    color: #334155;
    white-space: nowrap;
}

.new-sidebar .ns-collapse-icon {
    width: 16px;
    height: 16px;
    cursor: w-resize;
}

/* Nav --------------------------------------------------------------------- */
.new-sidebar .ns-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

/* Items are always left-anchored. A 16px icon exactly fills the collapsed item's
   content width (48px rail − 8px rail padding − 8px item padding each side =
   16px), so flex-start renders it centered in the collapsed rail — no drift
   during the width animation and no delayed-center trick needed. */
.new-sidebar .new-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    justify-content: flex-start;
    white-space: nowrap;
    user-select: none;
    /* Fade the item in when it renders (on load, and when hidden items are
       revealed on login). Restarts on display:none -> visible. */
    animation: tursioFadeInAnimation 0.5s ease-in;
}

/* The nav link's content is wrapped in the ReactTooltip hover target, which now
   carries the icon+label row that .new-nav used to lay out directly. Full width
   so the collapsed icon stays centered and the tooltip anchors off the item's
   right edge. */
.new-sidebar .new-nav .ns-nav-tt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

@keyframes tursioFadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .new-sidebar .new-nav {
        animation: none;
    }
}

.new-sidebar .new-nav .ns-icon {
    width: 20px;
    height: 20px;
}

.new-sidebar .new-nav .ns-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #334155;
}

/* Hover — only when the item is not the active one. */
.new-sidebar .new-nav:hover:not(.active) {
    background-color: #F1F5F9;
}

/* Active / selected item. */
.new-sidebar .new-nav.active {
    background-color: #D3E2FF;
}

/* Hover and active both darken the label text to #0F172A. */
.new-sidebar .new-nav:hover .ns-label,
.new-sidebar .new-nav.active .ns-label {
    color: #0F172A;
}

/* Footer ------------------------------------------------------------------ */
/* Wrapper anchors the absolutely-positioned popover and pins the block to the
   bottom of the rail. */
.new-sidebar .ns-user {
    position: relative;
    width: 100%;
    margin-top: auto;
}

.new-sidebar .ns-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: flex-start;
}

/* The box wrapping the avatar image: 8px padding + background + rounded corners
   (32px overall = 16px image + 8px padding all around). */
.new-sidebar .ns-avatar-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background-color: #E2E8F0;
    flex-shrink: 0;
}

/* The avatar image itself is a flat 16px. */
.new-sidebar .ns-avatar {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.new-sidebar .ns-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.new-sidebar .ns-footer {
    cursor: pointer;
}

/* User popover ------------------------------------------------------------ */
.ns-user-popover {
    position: absolute;
    z-index: 20;
    display: none;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.ns-user-popover.open {
    display: block;
}

/* Collapsed rail: popover opens to the right, aligned to the footer bottom. */
.new-sidebar:not(.expanded) .ns-user-popover {
    left: calc(100% + 12px);
    bottom: 0;
}

/* Expanded rail: popover opens above the footer, spanning its width. */
.new-sidebar.expanded .ns-user-popover {
    left: 0;
    right: 0;
    bottom: calc(100% + 12px);
}

.ns-pop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.ns-pop-avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #E2E8F0;
    padding: 6px;
}

.ns-pop-name {
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
}

.ns-pop-email {
    font-size: 13px;
    color: #64748B;
}

.ns-pop-divider {
    border-top: 1px solid #E2E8F0;
    opacity: 1;
}

.ns-pop-item {
    display: flex;
    margin: 4px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.ns-pop-item:hover {
    background-color: #F1F5F9;
}

.ns-pop-label {
    font-size: 14px;
    font-weight: 400;
    color: #020617;
}