/* UX.2 — Navegação e Estrutura
   Camada de organização visual sobre o Design System UX.1. */

.sidebar-nav{padding:14px 10px 18px;gap:3px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.side-link-home{margin-bottom:4px}
.side-section-title{display:flex;align-items:center;gap:8px;padding:18px 12px 6px;font-size:.72rem;line-height:1;text-transform:uppercase;letter-spacing:.12em;color:#b8cada;font-weight:800}
.side-section-title::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.10)}
.side-section-title span{white-space:nowrap}
.side-link{min-height:44px;border-radius:10px;position:relative}
.side-link.active::before{content:"";position:absolute;left:4px;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--ux-primary,#245987)}
.side-link.active{padding-left:14px}
.nav-count{display:inline-grid;min-width:20px;height:20px;padding:0 5px;margin-left:5px;place-items:center;border-radius:999px;background:#eaf3fb;color:#173f66;font-size:.75rem;line-height:1;font-weight:900}
.sidebar:not(.is-collapsed) .forum-side-ucs,.sidebar:not(.is-collapsed) .library-side-ucs{margin-left:38px}

.app-topbar{min-height:74px;height:auto;justify-content:space-between;gap:20px;padding-top:10px;padding-bottom:10px}
.app-topbar-heading{display:flex;flex-direction:column;min-width:0}
.app-page-title{font-size:1.08rem;line-height:1.25;color:var(--ux-text,#182230);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-topbar-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.role-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid var(--ux-border,#dfe7ef);border-radius:999px;background:var(--ux-surface-soft,#f5f8fb);color:var(--ux-primary-dark,#173f66);font-size:.78rem;font-weight:800;white-space:nowrap}
.topbar-user-name{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ux-muted,#6b7c93);font-size:.86rem;font-weight:700}

.sidebar-collapsed .side-section-title{padding:14px 0 5px;justify-content:center}
.sidebar-collapsed .side-section-title::after{display:none}
.sidebar-collapsed .side-link.active{padding-left:10px}
.sidebar-collapsed .side-link.active::before{left:2px}
.sidebar-collapsed .nav-count{position:absolute;right:5px;top:5px;min-width:17px;height:17px;padding:0 4px;font-size:.68rem}

@media(max-width:900px){
    body.sidebar-mobile-open{overflow:hidden}
    .sidebar{width:min(320px,86vw);box-shadow:18px 0 42px rgba(12,31,48,.24)}
    .sidebar-mobile-open .sidebar{transform:translateX(0)}
    .mobile-menu-button{display:grid;position:fixed;left:14px;top:14px;width:44px;height:44px;border-radius:12px;z-index:55}
    .mobile-menu-button[aria-expanded="true"]{background:#173f66;color:#fff;border-color:#173f66}
    .app-topbar{min-height:72px;padding-left:72px;padding-right:16px}
    .app-topbar-meta{gap:6px}
    .topbar-user-name{display:none}
    .role-chip{font-size:.74rem;min-height:26px;padding:3px 8px}
    .side-section-title{padding-top:16px}
}

@media(max-width:576px){
    .app-topbar{align-items:center;gap:8px;padding-right:12px}
    .app-context{font-size:.68rem}
    .app-page-title{font-size:1rem;max-width:58vw}
    .role-chip{max-width:28vw;overflow:hidden;text-overflow:ellipsis}
    .app-container{width:calc(100% - 20px);margin:18px auto}
    .sidebar-footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}