/* New sidebar rail (get_new_sidebar_layout).
   Collapsed = icon-only rail; the header toggle (or a click on the background)
   adds the `.expanded` class, which widens the rail to 220px and reveals the
   wordmark plus every `.ns-label` (nav labels, user name). */

.new-sidebar {
    /* 100% of #sidebar-container, not 100vh: the shell is sized in dvh, and on
       mobile the rail is a fixed drawer — a vh height would overshoot both. */
    height: 100%;
    width: 53px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 8px 18px;
    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;
}

/* Collapsed, the toggle is the only thing in the header, so it is centred on the
   rail like the nav icons below it. Expanded, the wordmark takes the left and the
   toggle the right edge. */
.new-sidebar:not(.expanded) .ns-header {
    justify-content: center;
}

.new-sidebar.expanded .ns-header {
    margin: 0px 10px;
    justify-content: space-between;
}

.new-sidebar:not(.expanded) .ns-header-link {
    display: none;
}

/* 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;
}

.new-sidebar.expanded .ns-header-link {
    animation: tursioFadeInAnimation 0.1s ease-in 0.1s both;
}

/* 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;
}

/* The wordmark is wider than 100x32 in its own aspect (467x122), so it is
   contained in that box rather than stretched to fill it. */
.new-sidebar .ns-brand-logo {
    display: block;
    width: 100px;
    height: 32px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

/* The toggle works both ways now, so the resize hint follows the direction the
   click would move the rail. Each state has its own tooltip-wrapped copy: the
   close one rides on `.ns-label` (expanded only), the open one on the inverse. */
.new-sidebar .ns-collapse-icon {
    display: block;
    width: 16px;
    height: 16px;
    cursor: e-resize;
}

.new-sidebar.expanded .ns-collapse-icon {
    cursor: w-resize;
}

/* The tooltip wrapper doubles as the toggle's hit box: 32px tall, matching the
   wordmark, so the header keeps the same height in both states. */
.new-sidebar .ns-collapse-tt {
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
}

/* `display` is set per state rather than on the rule above, so whichever copy is
   out of state still falls to the shared `.ns-label` / `.ns-collapsed-only`
   display:none instead of being forced back on by a later rule. */
.new-sidebar:not(.expanded) .ns-collapsed-only,
.new-sidebar.expanded .ns-collapse-tt.ns-label {
    display: flex;
}

.new-sidebar.expanded .ns-collapsed-only {
    display: none;
}

/* 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,
    .new-sidebar.expanded .ns-header-link {
        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;
}