.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.menu-item-active {
  background-color: #ecf3ff;
  color: #465fff;
}
:is(.dark .menu-item-active) {
  background-color: rgba(70, 95, 255, 0.12);
  color: #7592ff;
}

.menu-item-inactive {
  color: #344054;
}
.menu-item-inactive:hover {
  background-color: #f2f4f7;
  color: #344054;
}
:is(.dark .menu-item-inactive) {
  color: #d0d5dd;
}
:is(.dark .menu-item-inactive):hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #d0d5dd;
}

.menu-item-icon-active {
  fill: #465fff;
}
:is(.dark .menu-item-icon-active) {
  fill: #7592ff;
}

.menu-item-icon-inactive {
  fill: #667085;
}
.group:hover .menu-item-icon-inactive {
  fill: #344054;
}
:is(.dark .menu-item-icon-inactive) {
  fill: #98a2b3;
}
:is(.dark .group:hover .menu-item-icon-inactive) {
  fill: #d0d5dd;
}

.menu-item-arrow {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
}
.menu-item-arrow-active {
  stroke: #465fff;
  transform: translateY(-50%) rotate(180deg);
}
:is(.dark .menu-item-arrow-active) { stroke: #7592ff; }
.menu-item-arrow-inactive { stroke: #667085; }
.group:hover .menu-item-arrow-inactive { stroke: #344054; }
:is(.dark .menu-item-arrow-inactive) { stroke: #98a2b3; }
:is(.dark .group:hover .menu-item-arrow-inactive) { stroke: #d0d5dd; }

.menu-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.menu-dropdown-item-active {
  background-color: #ecf3ff;
  color: #465fff;
}
:is(.dark .menu-dropdown-item-active) {
  background-color: rgba(70, 95, 255, 0.12);
  color: #7592ff;
}
.menu-dropdown-item-inactive { color: #344054; }
.menu-dropdown-item-inactive:hover { background-color: #f2f4f7; }
:is(.dark .menu-dropdown-item-inactive) { color: #d0d5dd; }
:is(.dark .menu-dropdown-item-inactive):hover { background-color: rgba(255, 255, 255, 0.05); }

.menu-dropdown-badge {
  display: block;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: #465fff;
}
:is(.dark .menu-dropdown-badge) { color: #7592ff; }
.menu-dropdown-badge-active { background-color: #dde9ff; }
:is(.dark .menu-dropdown-badge-active) { background-color: rgba(70, 95, 255, 0.20); }
.menu-dropdown-badge-inactive { background-color: #ecf3ff; }
.group:hover .menu-dropdown-badge-inactive { background-color: #dde9ff; }
:is(.dark .menu-dropdown-badge-inactive) { background-color: rgba(70, 95, 255, 0.15); }
:is(.dark .group:hover .menu-dropdown-badge-inactive) { background-color: rgba(70, 95, 255, 0.20); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track { border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-color: #e4e7ec;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #344054; }

.sidebar {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width, transform;
}

.sidebar:hover                  { width: 290px; }
.sidebar:hover .logo            { display: flex; }
.sidebar:hover .logo-icon       { display: none; }
.sidebar:hover .sidebar-header  { justify-content: space-between; }
.sidebar:hover .menu-group-title{ display: block; }
.sidebar:hover .menu-group-icon { display: none; }
.sidebar:hover .menu-item-text  { display: inline; }
.sidebar:hover .menu-item-arrow { display: block; }
.sidebar:hover .menu-dropdown   { display: flex; }

input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

body { position: relative; z-index: 1; background-color: #f9fafb; font-weight: 400; }
.dark body { background-color: #101828; }