/* Sidebar geometry also drives the main column, keeping both in one transition. */
.application {
  --sidebar-width: 280px;
  --sidebar-rail: 80px;
  --sidebar-motion: 260ms cubic-bezier(.2, .75, .25, 1);
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns var(--sidebar-motion);
}
.application.menu-collapsed { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
.sidebar {
  padding: 0;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(155deg, #0b2938 0%, #071f2e 64%, #092332 100%);
  border-right: 1px solid #31556466;
  color: #c3d0d8;
  z-index: 25;
  isolation: isolate;
  box-shadow: 3px 0 14px #09233209;
}
.sidebar-header {
  position: relative;
  flex: 0 0 108px;
  min-height: 108px;
  overflow: hidden;
  transition: flex-basis var(--sidebar-motion), min-height var(--sidebar-motion);
}
.sidebar .brand {
  position: absolute;
  left: 16px;
  top: 12px;
  display: block;
  width: 198px;
  height: 84px;
  padding: 0;
  max-width: calc(100% - 80px);
  color: #f1f8fa;
  letter-spacing: .65px;
  font-size: 16px;
  border-radius: 9px;
  transition: left var(--sidebar-motion), top var(--sidebar-motion), width var(--sidebar-motion);
}
.sidebar .brand-lockup {
  display: block;
  padding: 3px 5px;
}
.sidebar .brand-lockup img { display: block; width: 100%; height: auto; }
.sidebar .brand-emblem {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 44px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms;
}
.brand-copy { display: block; width: 198px; white-space: nowrap; transition: opacity 140ms; }
.sidebar .brand small { font-size: 11px; line-height: 14px; letter-spacing: .1px; margin-top: 4px; color: #9bbaca; text-align: center; }
#sidebar #toggleMenu {
  position: absolute;
  top: 30px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #c8dce4;
  z-index: 1;
  opacity: 1;
  transition: top var(--sidebar-motion), right var(--sidebar-motion), background 140ms, opacity 140ms;
}
#sidebar #toggleMenu:hover, #sidebar #toggleMenu:focus-visible { background: #204353; color: #fff; }
.sidebar-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden auto;
  padding: 0 7px 12px;
  scrollbar-gutter: stable both-edges;
  color-scheme: dark;
}
.sidebar-scroll, .sidebar-flyout {
  scrollbar-width: thin;
  scrollbar-color: #58768650 transparent;
}
.sidebar-scroll:hover, .sidebar-scroll:focus-within, .sidebar-flyout:hover { scrollbar-color: #7396a580 transparent; }
.sidebar-scroll::-webkit-scrollbar, .sidebar-flyout::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-track, .sidebar-flyout::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb, .sidebar-flyout::-webkit-scrollbar-thumb { background: #58768650; border-radius: 8px; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb, .sidebar-flyout:hover::-webkit-scrollbar-thumb { background: #7396a580; }
.sidebar-scroll::-webkit-scrollbar-button, .sidebar-flyout::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.sidebar #navigation { overflow: visible; margin: 0; padding: 0; flex: initial; }
.sidebar .nav-group summary::-webkit-details-marker { display: none; }
.sidebar .nav-section { margin: 14px 8px 7px; font-size: 11px; line-height: 17px; letter-spacing: .65px; font-weight: 600; color: #80abc0; white-space: nowrap; }
.sidebar .nav-section:not(:first-of-type) { border-top: 1px solid #36526255; padding-top: 12px; }
.sidebar .nav-link, .sidebar .nav-group summary, .sidebar-flyout .nav-link {
  min-height: 36px;
  padding: 8px 10px;
  gap: 11px;
  margin: 2px 0;
  border-radius: 7px;
  font-size: 12px;
  line-height: 20px;
  color: #c4d7e0;
  transition: background-color 140ms, color 140ms;
}
.sidebar .nav-link:hover, .sidebar .nav-group summary:hover, .sidebar-flyout .nav-link:hover { background: #24465580; color: #fff; }
.sidebar .nav-icon, .sidebar-flyout .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #a8c6d5;
}
.nav-icon svg { width: 20px; height: 20px; }
.nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-link.active, .sidebar-flyout .nav-link.active, .menu-collapsed .sidebar .nav-group.has-active > summary {
  color: #edfff9;
  background: linear-gradient(100deg, #0b625c, #13474e);
  box-shadow: inset 3px 0 #35d2b2, inset 0 0 0 1px #51c9b00e;
}
.sidebar .active .nav-icon, .sidebar .has-active > summary .nav-icon { color: #b6f2e1; }
.sidebar .nav-group summary::after { content: none; }
.nav-caret { margin-left: auto; color: #8baebf; flex: 0 0 12px; text-align: center; transition: transform 160ms; }
.sidebar details[open] > summary .nav-caret { transform: rotate(180deg); }
.sidebar .nav-group[open] > summary, .sidebar .nav-group.has-active > summary { color: #eef8fa; }
.sidebar .nav-group .nav-link { min-height: 29px; margin: 1px 0 1px 7px; padding: 4px 9px 4px 38px; font-size: 12px; }
.sidebar .nav-children .nav-icon { display: none; }
.sidebar .nav-children { padding-bottom: 4px; }
.sidebar-bottom {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 14px 12px;
  margin: 0;
  min-height: 78px;
  border-top: 1px solid #35536180;
  background: #092332e8;
}
.sidebar .sidebar-profile { min-width: 0; flex: 1; gap: 10px; padding: 0; text-align: left; color: #e5f2f6; border-radius: 8px; }
.sidebar .sidebar-profile:hover { background: #24465560; }
.sidebar .sidebar-profile > #avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; color: #f1f9ff; background: linear-gradient(145deg, #286790, #174361); font-size: 14px; border: 1px solid #6697b045; box-shadow: 0 2px 7px #0002; }
.sidebar-user-copy { display: block; min-width: 0; overflow: hidden; white-space: nowrap; }
.sidebar #userName { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.sidebar #userRole { font-size: 10px; color: #91b0c1; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1px; }
.sidebar .sidebar-user-actions > a, .sidebar .sidebar-user-actions > button { display: grid; place-items: center; margin: 0; width: 27px; height: 32px; padding: 4px; border: 0; background: transparent; border-radius: 7px; }
.sidebar .sidebar-user-actions > a:hover, .sidebar .sidebar-user-actions > button:hover { background: #244655a0; }
.sidebar-user-actions .nav-icon, .sidebar-user-actions .nav-icon svg { width: 18px; height: 18px; flex-basis: 18px; }
.sidebar :is(a, button, summary):focus-visible, .sidebar-flyout a:focus-visible { outline: 2px solid #69d8bd; outline-offset: -2px; }
.menu-collapsed .sidebar-header { flex-basis: 84px; min-height: 84px; }
.menu-collapsed .sidebar .brand { left: calc((var(--sidebar-rail) - 42px) / 2); top: 20px; width: 42px; max-width: 42px; height: 44px; pointer-events: none; }
.menu-collapsed .brand-copy { opacity: 0; visibility: hidden; }
.menu-collapsed .sidebar .brand-emblem { opacity: 1; visibility: visible; }
/* The transparent button owns the logo hit area; only its hover/focus reveals it. */
.menu-collapsed #sidebar #toggleMenu { top: 20px; left: calc((var(--sidebar-rail) - 42px) / 2); right: auto; width: 42px; height: 44px; opacity: 0; }
.menu-collapsed #sidebar #toggleMenu:hover, .menu-collapsed #sidebar #toggleMenu:focus-visible { opacity: 1; }
.menu-collapsed .sidebar-header:has(> #toggleMenu:is(:hover, :focus-visible)) .brand-emblem { opacity: 0; }
.menu-collapsed .sidebar .nav-section,
.menu-collapsed .sidebar .nav-text, .menu-collapsed .sidebar .nav-caret, .menu-collapsed .sidebar-user-copy,
.menu-collapsed .sidebar .nav-children { display: none; }
.menu-collapsed .sidebar .nav-link, .menu-collapsed .sidebar .nav-group summary { height: 44px; min-height: 44px; padding: 0; justify-content: center; margin: 5px 0; gap: 0; }
.menu-collapsed .sidebar .nav-group { margin: 0; }
.menu-collapsed .sidebar-bottom { flex-direction: column; align-items: center; padding: 14px 5px 10px; gap: 9px; }
.menu-collapsed .sidebar .sidebar-profile { width: 44px; min-height: 44px; flex: 0 0 auto; padding: 2px; gap: 0; justify-content: center; }
.sidebar-tooltip, .sidebar-flyout { position: fixed; z-index: 80; color: #e2eef3; background: #102e3e; border: 1px solid #3e627580; box-shadow: 0 10px 28px #04182338; }
.sidebar-tooltip { padding: 8px 11px; border-radius: 7px; font-size: 12px; line-height: 18px; max-width: min(280px, calc(100vw - 100px)); pointer-events: none; }
.sidebar-flyout { width: min(270px, calc(100vw - 90px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 8px; border-radius: 11px; }
.sidebar-flyout-heading { padding: 9px 10px 12px; font-size: 12px; font-weight: 600; color: #b3d8e5; border-bottom: 1px solid #41617155; margin-bottom: 6px; }
.sidebar-flyout .nav-link { display: flex; margin: 1px 0; padding: 5px 10px; min-height: 31px; }
.sidebar-flyout .nav-icon { display: none; }
.sidebar-flyout p { padding: 0 10px; font-size: 12px; line-height: 1.6; color: #b5cfdb; }
.application.menu-initializing, .menu-initializing .sidebar, .menu-initializing .sidebar-header, .menu-initializing .sidebar .brand, .menu-initializing .brand-copy, .menu-initializing .brand-emblem, .menu-initializing #sidebar #toggleMenu { transition: none; }
@media (max-width: 760px) {
  .application, .application.menu-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; width: min(var(--sidebar-width), calc(100vw - 24px)); z-index: 30; transform: translateX(-100%); visibility:hidden; transition: transform var(--sidebar-motion); }
  .application.menu-open .sidebar { transform:translateX(0);visibility:visible; }
  .sidebar-scroll { padding-left: 3px; padding-right: 3px; }
  .application.menu-open .sidebar-scroll { padding-left: 7px; padding-right: 7px; }
  .main-shell { grid-column: 1; }
  .menu-backdrop { left: 0; }
  .mobile-menu-toggle { position:fixed;top:6px;left:8px;z-index:20;width:34px;height:32px;display:grid;place-items:center;border:1px solid #cbd5d3;border-radius:5px;background:#fff;color:#28594d; }
  .application .topbar { padding-left:52px; }
  .application .work-bar { padding-left:48px; }
  .work-view #toggleMenu.mobile-menu-toggle { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .application, .sidebar, .sidebar-header, .sidebar .brand, .sidebar .brand-copy, .sidebar .brand-emblem, #sidebar #toggleMenu { transition: none; }
}
@media print {
  .sidebar, .sidebar-flyout, .sidebar-tooltip { display: none !important; }
  .application { display: block; }
}
.incident-badge { margin-left:auto; flex:none; min-width:22px; padding:2px 6px; border-radius:7px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; line-height:17px; text-align:center; }
.incident-badge.is-zero { background:#ffffff12; color:#93b7c4; }
.incident-parent-badge { display:none; }
.nav-group:not([open]) > summary .incident-parent-badge { display:block; }
.menu-collapsed .nav-group > summary { position:relative; }
.menu-collapsed .nav-group > summary .incident-parent-badge { display:block; position:absolute; right:1px; top:0; min-width:17px; padding:0 4px; font-size:9px; }
.incident-badge[hidden] { display:none !important; }