/* Compact MEDCORE-matched sidebar appearance for mr.pharmacist. */

:root {
  --sidebar-w: 260px !important;
}

#sidebar.sidebar {
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  max-width: var(--sidebar-w) !important;
  padding: 22px 14px !important;
  color: #dce7f1 !important;
  background: #0a1828 !important;
  border-inline: 0 !important;
  box-shadow: inset -1px 0 0 rgba(177,238,235,.10), 14px 0 38px rgba(3,21,31,.16) !important;
}

#sidebar.sidebar .brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 9px 25px !important;
  border: 0 !important;
}

#sidebar.sidebar .logo-mark {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4ec2bc, #147a83) !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(20,122,131,.28) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#sidebar.sidebar .brand-title {
  color: #f4f8fb !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
}

#sidebar.sidebar .brand-subtitle {
  margin-top: 4px !important;
  color: #8aa0b7 !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#sidebar.sidebar > .nav-group,
#sidebar.sidebar .nav-group[data-mrph-group="workspace"],
#sidebar.sidebar .nav-group[data-mrph-group="explore"],
#sidebar.sidebar .nav-group[data-mrph-group="account"] {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#sidebar.sidebar .nav-group[data-mrph-group="workspace"],
#sidebar.sidebar .nav-group[data-mrph-group="explore"] {
  margin-bottom: 4px !important;
}

#sidebar.sidebar .nav-group[data-mrph-group="account"] {
  margin-top: auto !important;
  padding-top: 10px !important;
}

#sidebar.sidebar .nav-title {
  display: none !important;
}

#sidebar.sidebar .nav-item,
#sidebar.sidebar .nav-group[data-mrph-group="workspace"] .nav-item,
#sidebar.sidebar .nav-group[data-mrph-group="explore"] .nav-item,
#sidebar.sidebar .nav-group[data-mrph-group="account"] .nav-item {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  color: #c9d9e7 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  letter-spacing: .005em !important;
  line-height: 1.2 !important;
  transform: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

#sidebar.sidebar .nav-item:hover,
#sidebar.sidebar .nav-item.active,
#sidebar.sidebar .nav-group[data-mrph-group="workspace"] .nav-item:hover,
#sidebar.sidebar .nav-group[data-mrph-group="workspace"] .nav-item.active,
#sidebar.sidebar .nav-group[data-mrph-group="explore"] .nav-item:hover,
#sidebar.sidebar .nav-group[data-mrph-group="explore"] .nav-item.active,
#sidebar.sidebar .nav-group[data-mrph-group="account"] .nav-item:hover,
#sidebar.sidebar .nav-group[data-mrph-group="account"] .nav-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(57,151,160,.29), rgba(255,255,255,.07)) !important;
  border-color: rgba(184,243,238,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 15px rgba(0,0,0,.10) !important;
}

#sidebar.sidebar .nav-item:hover {
  transform: translateX(2px) !important;
}

#sidebar.sidebar .nav-item.active {
  transform: none !important;
}

#sidebar.sidebar .nav-left,
#sidebar.sidebar .nav-group[data-mrph-group="workspace"] .nav-left,
#sidebar.sidebar .nav-group[data-mrph-group="explore"] .nav-left,
#sidebar.sidebar .nav-group[data-mrph-group="account"] .nav-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
}

#sidebar.sidebar .nav-icon,
#sidebar.sidebar .mrph-suite-mark {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  flex: 0 0 8px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: rgba(72,183,183,.58) !important;
  box-shadow: 0 0 0 3px rgba(72,183,183,.07) !important;
  font-size: 0 !important;
}

#sidebar.sidebar .nav-item:hover .nav-icon,
#sidebar.sidebar .nav-item.active .nav-icon,
#sidebar.sidebar .nav-item:hover .mrph-suite-mark,
#sidebar.sidebar .nav-item.active .mrph-suite-mark {
  background: #77d5d0 !important;
  box-shadow: 0 0 0 3px rgba(77,193,188,.12), 0 0 12px rgba(77,193,188,.28) !important;
}

#sidebar.sidebar .mrph-suite-copy {
  display: block !important;
  min-width: 0 !important;
  text-align: start !important;
}

#sidebar.sidebar .mrph-suite-title,
#sidebar.sidebar .mrph-workspace-label,
#sidebar.sidebar .mrph-control-label {
  display: block !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#sidebar.sidebar .mrph-suite-subtitle,
#sidebar.sidebar .nav-lock {
  display: none !important;
}

#sidebar.sidebar > .sidebar-card {
  display: none !important;
}

@media (min-width: 821px) {
  html:not([dir="rtl"]) .app-shell.mrph-medcore-layout {
    grid-template-columns: 260px minmax(0,1fr) !important;
  }

  html[dir="rtl"] .app-shell.mrph-medcore-layout {
    grid-template-columns: minmax(0,1fr) 260px !important;
  }

  #sidebar.sidebar.mrph-medcore-sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  #sidebar.sidebar.mrph-medcore-sidebar.mrph-medcore-closed {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
}

@media (max-width: 820px) {
  :root {
    --sidebar-w: min(260px, 86vw) !important;
  }

  #sidebar.sidebar {
    width: min(260px, 86vw) !important;
    min-width: min(260px, 86vw) !important;
    max-width: min(260px, 86vw) !important;
  }
}