.sidebar{
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    overflow-y:auto;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:
        linear-gradient(180deg, rgba(10,38,84,.24), rgba(8,17,31,.82) 25%, rgba(8,17,31,.98)),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    border-right:1px solid var(--stroke);
    backdrop-filter:blur(14px);
    z-index:90;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
}

.sidebar::after{
    content:"";
    position:absolute;
    inset:0 0 0 auto;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
    pointer-events:none;
}

.sidebar-top,
.sidebar-tools,
.sidebar-nav,
.sidebar-footer{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    flex-shrink: 0;
}

.sidebar-footer{
    margin-top: auto;
    padding-top: 6px;
    width: 100%;
}


.brand{
    width:100%;
    display:grid;
    grid-template-columns:48px minmax(0, 1fr);
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(135deg, rgba(24,76,145,.18), rgba(10,38,84,.20) 55%, rgba(52,120,199,.10)),
        rgba(255,255,255,.03);
    box-shadow:var(--shadow-1);
}

.brand-logo{
    width:48px;
    height:48px;
    border-radius:16px;
    background:url('../images/favicon.png') no-repeat center;
    background-size:contain;
}

.brand-copy,
.user-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.brand-copy strong,
.user-copy strong{
    font-size:15px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.brand-copy span,
.user-copy span{
    font-size:12px;
    color:var(--text-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:0;
    overflow-y:auto;
    flex: 1 1 auto;
}

.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:999px; }

.nav-link,
.collapse-btn,
.user-card{
    width:100%;
    min-width:0;
    margin:0;
    box-sizing:border-box;
}

.collapse-btn,
.nav-link{
    min-height:52px;
    padding:12px 14px;
    border-radius:18px;
}

.collapse-btn,
.nav-link{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    gap:12px;
    color:var(--text-soft);
    border:1px solid transparent;
    transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.collapse-btn:hover,
.nav-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.08);
}

.nav-link.active{
    color:#fff;
    background:linear-gradient(135deg, rgba(24,76,145,.28), rgba(10,38,84,.34) 48%, rgba(52,120,199,.20));
    border-color:rgba(24,76,145,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(10,38,84,.22);
}

.nav-icon,
.collapse-btn svg{
    width:22px;
    height:22px;
}

.nav-label,
.collapse-btn span{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.user-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);
}

.user-avatar{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
}

.sidebar-login-btn{
    width:100%;
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 16px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-weight:700;
}


/* =========================
   COLLAPSED
========================= */

.app-shell.is-collapsed .sidebar{
    padding: 16px 10px;
    align-items: center;
}

.app-shell.is-collapsed .sidebar-top,
.app-shell.is-collapsed .sidebar-tools,
.app-shell.is-collapsed .sidebar-nav,
.app-shell.is-collapsed .sidebar-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.app-shell.is-collapsed .brand,
.app-shell.is-collapsed .collapse-btn,
.app-shell.is-collapsed .nav-link,
.app-shell.is-collapsed .user-card,
.app-shell.is-collapsed .sidebar-login-btn{
    width: 56px;
    max-width: 56px;
    min-width: 56px;
    padding-left: 0;
    padding-right: 0;
    justify-items: center;
    justify-content: center;
}

.app-shell.is-collapsed .brand{
    grid-template-columns: 1fr;
    padding-top: 12px;
    padding-bottom: 12px;
}

.app-shell.is-collapsed .brand-copy,
.app-shell.is-collapsed .collapse-btn span,
.app-shell.is-collapsed .nav-label,
.app-shell.is-collapsed .user-copy,
.app-shell.is-collapsed .sidebar-login-text{
    display: none;
}

.app-shell.is-collapsed .brand-logo{
    width: 44px;
    height: 44px;
    margin: 0 auto;
}

.app-shell.is-collapsed .collapse-btn,
.app-shell.is-collapsed .nav-link,
.app-shell.is-collapsed .user-card{
    grid-template-columns: 1fr;
}

.app-shell.is-collapsed .collapse-btn svg{
    margin: 0 auto;
    transform: rotate(180deg);
}

.app-shell.is-collapsed .nav-icon{
    width: 22px;
    height: 22px;
    margin: 0 auto;
}

.app-shell.is-collapsed .user-card{
    padding-top: 10px;
    padding-bottom: 10px;
}

.app-shell.is-collapsed .sidebar-login-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0;
}