/* Navigation only: page surfaces and their color tokens remain independent. */
.nav-rail { gap:8px; padding-top:16px; padding-bottom:12px; background:#fbfdfe; border-right:1px solid #d9e4ea; }
.nav-rail__header { height:64px; flex:none; gap:5px; }
.nav-rail__icon { width:42px; height:42px; border-radius:12px; }
.nav-rail__caption { display:none; font-size:10px; font-weight:500; color:#718793; letter-spacing:.4px; }
.nav-rail__items { flex:1; gap:15px; min-height:0; padding:4px 0 8px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#c8d9e1 transparent; }
.nav-rail__group { display:grid; gap:4px; min-width:0; }
.nav-rail__group-label { margin:0 12px 5px; color:#7b919d; font-size:10px; font-weight:650; line-height:16px; letter-spacing:.9px; }
.nav-rail .nav-item { min-height:44px; color:#516b79; border:1px solid transparent; border-radius:11px; }
.nav-rail .nav-item__indicator { position:relative; flex:none; width:34px; height:32px; border-radius:9px; }
.nav-rail .nav-item__indicator > .icon { width:20px; height:20px; }
.nav-rail .nav-item__indicator::before { display:none; }
.nav-rail .nav-item:focus-visible { outline:2px solid #178da2; outline-offset:-2px; }
.nav-rail .nav-item.is-active { color:#00677c; }
.nav-rail .nav-item--bulk .nav-item__indicator { color:#087f92; background:#e6f3f6; }
.nav-rail__footer { flex:none; padding-top:12px; border-top:1px solid #e0e9ee; }
.nav-rail__toggle { display:flex; align-items:center; justify-content:center; gap:12px; width:44px; min-height:40px; padding:9px; border:1px solid #d5e2e8; border-radius:10px; background:white; color:#68818d; font:inherit; cursor:pointer; }
.nav-rail__toggle:hover { background:#eff6f8; border-color:#b7d0db; color:#176b7e; }
.nav-rail__toggle:focus-visible { outline:2px solid #178da2; outline-offset:3px; }
.nav-rail__toggle > .icon { width:18px; height:18px; flex:none; }
.nav-rail__toggle-label { display:none; font-size:12px; font-weight:550; }
.nav-rail:not(.is-expanded) .nav-rail__group-label { font-size:0; height:1px; line-height:0; margin:0 18px 8px; border-top:1px solid #dce7ec; }
.nav-rail:not(.is-expanded) .nav-rail__group:first-child .nav-rail__group-label { display:none; }
.nav-rail:not(.is-expanded) .nav-item { flex-direction:row; justify-content:center; gap:0; padding:6px; margin:0 4px; }
.nav-rail:not(.is-expanded) .nav-item__label { display:none; }
.nav-rail:not(.is-expanded) .nav-item:hover { background:#edf5f8; }
.nav-rail:not(.is-expanded) .nav-item.is-active { background:#e2f2f6; border-color:#c6e4eb; }
.nav-rail:not(.is-expanded) .nav-item.is-active .nav-item__indicator { background:transparent; }
.nav-rail:not(.is-expanded) .nav-item__badge { right:-6px; top:-5px; min-width:16px; padding:1px 4px; font-size:9px; border:2px solid #fbfdfe; }
.nav-rail:not(.is-expanded) .nav-rail__toggle > .icon { transform:rotate(180deg); }
.nav-rail.is-expanded { padding-left:14px; padding-right:14px; }
.nav-rail.is-expanded .nav-rail__header { height:87px; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 12px 8px; }
.nav-rail.is-expanded .nav-rail__lockup { width:160px; max-width:100%; }
.nav-rail.is-expanded .nav-rail__caption { display:block; margin-left:1px; }
.nav-rail.is-expanded .nav-item { position:relative; min-height:45px; height:auto; padding:5px 11px; gap:10px; background:transparent; }
.nav-rail.is-expanded .nav-item__indicator { position:static; width:28px; height:32px; background:transparent; }
.nav-rail.is-expanded .nav-item__label { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:550; line-height:20px; letter-spacing:0; }
.nav-rail.is-expanded .nav-item:hover { color:#205b6d; background:#eef5f8; border-color:#e1edf2; }
.nav-rail.is-expanded .nav-item.is-active { color:#00677c; background:#e2f2f6; border-color:#bfdee7; box-shadow:inset 3px 0 #00869c; }
.nav-rail.is-expanded .nav-item.is-active .nav-item__label { font-weight:650; }
.nav-rail.is-expanded .nav-item--has-badge { padding-right:35px; }
.nav-rail.is-expanded .nav-item__badge { right:9px; top:50%; min-width:19px; height:19px; padding:0 5px; border-radius:6px; display:grid; place-items:center; font-size:10px; }
.nav-rail.is-expanded .nav-item__badge[hidden] { display:none; }
.nav-rail.is-expanded .nav-item--bulk { border-color:#d5e8ed; background:#f2fafb; }
.nav-rail.is-expanded .nav-item--bulk .nav-item__indicator { position:static; background:#dfeff3; border-radius:8px; }
.nav-rail.is-expanded .nav-item--bulk.is-active { border-color:#9dcfdc; background:#dff1f5; }
.nav-rail.is-expanded .nav-rail__toggle { width:100%; justify-content:flex-start; padding:10px 15px; }
.nav-rail.is-expanded .nav-rail__toggle-label { display:block; }
@media (min-width:600px) { .app-shell.is-rail-expanded { grid-template-columns:252px minmax(0,1fr); } .nav-rail.is-expanded { width:252px; } }
@media (max-height:740px) and (min-width:600px) { .nav-rail__items { gap:10px; } .nav-rail.is-expanded .nav-rail__header { height:70px; } .nav-rail.is-expanded .nav-item { min-height:41px; padding-top:3px; padding-bottom:3px; } .nav-rail__group-label { margin-bottom:2px; } }
@media (max-width:599px) { .nav-bar { border-top:1px solid #d6e4ea; background:#fffffffa; } .nav-bar .nav-item { border-radius:10px; } .nav-bar .nav-item.is-active .nav-item__indicator { background:#dff1f5; color:#00677c; } .nav-bar .nav-item:focus-visible { outline:2px solid #178da2; outline-offset:-2px; } }
@media (prefers-reduced-motion:reduce) { .nav-rail__toggle > .icon { transition:none; } }