html, body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Collapsible sidebar paddings */
.main {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  /* GPU acceleration and performance optimizations */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), left 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile view - full width */
@media (max-width: 767px) {
  .main {
    left: 0;
    border-radius: 0;
  }
}

/* Desktop view - adjust for sidebar */
@media (min-width: 768px) {
  body[data-sidebar='expanded'] .main {
    left: 232px;
    width: calc(100% - 232px);
  }
  body[data-sidebar='collapsed'] .main {
    left: 76px;
    width: calc(100% - 76px);
  }
}

.sidebar {
  width: 232px;
  /* GPU acceleration and performance optimizations */
  will-change: width;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar[data-collapsed='true'] {
  width: 76px;
}

.sidebar[data-collapsed='true'] .label {
  display: none;
}

.sidebar[data-collapsed='true'] .sidebar-logo {
  display: none;
}

.sidebar[data-collapsed='true'] .section-title {
  display: none;
}

.sidebar[data-collapsed='true'] .upgrade-card {
  display: none;
}

.sidebar[data-collapsed='true'] .bottom-icons {
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar .item {
  height: 40px;
}

@media (max-width: 767px) {
  .sidebar-mobile-closed {
    transform: translateX(-100%);
  }
  .sidebar-mobile-open {
    transform: translateX(0);
  }
}

/* Professional minimal tooltip */
.tooltip {
  position: absolute;
  left: 100%;
  margin-left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Dark mode tooltip */
.dark .tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
}

/* Show tooltip on hover only when sidebar is collapsed */
.sidebar[data-collapsed='true'] .relative:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Hide tooltips completely when sidebar is expanded */
.sidebar[data-collapsed='false'] .tooltip {
  display: none;
}

/* Header logo - visible on mobile and when sidebar is collapsed on desktop */
.header-logo {
  display: block;
  transition: opacity 0.3s ease;
}

/* Hide header logo on tablet/desktop when sidebar is expanded */
@media (min-width: 768px) {
  .header-logo {
    display: none;
  }

  /* Show header logo when sidebar is collapsed on desktop */
  body[data-sidebar='collapsed'] .header-logo {
    display: block;
  }
}

/* Hide sidebar logo when collapsed */
.sidebar[data-collapsed='true'] .sidebar-logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* When sidebar is collapsed, hide logo and adjust toggle button position */
.sidebar[data-collapsed='true'] .sidebar-header > div:first-child {
  display: none;
}

.sidebar[data-collapsed='true'] .sidebar-header {
  justify-content: flex-start;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Theme dropdown positioning */
#themeDropdown {
  z-index: 100;
  min-width: 150px;
  animation: slideUp 0.2s ease-out;
}

.theme-dropdown-position {
  left: 50%;
  transform: translateX(-50%);
}

/* Animation for collapsed sidebar state */
.sidebar[data-collapsed='true'] #themeDropdown {
  left: 100%;
  bottom: 0;
  margin-left: 10px;
  transform: none;
  animation: slideLeft 0.2s ease-out;
}

/* More Menu dropdown positioning - matches theme dropdown */
#moreMenuDropdown {
  z-index: 100;
  min-width: 180px;
  animation: slideUp 0.2s ease-out;
}

.more-dropdown-position {
  left: 50%;
  transform: translateX(-50%);
}

/* Animation for collapsed sidebar state - More Menu */
.sidebar[data-collapsed='true'] #moreMenuDropdown {
  left: 100%;
  bottom: 0;
  margin-left: 10px;
  transform: none;
  animation: slideLeft 0.2s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.theme-option {
  transition: background-color 0.15s ease;
}

/* Smooth transitions */
.transition-smooth {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Search dropdown animations */
#searchDropdown {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* User menu animations */
#userMenu {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scrim transitions */
.scrim-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* User Avatar Styles */
.user-avatar-premium {
  box-shadow: 0 0 0 2px #fbbf24, 0 0 12px rgba(251, 191, 36, 0.4);
}

.user-avatar-expired {
  box-shadow: 0 0 0 2px #ef4444, 0 0 8px rgba(239, 68, 68, 0.3);
}

.user-avatar-about-to-expire {
  box-shadow: 0 0 0 2px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.3);
}

/* Premium badge animation */
@keyframes pulse-premium {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

.premium-badge-pulse {
  animation: pulse-premium 2s ease-in-out infinite;
}

/* Submenu Box Styles */
/* Submenu positioning - let Tailwind handle width and visibility */
.nav-item-wrapper {
  position: relative;
}

/* Fallback icons using Font Awesome when Lucide fails */
[data-lucide]:empty::before {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 400;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Map Lucide icons to Font Awesome equivalents */
[data-lucide="home"]:empty::before { content: "\f015"; }
[data-lucide="cpu"]:empty::before { content: "\f2db"; }
[data-lucide="box"]:empty::before { content: "\f466"; }
[data-lucide="users"]:empty::before { content: "\f0c0"; }
[data-lucide="wand-sparkles"]:empty::before { content: "\f72b"; }
[data-lucide="image"]:empty::before { content: "\f03e"; }
[data-lucide="clapperboard"]:empty::before { content: "\f008"; }
[data-lucide="bot"]:empty::before { content: "\f544"; }
[data-lucide="message-circle-more"]:empty::before { content: "\f4ad"; }
[data-lucide="grid-2x2"]:empty::before { content: "\f00a"; }
[data-lucide="help-circle"]:empty::before { content: "\f059"; }
[data-lucide="gamepad-2"]:empty::before { content: "\f11b"; }
[data-lucide="sun"]:empty::before { content: "\f185"; }
[data-lucide="moon"]:empty::before { content: "\f186"; }
[data-lucide="monitor"]:empty::before { content: "\f108"; }
[data-lucide="bell"]:empty::before { content: "\f0f3"; }
[data-lucide="more-horizontal"]:empty::before { content: "\f141"; }
[data-lucide="panel-left-close"]:empty::before { content: "\f100"; }
[data-lucide="panel-left-open"]:empty::before { content: "\f101"; }
[data-lucide="menu"]:empty::before { content: "\f0c9"; }
[data-lucide="search"]:empty::before { content: "\f002"; }
[data-lucide="camera"]:empty::before { content: "\f030"; }
[data-lucide="arrow-right"]:empty::before { content: "\f061"; }
[data-lucide="video"]:empty::before { content: "\f03d"; }
[data-lucide="file-text"]:empty::before { content: "\f15c"; }
[data-lucide="music"]:empty::before { content: "\f001"; }
[data-lucide="code-2"]:empty::before { content: "\f121"; }
[data-lucide="mic"]:empty::before { content: "\f130"; }
[data-lucide="heart"]:empty::before { content: "\f004"; }
[data-lucide="bookmark"]:empty::before { content: "\f02e"; }
[data-lucide="more-vertical"]:empty::before { content: "\f142"; }
[data-lucide="zap"]:empty::before { content: "\f0e7"; }
[data-lucide="layers"]:empty::before { content: "\f5fd"; }
[data-lucide="clock"]:empty::before { content: "\f017"; }
[data-lucide="credit-card"]:empty::before { content: "\f09d"; }
[data-lucide="user"]:empty::before { content: "\f007"; }
[data-lucide="languages"]:empty::before { content: "\f1ab"; }
[data-lucide="sun-moon"]:empty::before { content: "\f186"; }
[data-lucide="log-out"]:empty::before { content: "\f2f5"; }
[data-lucide="arrow-up"]:empty::before { content: "\f062"; }
[data-lucide="shopping-bag"]:empty::before { content: "\f290"; }
[data-lucide="chevron-right"]:empty::before { content: "\f054"; }
[data-lucide="sparkles"]:empty::before { content: "\f890"; }
[data-lucide="circle"]:empty::before { content: "\f111"; }
[data-lucide="user-circle"]:empty::before { content: "\f2bd"; }
[data-lucide="layout-dashboard"]:empty::before { content: "\f3fd"; }
[data-lucide="wallet"]:empty::before { content: "\f555"; }
[data-lucide="shopping-basket"]:empty::before { content: "\f291"; }
[data-lucide="arrow-right-left"]:empty::before { content: "\f362"; }
[data-lucide="settings"]:empty::before { content: "\f013"; }
[data-lucide="folder"]:empty::before { content: "\f07b"; }
[data-lucide="users-2"]:empty::before { content: "\f500"; }
[data-lucide="banknote"]:empty::before { content: "\f53c"; }
[data-lucide="trending-up"]:empty::before { content: "\f0ae"; }

/* Extracted Repeated Classes */

/* Navigation link active state */
.nav-link-active {
  background-color: #e3eeff;
  font-weight: 500;
  color: #111827;
}

.dark .nav-link-active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Navigation link inactive state */
.nav-link-inactive {
  color: #1f2937;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dark .nav-link-inactive {
  color: #e5e7eb;
}

.nav-link-inactive:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.dark .nav-link-inactive:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Action button (help, gamepad, theme, etc.) */
.action-button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.action-button:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.dark .action-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Mobile action button (larger) */
.mobile-action-button {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.mobile-action-button:hover {
  background-color: #f3f4f6;
}

.dark .mobile-action-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}