/* Custom CSS for Epyr Pricer */

/* Custom Color Variables */
:root {
  --color-epyr-green-dark: #579b72;
  --color-epyr-green-light: #83c2a5;
  --color-epyr-green: #75f58f;
  --color-epyr-yellow: #f8ff57;
  --color-epyr-citrus: #c5ff85;
  --color-epyr-brown: #bc5c0b;
  --color-epyr-blue: #1e40af;
  --color-epyr-blue-light: #3b82f6;
  --color-epyr-blue-dark: #1e3a8a;
  --color-epyr-purple: #7c3aed;
  --color-epyr-purple-light: #8b5cf6;
  --color-epyr-purple-dark: #6d28d9;
  --color-epyr-orange: #ea580c;
  --color-epyr-orange-light: #f97316;
  --color-epyr-orange-dark: #c2410c;
  --color-epyr-red: #dc2626;
  --color-epyr-red-light: #ef4444;
  --color-epyr-red-dark: #b91c1c;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom focus styles */
.focus-ring:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-epyr-blue);
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Animation classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

.animate-pulse-slow {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom button styles */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
}

/* Custom card styles */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300;
}

.card:hover {
  @apply shadow-md border-gray-200;
}

.card-header {
  @apply p-6 border-b border-gray-100;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply p-4 bg-gray-50 border-t border-gray-100;
}

/* Custom form styles */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

/* Custom badge styles */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-blue {
  @apply bg-blue-100 text-blue-800;
}

.badge-green {
  @apply bg-green-100 text-green-800;
}

.badge-yellow {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-purple {
  @apply bg-purple-100 text-purple-800;
}

.badge-red {
  @apply bg-red-100 text-red-800;
}

/* Custom table styles */
.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tbody tr {
  @apply hover:bg-gray-50 transition-colors duration-200;
}

/* Custom sidebar styles */
.sidebar-item {
  @apply flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-md transition-all duration-200;
}

.sidebar-item:hover {
  @apply text-blue-600 bg-blue-50;
}

.sidebar-item.active {
  @apply text-blue-600 bg-blue-100;
}

/* Custom loading spinner */
.spinner {
  @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

.spinner-sm {
  @apply w-4 h-4;
}

.spinner-md {
  @apply w-6 h-6;
}

.spinner-lg {
  @apply w-8 h-8;
}

/* Custom tooltip */
.tooltip {
  @apply relative;
}

.tooltip .tooltip-text {
  @apply invisible absolute z-10 py-2 px-3 text-sm text-white bg-gray-900 rounded-lg opacity-0 transition-opacity duration-300;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip:hover .tooltip-text {
  @apply visible opacity-100;
}

/* Custom modal backdrop */
.modal-backdrop {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center;
}

.modal-content {
  @apply bg-white rounded-xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto;
}

/* Custom dropdown */
.dropdown {
  @apply relative inline-block;
}

.dropdown-content {
  @apply absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-200;
}

.dropdown-item {
  @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200;
}

/* Custom Epyr Brand Colors - Background */
.bg-epyr-blue {
  background-color: var(--color-epyr-blue) !important;
}
.bg-epyr-blue-light {
  background-color: var(--color-epyr-blue-light) !important;
}
.bg-epyr-blue-dark {
  background-color: var(--color-epyr-blue-dark) !important;
}

.bg-epyr-green {
  background-color: var(--color-epyr-green) !important;
}
.bg-epyr-green-light {
  background-color: var(--color-epyr-green-light) !important;
}
.bg-epyr-green-dark {
  background-color: var(--color-epyr-green-dark) !important;
}

.bg-epyr-purple {
  background-color: var(--color-epyr-purple) !important;
}
.bg-epyr-purple-light {
  background-color: var(--color-epyr-purple-light) !important;
}
.bg-epyr-purple-dark {
  background-color: var(--color-epyr-purple-dark) !important;
}

.bg-epyr-orange {
  background-color: var(--color-epyr-orange) !important;
}
.bg-epyr-orange-light {
  background-color: var(--color-epyr-orange-light) !important;
}
.bg-epyr-orange-dark {
  background-color: var(--color-epyr-orange-dark) !important;
}

.bg-epyr-red {
  background-color: var(--color-epyr-red) !important;
}
.bg-epyr-red-light {
  background-color: var(--color-epyr-red-light) !important;
}
.bg-epyr-red-dark {
  background-color: var(--color-epyr-red-dark) !important;
}

.bg-epyr-yellow {
  background-color: var(--color-epyr-yellow) !important;
}
.bg-epyr-yellow-light {
  background-color: var(--color-epyr-citrus) !important;
}
.bg-epyr-yellow-dark {
  background-color: var(--color-epyr-brown) !important;
}

.bg-epyr-citrus {
  background-color: var(--color-epyr-citrus) !important;
}
.bg-epyr-citrus-50 {
  background-color: #f8ffed !important;
}
.bg-epyr-citrus-100 {
  background-color: #f0ffd6 !important;
}
.bg-epyr-citrus-200 {
  background-color: #e3ffb8 !important;
}
.bg-epyr-citrus-300 {
  background-color: #d4ff9a !important;
}
.bg-epyr-citrus-400 {
  background-color: #c5ff85 !important;
}
.bg-epyr-citrus-500 {
  background-color: #c5ff85 !important;
}
.bg-epyr-citrus-600 {
  background-color: #a8e66a !important;
}
.bg-epyr-citrus-700 {
  background-color: #8bcc4f !important;
}
.bg-epyr-citrus-800 {
  background-color: #6eb234 !important;
}
.bg-epyr-citrus-900 {
  background-color: #519819 !important;
}
.bg-epyr-brown {
  background-color: var(--color-epyr-brown) !important;
}

/* Text colors */
.text-epyr-blue {
  color: var(--color-epyr-blue) !important;
}
.text-epyr-blue-light {
  color: var(--color-epyr-blue-light) !important;
}
.text-epyr-blue-dark {
  color: var(--color-epyr-blue-dark) !important;
}

.text-epyr-green {
  color: var(--color-epyr-green) !important;
}
.text-epyr-green-light {
  color: var(--color-epyr-green-light) !important;
}
.text-epyr-green-dark {
  color: var(--color-epyr-green-dark) !important;
}

.text-epyr-purple {
  color: var(--color-epyr-purple) !important;
}
.text-epyr-purple-light {
  color: var(--color-epyr-purple-light) !important;
}
.text-epyr-purple-dark {
  color: var(--color-epyr-purple-dark) !important;
}

.text-epyr-orange {
  color: var(--color-epyr-orange) !important;
}
.text-epyr-orange-light {
  color: var(--color-epyr-orange-light) !important;
}
.text-epyr-orange-dark {
  color: var(--color-epyr-orange-dark) !important;
}

.text-epyr-red {
  color: var(--color-epyr-red) !important;
}
.text-epyr-red-light {
  color: var(--color-epyr-red-light) !important;
}
.text-epyr-red-dark {
  color: var(--color-epyr-red-dark) !important;
}

.text-epyr-yellow {
  color: var(--color-epyr-yellow) !important;
}
.text-epyr-yellow-light {
  color: var(--color-epyr-citrus) !important;
}
.text-epyr-yellow-dark {
  color: var(--color-epyr-brown) !important;
}

.text-epyr-citrus {
  color: var(--color-epyr-citrus) !important;
}
.text-epyr-citrus-50 {
  color: #f8ffed !important;
}
.text-epyr-citrus-100 {
  color: #f0ffd6 !important;
}
.text-epyr-citrus-200 {
  color: #e3ffb8 !important;
}
.text-epyr-citrus-300 {
  color: #d4ff9a !important;
}
.text-epyr-citrus-400 {
  color: #c5ff85 !important;
}
.text-epyr-citrus-500 {
  color: #c5ff85 !important;
}
.text-epyr-citrus-600 {
  color: #a8e66a !important;
}
.text-epyr-citrus-700 {
  color: #8bcc4f !important;
}
.text-epyr-citrus-800 {
  color: #6eb234 !important;
}
.text-epyr-citrus-900 {
  color: #519819 !important;
}
.text-epyr-brown {
  color: var(--color-epyr-brown) !important;
}

/* Border colors */
.border-epyr-blue {
  border-color: var(--color-epyr-blue) !important;
}
.border-epyr-blue-light {
  border-color: var(--color-epyr-blue-light) !important;
}
.border-epyr-blue-dark {
  border-color: var(--color-epyr-blue-dark) !important;
}

.border-epyr-green {
  border-color: var(--color-epyr-green) !important;
}
.border-epyr-green-light {
  border-color: var(--color-epyr-green-light) !important;
}
.border-epyr-green-dark {
  border-color: var(--color-epyr-green-dark) !important;
}

.border-epyr-purple {
  border-color: var(--color-epyr-purple) !important;
}
.border-epyr-purple-light {
  border-color: var(--color-epyr-purple-light) !important;
}
.border-epyr-purple-dark {
  border-color: var(--color-epyr-purple-dark) !important;
}

.border-epyr-orange {
  border-color: var(--color-epyr-orange) !important;
}
.border-epyr-orange-light {
  border-color: var(--color-epyr-orange-light) !important;
}
.border-epyr-orange-dark {
  border-color: var(--color-epyr-orange-dark) !important;
}

.border-epyr-red {
  border-color: var(--color-epyr-red) !important;
}
.border-epyr-red-light {
  border-color: var(--color-epyr-red-light) !important;
}
.border-epyr-red-dark {
  border-color: var(--color-epyr-red-dark) !important;
}

.border-epyr-yellow {
  border-color: var(--color-epyr-yellow) !important;
}
.border-epyr-yellow-light {
  border-color: var(--color-epyr-citrus) !important;
}
.border-epyr-yellow-dark {
  border-color: var(--color-epyr-brown) !important;
}

.border-epyr-citrus {
  border-color: var(--color-epyr-citrus) !important;
}
.border-epyr-citrus-50 {
  border-color: #f8ffed !important;
}
.border-epyr-citrus-100 {
  border-color: #f0ffd6 !important;
}
.border-epyr-citrus-200 {
  border-color: #e3ffb8 !important;
}
.border-epyr-citrus-300 {
  border-color: #d4ff9a !important;
}
.border-epyr-citrus-400 {
  border-color: #c5ff85 !important;
}
.border-epyr-citrus-500 {
  border-color: #c5ff85 !important;
}
.border-epyr-citrus-600 {
  border-color: #a8e66a !important;
}
.border-epyr-citrus-700 {
  border-color: #8bcc4f !important;
}
.border-epyr-citrus-800 {
  border-color: #6eb234 !important;
}
.border-epyr-citrus-900 {
  border-color: #519819 !important;
}
.border-epyr-brown {
  border-color: var(--color-epyr-brown) !important;
}

/* Hover states */
.hover\:bg-epyr-blue:hover {
  background-color: var(--color-epyr-blue) !important;
}
.hover\:bg-epyr-green:hover {
  background-color: var(--color-epyr-green) !important;
}
.hover\:bg-epyr-green-light:hover {
  background-color: var(--color-epyr-green-light) !important;
}
.hover\:bg-epyr-green-dark:hover {
  background-color: var(--color-epyr-green-dark) !important;
}
.hover\:bg-epyr-purple:hover {
  background-color: var(--color-epyr-purple) !important;
}
.hover\:bg-epyr-orange:hover {
  background-color: var(--color-epyr-orange) !important;
}
.hover\:bg-epyr-red:hover {
  background-color: var(--color-epyr-red) !important;
}
.hover\:bg-epyr-yellow:hover {
  background-color: var(--color-epyr-yellow) !important;
}
.hover\:bg-epyr-citrus:hover {
  background-color: var(--color-epyr-citrus) !important;
}
.hover\:bg-epyr-citrus-50:hover {
  background-color: #f8ffed !important;
}
.hover\:bg-epyr-citrus-100:hover {
  background-color: #f0ffd6 !important;
}
.hover\:bg-epyr-citrus-200:hover {
  background-color: #e3ffb8 !important;
}
.hover\:bg-epyr-citrus-300:hover {
  background-color: #d4ff9a !important;
}
.hover\:bg-epyr-citrus-400:hover {
  background-color: #c5ff85 !important;
}
.hover\:bg-epyr-citrus-500:hover {
  background-color: #c5ff85 !important;
}
.hover\:bg-epyr-citrus-600:hover {
  background-color: #a8e66a !important;
}
.hover\:bg-epyr-citrus-700:hover {
  background-color: #8bcc4f !important;
}
.hover\:bg-epyr-citrus-800:hover {
  background-color: #6eb234 !important;
}
.hover\:bg-epyr-citrus-900:hover {
  background-color: #519819 !important;
}
.hover\:bg-epyr-brown:hover {
  background-color: var(--color-epyr-brown) !important;
}

.hover\:text-epyr-blue:hover {
  color: var(--color-epyr-blue) !important;
}
.hover\:text-epyr-green:hover {
  color: var(--color-epyr-green) !important;
}
.hover\:text-epyr-purple:hover {
  color: var(--color-epyr-purple) !important;
}
.hover\:text-epyr-orange:hover {
  color: var(--color-epyr-orange) !important;
}
.hover\:text-epyr-red:hover {
  color: var(--color-epyr-red) !important;
}
.hover\:text-epyr-yellow:hover {
  color: var(--color-epyr-yellow) !important;
}
.hover\:text-epyr-citrus:hover {
  color: var(--color-epyr-citrus) !important;
}
.hover\:text-epyr-citrus-50:hover {
  color: #f8ffed !important;
}
.hover\:text-epyr-citrus-100:hover {
  color: #f0ffd6 !important;
}
.hover\:text-epyr-citrus-200:hover {
  color: #e3ffb8 !important;
}
.hover\:text-epyr-citrus-300:hover {
  color: #d4ff9a !important;
}
.hover\:text-epyr-citrus-400:hover {
  color: #c5ff85 !important;
}
.hover\:text-epyr-citrus-500:hover {
  color: #c5ff85 !important;
}
.hover\:text-epyr-citrus-600:hover {
  color: #a8e66a !important;
}
.hover\:text-epyr-citrus-700:hover {
  color: #8bcc4f !important;
}
.hover\:text-epyr-citrus-800:hover {
  color: #6eb234 !important;
}
.hover\:text-epyr-citrus-900:hover {
  color: #519819 !important;
}
.hover\:text-epyr-brown:hover {
  color: var(--color-epyr-brown) !important;
}
.hover\:text-epyr-green-dark:hover {
  color: var(--color-epyr-green-dark) !important;
}
.hover\:text-epyr-orange:hover {
  color: var(--color-epyr-orange) !important;
}

/* Group hover states */
.group:hover .group-hover\:text-epyr-green {
  color: var(--color-epyr-green) !important;
}
.group:hover .group-hover\:text-epyr-green-light {
  color: var(--color-epyr-green-light) !important;
}
.group:hover .group-hover\:text-epyr-green-dark {
  color: var(--color-epyr-green-dark) !important;
}
.group:hover .group-hover\:text-epyr-blue {
  color: var(--color-epyr-blue) !important;
}
.group:hover .group-hover\:text-epyr-purple {
  color: var(--color-epyr-purple) !important;
}
.group:hover .group-hover\:text-epyr-orange {
  color: var(--color-epyr-orange) !important;
}
.group:hover .group-hover\:text-epyr-red {
  color: var(--color-epyr-red) !important;
}
.group:hover .group-hover\:text-epyr-yellow {
  color: var(--color-epyr-yellow) !important;
}
.group:hover .group-hover\:text-epyr-citrus {
  color: var(--color-epyr-citrus) !important;
}
.group:hover .group-hover\:text-epyr-brown {
  color: var(--color-epyr-brown) !important;
}

.group:hover .group-hover\:bg-epyr-green {
  background-color: var(--color-epyr-green) !important;
}
.group:hover .group-hover\:bg-epyr-green-light {
  background-color: var(--color-epyr-green-light) !important;
}
.group:hover .group-hover\:bg-epyr-green-dark {
  background-color: var(--color-epyr-green-dark) !important;
}
.group:hover .group-hover\:bg-epyr-blue {
  background-color: var(--color-epyr-blue) !important;
}
.group:hover .group-hover\:bg-epyr-purple {
  background-color: var(--color-epyr-purple) !important;
}
.group:hover .group-hover\:bg-epyr-orange {
  background-color: var(--color-epyr-orange) !important;
}
.group:hover .group-hover\:bg-epyr-red {
  background-color: var(--color-epyr-red) !important;
}
.group:hover .group-hover\:bg-epyr-yellow {
  background-color: var(--color-epyr-yellow) !important;
}
.group:hover .group-hover\:bg-epyr-citrus {
  background-color: var(--color-epyr-citrus) !important;
}
.group:hover .group-hover\:bg-epyr-brown {
  background-color: var(--color-epyr-brown) !important;
}

/* Focus states */
.focus\:ring-epyr-blue:focus {
  --tw-ring-color: var(--color-epyr-blue) !important;
}
.focus\:ring-epyr-green:focus {
  --tw-ring-color: var(--color-epyr-green) !important;
}
.focus\:ring-epyr-green-light:focus {
  --tw-ring-color: var(--color-epyr-green-light) !important;
}
.focus\:ring-epyr-green-dark:focus {
  --tw-ring-color: var(--color-epyr-green-dark) !important;
}
.focus\:ring-epyr-purple:focus {
  --tw-ring-color: var(--color-epyr-purple) !important;
}
.focus\:ring-epyr-orange:focus {
  --tw-ring-color: var(--color-epyr-orange) !important;
}
.focus\:ring-epyr-red:focus {
  --tw-ring-color: var(--color-epyr-red) !important;
}
.focus\:ring-epyr-yellow:focus {
  --tw-ring-color: var(--color-epyr-yellow) !important;
}
.focus\:ring-epyr-citrus:focus {
  --tw-ring-color: var(--color-epyr-citrus) !important;
}
.focus\:ring-epyr-citrus-50:focus {
  --tw-ring-color: #f8ffed !important;
}
.focus\:ring-epyr-citrus-100:focus {
  --tw-ring-color: #f0ffd6 !important;
}
.focus\:ring-epyr-citrus-200:focus {
  --tw-ring-color: #e3ffb8 !important;
}
.focus\:ring-epyr-citrus-300:focus {
  --tw-ring-color: #d4ff9a !important;
}
.focus\:ring-epyr-citrus-400:focus {
  --tw-ring-color: #c5ff85 !important;
}
.focus\:ring-epyr-citrus-500:focus {
  --tw-ring-color: #c5ff85 !important;
}
.focus\:ring-epyr-citrus-600:focus {
  --tw-ring-color: #a8e66a !important;
}
.focus\:ring-epyr-citrus-700:focus {
  --tw-ring-color: #8bcc4f !important;
}
.focus\:ring-epyr-citrus-800:focus {
  --tw-ring-color: #6eb234 !important;
}
.focus\:ring-epyr-citrus-900:focus {
  --tw-ring-color: #519819 !important;
}
.focus\:ring-epyr-brown:focus {
  --tw-ring-color: var(--color-epyr-brown) !important;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .mobile-hidden {
    display: none;
  }

  .mobile-full {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .desktop-hidden {
    display: none;
  }
}

/* Dark mode support */
.dark .card {
  @apply bg-gray-800 border-gray-700;
}

.dark .card-header {
  @apply border-gray-700;
}

.dark .card-footer {
  @apply bg-gray-700 border-gray-600;
}

.dark .form-input {
  @apply bg-gray-700 border-gray-600 text-white;
}

.dark .table th {
  @apply text-gray-400;
}

.dark .table td {
  @apply text-gray-300;
}

.dark .table tbody tr:hover {
  @apply bg-gray-700;
}

/* Print styles */
@media print {
  .sidebar,
  .mobile-header,
  .quick-actions {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}