/* One navigation system for light, dark, compact and mobile layouts. */
:root .layout{--side:256px;--nav-selected:#eaf2ff;--nav-selected-ink:#1765c5}
:root[data-theme=dark] .layout{--nav-selected:#1c2c44;--nav-selected-ink:#9ac5ff}
:root .sidebar{padding:24px 14px 14px;background:var(--im-surface)!important;border-right:1px solid var(--im-border)!important;color:var(--im-ink);overflow:hidden;gap:0}
:root .sidebar .brand{padding:0 12px 24px;min-height:74px;flex-shrink:0}
:root .sidebar .brand-name{font-size:23px;line-height:1.16;letter-spacing:-.7px;font-weight:750;color:var(--im-ink)}
:root .sidebar .brand-monogram{color:var(--im-ink);font-size:25px}
:root .sidebar .workspace{margin:0 0 20px;padding:12px;gap:10px;background:var(--im-surface-muted);border:0;border-radius:8px;flex-shrink:0}
:root .sidebar .workspace-symbol{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;font-size:12px;font-weight:750;padding:0;color:var(--im-muted);background:var(--im-surface);border:1px solid var(--im-border);border-radius:6px}
:root .sidebar .workspace strong{font-size:14px;font-weight:650;color:var(--im-ink)}
:root .sidebar .workspace small{font-size:12px;color:var(--im-muted);margin-top:2px}
:root .sidebar-navigation{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px;scrollbar-width:thin;scrollbar-color:var(--im-border-strong) transparent}
:root .sidebar .nav-label{margin:0 10px 8px;font-size:12px;font-weight:600;letter-spacing:.1px;text-transform:none;color:var(--im-muted)}
:root .sidebar nav+.nav-label{margin-top:26px}
:root .sidebar .nav-item{height:auto;min-height:46px;padding:11px 12px;gap:12px;margin:3px 0;font-size:15px;font-weight:550;line-height:1.4;border:0!important;border-radius:8px;background:transparent!important;color:var(--im-muted)!important;box-shadow:none!important;transition:background-color .14s,color .14s;white-space:normal}
:root .sidebar .nav-item .icon{width:20px;height:20px;stroke-width:1.7;color:inherit!important}
:root .sidebar .nav-item>span{min-width:0;text-align:left}
:root .sidebar .nav-item:hover:not(.active):not(:disabled){background:var(--im-surface-muted)!important;color:var(--im-ink)!important}
:root .sidebar .nav-item.active{background:var(--nav-selected)!important;color:var(--nav-selected-ink)!important;font-weight:700}
:root .sidebar .nav-item.active .icon{color:var(--nav-selected-ink)!important}
:root .sidebar .sidebar-bottom{margin-top:16px;padding-top:12px;border-top:1px solid var(--im-border);flex-shrink:0}
:root .sidebar .user.profile-trigger{padding:12px 10px;margin-top:12px;min-height:64px;gap:10px;border:0;border-radius:8px;color:var(--im-ink);background:var(--im-surface-muted)}
:root .sidebar .user.profile-trigger:hover{background:var(--nav-selected)}
:root .sidebar .user strong{font-size:14px;line-height:1.4;font-weight:650;color:var(--im-ink)}
:root .sidebar .user small{font-size:12px;line-height:1.4;color:var(--im-muted)}
:root .sidebar .user>div{min-width:0;flex:1}
:root .sidebar .user strong,:root .sidebar .user small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root .sidebar .user .avatar{width:34px;height:34px;font-size:12px;background:var(--nav-selected);color:var(--nav-selected-ink)}
:root .sidebar .profile-chevron{color:var(--im-muted);width:16px}
:root .topbar{background:var(--im-surface)!important;color:var(--im-muted);border-color:var(--im-border)!important;flex-shrink:0}
:root .topbar strong{color:var(--im-ink)!important;font-weight:600}
:root :is(.sidebar,.topbar) .icon-button{min-width:40px;min-height:40px;color:var(--im-muted);border:1px solid var(--im-border);background:var(--im-surface);border-radius:8px}
:root :is(.sidebar,.topbar) .icon-button:hover{color:var(--im-ink);background:var(--im-surface-muted)}
:root :is(.sidebar,.topbar) button:focus-visible{outline:2px solid var(--im-accent);outline-offset:2px}
:root .collapsed{--side:76px}
@media(min-width:761px){
 :root .collapsed .sidebar{padding:24px 10px 14px}
 :root .collapsed .sidebar .brand{padding:0 0 24px;justify-content:center}
 :root .collapsed .sidebar nav:first-of-type{margin-top:0}
 :root .collapsed .sidebar nav+nav{margin-top:18px}
 :root .collapsed .sidebar .nav-item{justify-content:center;padding:12px;min-height:46px}
 :root .collapsed .sidebar .user.profile-trigger{padding:10px 0;justify-content:center}
 :root .collapsed .sidebar .profile-chevron{display:none}
 :root .collapsed .sidebar .sidebar-bottom{margin-top:12px}
 :root .collapsed .sidebar-navigation nav[aria-label="Operatività"]{margin-top:18px}
}
@media(max-width:760px){
 :root .layout,:root .collapsed{--side:0px}
 :root .sidebar,:root .collapsed .sidebar{width:min(290px,calc(100vw - 40px));padding:20px 14px 14px}
 :root .sidebar .brand,:root .collapsed .sidebar .brand{padding:0 8px 20px;justify-content:space-between}
 :root .collapsed .sidebar .brand-name{display:block}
 :root .collapsed .sidebar .brand-monogram{display:none}
 :root .sidebar .brand-name{font-size:22px}
 :root .sidebar .sidebar-close{width:34px;height:34px;min-width:34px;min-height:34px}
 :root .sidebar .workspace{margin-bottom:18px}
 :root .sidebar .sidebar-bottom{margin-top:12px;padding-top:10px}
 :root .sidebar .user.profile-trigger{margin-top:8px}
 :root .sidebar .nav-item,:root .collapsed .sidebar .nav-item{justify-content:flex-start;font-size:16px;min-height:46px}
 :root .collapsed .sidebar nav:first-of-type{margin-top:0}
 :root .profile-menu{z-index:80}
}
@media(prefers-reduced-motion:reduce){:root .sidebar .nav-item{transition:none}}
:root .sidebar .user .avatar{background:var(--nav-selected)!important;color:var(--nav-selected-ink)!important}
@media(min-width:761px) and (max-height:800px){
 :root .sidebar{padding-top:16px}
 :root .sidebar .brand{min-height:0;padding-bottom:16px}
 :root .sidebar .brand-name{font-size:21px}
 :root .sidebar .workspace{padding:10px;margin-bottom:16px}
 :root .sidebar .nav-label{margin-bottom:5px}
 :root .sidebar nav+.nav-label{margin-top:16px}
 :root .sidebar .nav-item{min-height:40px;padding:8px 12px;margin:2px 0}
 :root .sidebar .sidebar-bottom{margin-top:12px;padding-top:8px}
 :root .sidebar .user.profile-trigger{min-height:56px;padding:10px;margin-top:8px}
}
