/**
 * Timestamp Converter Component Styles
 */

.timestamp-converter {
  @apply w-full;
}

/* Tab buttons */
.timestamp-converter .tab-btn {
  @apply transition-all duration-200;
}

.timestamp-converter .tab-btn:hover {
  @apply text-gray-700 dark:text-gray-200;
}

.timestamp-converter .tab-btn:active {
  @apply transform scale-95;
}

/* Input focus states */
.timestamp-converter input[type="text"]:focus,
.timestamp-converter input[type="date"]:focus,
.timestamp-converter input[type="time"]:focus,
.timestamp-converter select:focus {
  @apply outline-none ring-2 ring-blue-500 ring-opacity-50;
}

/* Button transitions */
.timestamp-converter button {
  @apply transition-all duration-200;
}

.timestamp-converter button:active {
  @apply transform scale-95;
}

/* Current timestamp display animation */
#current-timestamp-value {
  @apply transition-all duration-300;
}

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

#current-timestamp-value {
  animation: pulse 2s ease-in-out infinite;
}

/* Scrollbar styling for history */
#conversion-history {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#conversion-history::-webkit-scrollbar {
  width: 8px;
}

#conversion-history::-webkit-scrollbar-track {
  @apply bg-transparent;
}

#conversion-history::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

#conversion-history::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

/* Select dropdown styling */
.timestamp-converter select {
  @apply cursor-pointer;
  padding-right: 2.5rem;
}

/* Results animation */
#conversion-results > div {
  animation: fadeInUp 0.3s ease-out;
}

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

/* Copy button success state */
.timestamp-converter button.copied {
  @apply bg-green-700;
}

/* Gradient background animation */
.timestamp-converter .bg-gradient-to-r {
  background-size: 200% 100%;
  transition: background-position 0.3s ease;
}

.timestamp-converter .bg-gradient-to-r:hover {
  background-position: right center;
}

/* Use cases grid hover effect */
.timestamp-converter .grid > div {
  @apply transition-transform duration-200;
}

.timestamp-converter .grid > div:hover {
  @apply transform scale-105;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .timestamp-converter .grid-cols-1.lg\\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #current-timestamp-value {
    @apply text-3xl;
  }

  .timestamp-converter .text-5xl {
    @apply text-3xl;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .timestamp-converter button {
    border-width: 2px;
  }

  .timestamp-converter .tab-btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .timestamp-converter * {
    transition: none;
    animation: none !important;
  }
}

/* Dark mode specific adjustments */
.dark .timestamp-converter select {
  @apply bg-gray-700 text-white;
}

.dark .timestamp-converter input[type="date"],
.dark .timestamp-converter input[type="time"] {
  @apply bg-gray-700 text-white;
  color-scheme: dark;
}

/* Focus visible for keyboard navigation */
.timestamp-converter *:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-800;
}

/* Smooth transitions for all interactive elements */
.timestamp-converter input,
.timestamp-converter select,
.timestamp-converter button {
  @apply transition-all duration-200 ease-in-out;
}

/* Loading state indicators */
.timestamp-converter button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* History item hover effect */
#conversion-history > div {
  @apply transition-all duration-200;
}

#conversion-history > div:hover {
  @apply transform scale-[1.02] shadow-sm;
}

/* Format display boxes */
.timestamp-converter .bg-gray-50 {
  @apply transition-all duration-200;
}

.timestamp-converter .bg-gray-50:hover {
  @apply bg-gray-100 dark:bg-gray-800;
}

/* Copy button hover effect */
.timestamp-converter .copy-format-btn,
.timestamp-converter .copy-result-btn {
  @apply transition-all duration-200;
}

.timestamp-converter .copy-format-btn:hover,
.timestamp-converter .copy-result-btn:hover {
  @apply transform scale-105 shadow-md;
}

/* Tab content fade in */
.tab-content {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Prevent text selection on buttons */
.timestamp-converter button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* Monospace font for timestamps */
.timestamp-converter .font-mono {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}