/* === CUSTOM STYLES Tabler icons === */

/* Clase utilitare pentru culori */
.icon-primary {
  color: #5C7F69; /* primary color din config */
}

.icon-accent {
  color: #FF6700; /* accentFosfoOrange */
}

.icon-warm {
  color: #D6A45E; /* accentWarm */
}

.icon-cool {
  color: #5C6B85; /* accentCool */
}

.icon-smolder {
  color: #17332D; /* smolder */
}

/* Clase pentru mărimile iconurilor */
.icon-xs {
  font-size: 0.75rem; /* 12px */
}

.icon-sm {
  font-size: 0.875rem; /* 14px */
}

.icon-base {
  font-size: 1rem; /* 16px */
}

.icon-lg {
  font-size: 1.125rem; /* 18px */
}

.icon-xl {
  font-size: 1.25rem; /* 20px */
}

.icon-2xl {
  font-size: 1.5rem; /* 24px */
}

.icon-3xl {
  font-size: 1.875rem; /* 30px */
}

/* Animații și efecte hover */
.icon-hover-scale {
  transition: transform 0.3s ease;
}

.icon-hover-scale:hover {
  transform: scale(1.1);
}

.icon-hover-bounce {
  transition: transform 0.3s ease;
}

.icon-hover-bounce:hover {
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* === STILURI SPECIFICE PENTRU SECȚIUNILE PROIECTULUI === */

/* Hero Section Icons */
.hero-icon {
  color: white;
  font-size: 1.5rem;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.hero-icon:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Category Icons */
.category-icon {
  color: #5C7F69; /* primary */
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.category-icon:hover {
  color: #FF6700; /* accentFosfoOrange */
  transform: scale(1.2);
}

/* Article Icons */
.article-icon {
  color: #6E6A68; /* grayDark */
  font-size: 1rem;
  transition: all 0.3s ease;
}

.article-icon:hover {
  color: #FF6700; /* accentFosfoOrange */
  transform: translateX(4px);
}

/* Button Icons */
.button-icon {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.group:hover .button-icon {
  transform: translateX(4px);
}

/* Sidebar Icons */
.sidebar-icon {
  color: #5C7F69; /* primary */
  font-size: 1.125rem;
  margin-right: 0.75rem;
  transition: all 0.3s ease;
}

.sidebar-icon:hover {
  color: #7CA37D; /* primaryMedium */
  transform: scale(1.1);
}

/* Navigation Icons */
.nav-icon {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.nav-icon:hover {
  color: white;
  transform: scale(1.05);
}

/* Mobile nav sticky state */
.mobile-nav.stickyadd .nav-icon {
  color: #17332D; /* smolder */
}

.mobile-nav.stickyadd .nav-icon:hover {
  color: #FF6700; /* accentFosfoOrange */
}

/* === COMBINAȚII SPECIFICE CU TAILWIND === */

/* Pentru iconurile din carduri */
.card-icon {
  @apply text-primary text-xl transition-all duration-300 group-hover:text-accentFosfoOrange group-hover:scale-110;
}

/* Pentru iconurile din footer */
.footer-icon {
  @apply text-white/80 text-lg hover:text-white hover:scale-105 transition-all duration-300;
}

/* Pentru iconurile sociale */
.social-icon {
  @apply w-8 h-8 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 hover:scale-110 transition-all duration-300;
}

/* Pentru iconurile de status */
.status-success {
  @apply text-green-500;
}

.status-warning {
  @apply text-yellow-500;
}

.status-error {
  @apply text-red-500;
}

.status-info {
  @apply text-blue-500;
}

/* === ICONURI PENTRU DIFERITE STĂRI ALE APLICAȚIEI === */

/* Loading state */
.icon-loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Active state pentru menu items */
.nav-item.active .ti {
  color: #FF6700; /* accentFosfoOrange */
}

/* Disabled state */
.icon-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === RESPONSIVE ADJUSTMENTS === */

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-icon {
    font-size: 1.25rem;
  }

  .category-icon {
    font-size: 1rem;
  }

  .sidebar-icon {
    font-size: 1rem;
    margin-right: 0.5rem;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-icon {
    font-size: 1.375rem;
  }
}