/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 @theme {
  --font-display: "Satoshi", "sans-serif";
  --color-green: #28b19a;
  --color-orange: #ee741e;
  --color-light-orange: #fd8028;
  --color-blue-green: #03536a;
  --color-cream: #fef9eb;
  /* Legacy support */
  --color-orange-500: #ee741e;
  --color-blue-500: #03536a;
  --color-green-500: #28b19a;
}

/* Sidebar menu corporate colors */
.dashboard-link, 
.sidebar-menu-item {
  background: transparent !important;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.dashboard-icon, 
.sidebar-menu-icon {
  color: #ee741e !important; /* Primary orange from brand */
  transition: color 0.2s ease-in-out;
}

.dashboard-text, 
.sidebar-menu-text {
  color: #03536a !important; /* Deep blue-green for elegance */
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

/* Light mode hover effects */
.dashboard-link:hover, 
.sidebar-menu-item:hover {
  background: linear-gradient(135deg, #fef9eb 0%, rgba(254, 249, 235, 0.7) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(238, 116, 30, 0.15) !important;
}

.dashboard-link:hover .dashboard-icon, 
.sidebar-menu-item:hover .sidebar-menu-icon {
  color: #fd8028 !important; /* Light orange on hover */
}

.dashboard-link:hover .dashboard-text, 
.sidebar-menu-item:hover .sidebar-menu-text {
  color: #28b19a !important; /* Beautiful green on hover */
}

/* Dropdown arrow styling */
.sidebar-dropdown-arrow {
  color: #03536a !important;
  transition: color 0.2s ease-in-out;
}

.sidebar-menu-item:hover .sidebar-dropdown-arrow {
  color: #28b19a !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .dashboard-link, 
  .sidebar-menu-item {
    background: transparent !important;
  }
  
  .dashboard-icon, 
  .sidebar-menu-icon {
    color: #fd8028 !important; /* Light orange for dark mode visibility */
  }
  
  .dashboard-text, 
  .sidebar-menu-text {
    color: #28b19a !important; /* Green for better contrast in dark mode */
  }
  
  .sidebar-dropdown-arrow {
    color: #28b19a !important;
  }
  
  /* Dark mode hover effects */
  .dashboard-link:hover, 
  .sidebar-menu-item:hover {
    background: linear-gradient(135deg, rgba(3, 83, 106, 0.2) 0%, rgba(40, 177, 154, 0.1) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(40, 177, 154, 0.2) !important;
  }
  
  .dashboard-link:hover .dashboard-icon, 
  .sidebar-menu-item:hover .sidebar-menu-icon {
    color: #ee741e !important; /* Standard orange on hover in dark mode */
  }
  
  .dashboard-link:hover .dashboard-text, 
  .sidebar-menu-item:hover .sidebar-menu-text {
    color: #fd8028 !important; /* Light orange text on hover in dark mode */
  }
  
  .sidebar-menu-item:hover .sidebar-dropdown-arrow {
    color: #fd8028 !important;
  }
}