/* Dark EMF navigation. Presentation only; no layout breakpoints or data changes. */
html[data-brand="emf-service"] .sidebar {
  isolation: isolate;
  color: #e8f0f7;
  background-color: #122131;
  background-image:
    radial-gradient(ellipse at 0% 0%, #147bac26 0%, transparent 55%),
    radial-gradient(ellipse at 100% 90%, #11688414 0%, transparent 50%),
    linear-gradient(165deg, #182a3b 0%, #122131 52%, #101d2b 100%);
  border-right-color: #263d50;
  box-shadow: 4px 0 24px #0c1a2a0b;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

/* Keep the supplied logo file intact. Screen blending removes its light
   canvas after colour inversion, retaining the blue/cyan brand line. The
   mobile topbar and sign-in logo retain their original light presentation. */
html[data-brand="emf-service"] .sidebar .brand.emf-brand {
  flex-shrink: 0;
  gap: 13px;
  padding-bottom: 25px;
}
html[data-brand="emf-service"] .sidebar .emf-brand-logo img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
html[data-brand="emf-service"] .sidebar .brand .emf-brand-caption {
  color: #a0b7c9;
  letter-spacing: 1.05px;
}

html[data-brand="emf-service"] .sidebar nav {
  scrollbar-color: #526b80 transparent;
  scroll-padding-block: 8px;
  overscroll-behavior-y: contain;
}
html[data-brand="emf-service"] .sidebar nav::-webkit-scrollbar { width: 4px; }
html[data-brand="emf-service"] .sidebar nav::-webkit-scrollbar-thumb { background: #526b80; border-radius: 4px; }
html[data-brand="emf-service"] .sidebar .nav-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9bafc1;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.45px;
}
html[data-brand="emf-service"] .sidebar .nav-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #9bb7ce26, transparent);
}
html[data-brand="emf-service"] .sidebar nav button {
  min-height: 40px;
  color: #c6d4e0;
  background: transparent;
  border-radius: 10px;
  box-shadow: none;
}
html[data-brand="emf-service"] .sidebar nav button > svg { color: #96afc3; }
html[data-brand="emf-service"] .sidebar nav button:hover {
  color: #f5faff;
  background: #e0f1ff0c;
  box-shadow: inset 0 0 0 1px #d9edff0a;
}
html[data-brand="emf-service"] .sidebar nav button:hover > svg { color: #c6e5f8; }
html[data-brand="emf-service"] .sidebar nav button.active {
  color: #f5fbff;
  background: linear-gradient(105deg, #1c5179 0%, #1b3851 100%);
  box-shadow: inset 3px 0 #46c5f3, inset 0 0 0 1px #85cbef24, 0 3px 12px #07152220;
  font-weight: 750;
}
html[data-brand="emf-service"] .sidebar nav button.active > svg { color: #78d8ff; }
html[data-brand="emf-service"] .sidebar nav button b { color: #eaf8ff; background: #276185; }
html[data-brand="emf-service"] .sidebar :is(button, a):focus-visible {
  outline: 2px solid #86ddff;
  outline-offset: -2px;
}

html[data-brand="emf-service"] .sidebar .sidebar-bottom { flex-shrink: 0; }
html[data-brand="emf-service"] .sidebar .profile {
  color: #e7f0f8;
  padding: 11px 9px;
  margin-top: 15px;
  gap: 9px;
  border: 1px solid #a0c4df1c;
  border-radius: 12px;
  background: linear-gradient(115deg, #d1eaff0a, #d1eaff04);
  box-shadow: inset 0 1px #e0f3ff05;
}
html[data-brand="emf-service"] .sidebar .profile .avatar {
  color: #c9efff;
  background: linear-gradient(145deg, #235473, #203c54);
  border-color: #91cee52b;
}
html[data-brand="emf-service"] .sidebar .profile small { color: #a1b4c6; }
html[data-brand="emf-service"] .sidebar .logout { color: #a4bed1; }
html[data-brand="emf-service"] .sidebar .logout:hover { color: #e7f7ff; background: #d8efff12; }

@media (max-width: 1100px) {
  html[data-brand="emf-service"] .sidebar { box-shadow: 14px 0 50px #08182733; }
}
@media (max-height: 560px) {
  html[data-brand="emf-service"] .sidebar { padding-top: 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  html[data-brand="emf-service"] .sidebar .brand.emf-brand { gap: 7px; padding-bottom: 12px; }
  html[data-brand="emf-service"] .sidebar .emf-brand-logo { width: 118px; }
  html[data-brand="emf-service"] .sidebar .profile { margin-top: 9px; }
}
@media (pointer: coarse) {
  html[data-brand="emf-service"] .sidebar nav button { min-height: 44px; }
}
@media (forced-colors: active) {
  html[data-brand="emf-service"] .sidebar { background: Canvas; color: CanvasText; border-color: CanvasText; }
  html[data-brand="emf-service"] .sidebar .emf-brand-logo { background: white; forced-color-adjust: none; }
  html[data-brand="emf-service"] .sidebar .emf-brand-logo img { filter: none; mix-blend-mode: normal; }
  html[data-brand="emf-service"] .sidebar nav button.active { outline: 2px solid Highlight; outline-offset: -2px; }
  html[data-brand="emf-service"] .sidebar :is(button, a):focus-visible { outline-color: Highlight; }
}