/* One width variable controls the sidebar, workspace and footer. */
:root{--sidebar-expanded:258px;--sidebar-collapsed:76px;--sidebar-width:var(--sidebar-expanded);--navigation-duration:225ms}
html.sidebar-collapsed{--sidebar-width:var(--sidebar-collapsed)}
.navigation-icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}
.navigation-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;padding:6px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.navigation-button:hover{background:var(--pale);color:var(--blue)}
.navigation-button:focus-visible,.side-nav a:focus-visible,.side-brand:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.public-nav>.home-link{margin-left:auto;margin-right:18px}
.sidebar{width:var(--sidebar-width);height:100dvh;max-height:100vh;overflow:visible;padding:18px 14px 12px;transition:width var(--navigation-duration) ease,transform var(--navigation-duration) ease;display:flex;flex-direction:column}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0;min-height:56px;padding-bottom:12px}
.sidebar .side-brand{padding:0;gap:8px;font-size:1.04rem;min-width:0;white-space:nowrap}
.sidebar .side-brand img{width:38px;height:38px;flex-shrink:0}
.sidebar .sidebar-toggle{width:30px;height:32px;padding:4px}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:2px}
.sidebar-scroll::-webkit-scrollbar{width:5px}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.side-nav{gap:3px}.side-nav a{min-height:42px;gap:11px;padding:9px 10px;white-space:nowrap;font-size:.9rem;transition:background .2s,color .2s}
.side-nav a:hover{transform:none}.side-nav a .navigation-label{overflow:hidden;text-overflow:ellipsis}
.sidebar .side-label{padding:12px 10px 7px;flex-shrink:0}.sidebar-foot{margin:0;flex-shrink:0;padding:12px 8px 0;white-space:nowrap;font-size:.8rem}
.app-main{min-width:0;margin-left:var(--sidebar-width);transition:margin-left var(--navigation-duration) ease}
.app-main>.page-content{max-width:none}
.app-main .grid-2>*,.app-main .stats-grid>*,.app-main .form-grid>*{min-width:0}
.app-main .table-wrap{max-width:100%}
.app-footer{margin-left:var(--sidebar-width);transition:margin-left var(--navigation-duration) ease}
.topbar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-user{flex-shrink:0}
.sidebar-open,.sidebar-close,.sidebar-backdrop{display:none}.sidebar-toggle{display:none}.js .sidebar-toggle{display:inline-flex}
.sidebar-tooltip{position:fixed;z-index:60;max-width:230px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--ink);color:var(--pale);font-size:.82rem;box-shadow:var(--shadow);pointer-events:none;animation:navigation-tooltip .15s ease both}
.sidebar-tooltip[hidden],.sidebar-backdrop[hidden]{display:none!important}
@keyframes navigation-tooltip{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:none}}
@media(min-width:801px){
 html.sidebar-collapsed .sidebar{padding-left:10px;padding-right:10px}
 html.sidebar-collapsed .sidebar-head{flex-direction:column;gap:8px;min-height:96px}
 html.sidebar-collapsed .brand-label,html.sidebar-collapsed .sidebar .navigation-label{display:none}
 html.sidebar-collapsed .sidebar-toggle .navigation-icon{transform:rotate(180deg)}
 html.sidebar-collapsed .side-nav a{justify-content:center;padding:10px 6px}
 html.sidebar-collapsed .side-label{font-size:0;padding:0;height:12px;margin:6px 4px;border-top:1px solid var(--line)}
 html.sidebar-collapsed .sidebar-foot{text-align:center;padding-left:0;padding-right:0}
 html.sidebar-collapsed .status-dot{margin-right:0}
}
@media(min-width:801px) and (max-width:1100px){:root{--sidebar-expanded:230px}}
@media(max-width:800px){
 .app-main,.app-footer{margin-left:0}
 .sidebar{position:relative;width:100%;height:auto;max-height:none;transform:none;box-shadow:none;overflow:visible}
 .sidebar-scroll{max-height:none;overflow:visible}.sidebar-foot{display:none}
 .sidebar-head{min-height:52px}.sidebar-toggle,.js .sidebar-toggle{display:none}
 .js .sidebar{position:fixed;inset:0 auto 0 0;width:min(288px,calc(100vw - 56px));height:100dvh;max-height:100dvh;transform:translateX(-100%);visibility:hidden;z-index:50;transition:transform var(--navigation-duration) ease,visibility var(--navigation-duration)}
 .js .sidebar-scroll{overflow-y:auto;overflow-x:hidden;max-height:none}
 .js .sidebar.open{transform:translateX(0);visibility:visible;box-shadow:var(--shadow);transition:transform var(--navigation-duration) ease}
 .js .sidebar-open,.js .sidebar-close{display:inline-flex}
 .js .sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:40;border:0;background:rgba(0,0,0,.45);padding:0;cursor:pointer;animation:navigation-tooltip .2s ease both}
 body.navigation-drawer-open{overflow:hidden}
 .sidebar-tooltip{display:none}
 .topbar{gap:10px}.public-nav>.home-link{margin-right:12px}
}
@media(max-width:560px){.topbar{padding:0 12px;gap:8px}.topbar-title{font-size:.95rem;flex:1}.topbar-user{gap:6px}.topbar-user .avatar{width:28px;height:28px}.topbar-user .btn{padding:8px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.sidebar,.app-main,.app-footer,.navigation-button,.side-nav a,.sidebar-tooltip,.sidebar-backdrop{transition:none!important;animation:none!important}}
@media print{.sidebar,.sidebar-backdrop,.sidebar-tooltip,.home-link,.sidebar-open{display:none!important}.app-main,.app-footer{margin-left:0!important;transition:none!important}}
