/* Reference-inspired navigation, preserving the AutoPlant Pulse identity. */
.sidebar{position:fixed;isolation:isolate;background:#041723!important;overflow:hidden}
.sidebar::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 58%,#041723 100%),linear-gradient(180deg,#041723fa 0,#041723f5 78px,#041723e0 30%,#041723d0 55%,#04172399 100%),url('/assets/realtime-line-factory-v1.png') center bottom/auto 100% no-repeat}
.sidebar .nav-group-title{background:transparent}
.sidebar{border-right:0;box-shadow:none;padding:16px 12px 12px}
.sidebar .brand{padding:0 6px 14px;gap:10px;flex-shrink:0}
.sidebar .brand .brand-logo{object-fit:contain;width:46px;height:46px}
.sidebar .brand b{color:#f4faff;font-size:17px}
.sidebar .brand small{color:#91b9d6}
#nav{flex:1;min-height:0;overflow-y:auto;gap:2px;padding:2px 3px 8px;scrollbar-width:thin;scrollbar-color:#637c8b80 transparent;overscroll-behavior:contain}
#nav p{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#9cb5c7;margin:8px 12px 5px;flex-shrink:0}
#nav button{position:relative;flex-shrink:0;min-height:40px;gap:11px;padding:8px 10px;border:1px solid transparent;border-radius:6px;color:#c3d4e0;font-size:13px;font-weight:500;line-height:1.35;transition:background .16s,border-color .16s,color .16s}
#nav button>i{width:20px;height:20px;line-height:1;flex:none}#nav button>i .app-icon{width:20px;height:20px}
#nav button span{min-width:0}
#nav button:hover{background:#ffffff0c;border-color:#ffffff12;color:#fff}
#nav button.active{background:#ffffff12;border-color:#ffffff24;color:#fff;box-shadow:inset 2px 0 #d8e6ef;font-weight:650}
#nav button.active>i{filter:none}
#nav button:focus-visible{outline:2px solid #9ad8ff;outline-offset:2px}
#nav button[hidden]{display:none}
#nav [data-private-route].locked{opacity:.63}
#nav em{min-width:19px;height:19px;padding:2px 5px;background:#25526c;color:#e4f5ff;font-size:10px;line-height:15px;border-radius:6px}
#nav #requestBadge{background:#f0694d;color:#fff;border-radius:10px}
.sidebar-foot{padding:12px 7px 0;margin-top:auto;border-top:1px solid #ffffff20;gap:10px;flex-shrink:0}
.sidebar-foot .avatar{width:37px;height:37px;background:linear-gradient(145deg,#2565df,#3045b7);color:#fff;box-shadow:0 3px 12px #0003}
.sidebar-foot b{color:#eef7ff;font-size:12px}.sidebar-foot small{color:#97b5cc;font-size:10px;margin-top:4px}
.sidebar-foot .logout-btn{display:inline-flex;width:34px;height:34px;border-radius:8px;color:#94bddb}.sidebar-foot .logout-btn:hover{color:#fff;background:#14324a}
.topbar .icon-btn{color:var(--ink)}
.topbar .notification,.topbar .theme-btn{width:38px;height:38px;border-radius:10px;display:inline-flex;border:1px solid var(--line);background:var(--surface2)}
.topbar .notification:hover,.topbar .theme-btn:hover{border-color:var(--blue);background:var(--blue2)}
.topbar .notification-count{pointer-events:none}
@media(max-width:900px){.sidebar{width:248px}#menuBtn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;color:var(--ink)}.sidebar.open:after{left:248px}#nav button{min-height:44px}.topbar .theme-btn{display:inline-flex}.top-actions{gap:9px}}
/* Keep language, theme and alerts beside each other and inside the viewport. */
@media(max-width:1200px){.topbar .top-actions{gap:8px;flex:0 0 auto}.topbar .system-state,.topbar .top-actions>.date{display:none}.topbar .crumb{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.topbar .top-actions>[data-new-request]{white-space:nowrap;flex:0 0 auto}}
/* On small screens, anchor essential controls independently of page content width. */
@media(max-width:700px){.topbar{max-width:100vw}.topbar .top-actions{position:absolute;top:50%;right:10px;left:auto;width:auto;margin:0;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end}.topbar #languageSwitcher,.topbar #themeBtn,.topbar #notificationBtn{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){#nav button{transition:none}}
/* Let desktop rows share the available height instead of extending below it. */
@media(min-width:901px){.sidebar{height:100dvh}#nav button{flex:0 1 40px;min-height:28px;padding:3px 10px}}
@media(min-width:901px) and (max-height:700px){.sidebar{padding-top:10px;padding-bottom:10px}.sidebar .brand{padding-bottom:10px}.sidebar .brand .brand-logo{width:36px;height:36px}#nav{gap:1px}#nav p{margin-top:4px;margin-bottom:3px}#nav button{min-height:24px;padding:2px 10px;font-size:12px}#nav button>i,#nav button>i .app-icon{width:18px;height:18px}.sidebar-foot{padding-top:8px}.sidebar-foot .avatar{width:30px;height:30px}}