/*
 * 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.
 */

/* Import component styles */
@import "components.css";


/* Primary color palette for Fairview */
:root {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
}

/* Primary color utility classes */
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
.hover\:text-primary-700:hover { color: var(--color-primary-700); }
.active\:bg-primary-800:active { background-color: var(--color-primary-800); }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); }

/* Toast animations */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out;
}

/* Log entry animations and styles */
@keyframes log-entry-slide-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes log-entry-highlight {
  0% {
    background-color: #dbeafe; /* blue-100 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  }
  100% {
    background-color: #eff6ff; /* blue-50 */
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.log-entry-new {
  animation: log-entry-slide-in 0.3s ease-out,
             log-entry-highlight 0.5s ease-out;
}

/* Smooth transitions for age-based styling changes */
.log-entry {
  transition: opacity 0.5s ease-out, 
              background-color 0.5s ease-out,
              border-color 0.5s ease-out,
              box-shadow 0.5s ease-out;
}

/* Log container expansion animation */
.log-container-collapsed {
  max-height: 8rem;
  transition: max-height 0.3s ease-in-out;
}

.log-container-expanded {
  max-height: 24rem;
  transition: max-height 0.3s ease-in-out;
}