/* SIMPelv2 Shared Styles - Main Entry Point */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Import FontAwesome Icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Import design system in dependency order */
@import url('variables.css');    /* CSS Custom Properties */
@import url('base.css');        /* Reset & Base Styles */
@import url('layout.css');      /* Layout Components */
@import url('components.css');  /* UI Components */
@import url('utilities.css');   /* Utility Classes */

.gradient-text {
  background: linear-gradient(135deg, var(--color-theme-600), var(--color-theme-800));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 5px var(--color-theme-500); }
  to { box-shadow: 0 0 20px var(--color-theme-500), 0 0 30px var(--color-theme-500); }
}

/* Scroll behavior */
html {
  scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--color-theme-400), var(--color-theme-600));
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--color-theme-500), var(--color-theme-700));
}

/* Selection styles */
::selection {
  background: var(--color-theme-200);
  color: var(--color-theme-900);
}

::-moz-selection {
  background: var(--color-theme-200);
  color: var(--color-theme-900);
}

/* Focus visible */
.focus-visible {
  outline: 2px solid var(--color-theme-500);
  outline-offset: 2px;
}

/* Theme-aware classes */
.theme-bg-primary {
  background-color: var(--color-theme-600);
}

.theme-bg-secondary {
  background-color: var(--color-theme-100);
}

.theme-text-primary {
  color: var(--color-theme-600);
}

.theme-text-secondary {
  color: var(--color-theme-500);
}

.theme-border {
  border-color: var(--color-theme-300);
}

/* Status indicators */
.status-active {
  color: var(--color-success-600);
}

.status-inactive {
  color: var(--color-gray-500);
}

.status-pending {
  color: var(--color-warning-600);
}

.status-error {
  color: var(--color-error-600);
}

/* Priority indicators */
.priority-high {
  color: var(--color-error-600);
  background-color: var(--color-error-50);
}

.priority-medium {
  color: var(--color-warning-600);
  background-color: var(--color-warning-50);
}

.priority-low {
  color: var(--color-success-600);
  background-color: var(--color-success-50);
}

/* Progress indicators */
.progress {
  width: 100%;
  height: 8px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-theme-500), var(--color-theme-600));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.progress-bar.animated {
  background-size: 20px 20px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  animation: progress-animation 1s linear infinite;
}

@keyframes progress-animation {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

/* Layout utilities */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-40);
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-30);
}

.full-height {
  min-height: 100vh;
}

.content-height {
  min-height: calc(100vh - 64px); /* Subtract header height */
}

/* Interactive states */
.interactive {
  cursor: pointer;
  transition: var(--transition-all);
}

.interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* Image utilities */
.image-cover {
  object-fit: cover;
  object-position: center;
}

.image-contain {
  object-fit: contain;
  object-position: center;
}

.avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; }

/* Accessibility helpers */
.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-50);
  background: transparent;
  pointer-events: none;
}

/* Error states */
.error-boundary {
  padding: var(--space-8);
  text-align: center;
  background: var(--color-error-50);
  border: 2px dashed var(--color-error-300);
  border-radius: var(--radius-lg);
  color: var(--color-error-700);
}

.error-icon {
  font-size: 3rem;
  color: var(--color-error-500);
  margin-bottom: var(--space-4);
}

/* Empty states */
.empty-state {
  padding: var(--space-12);
  text-align: center;
  color: var(--color-gray-500);
}

.empty-icon {
  font-size: 4rem;
  color: var(--color-gray-300);
  margin-bottom: var(--space-4);
}

/* Notification styles */
.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--color-error-500);
  border-radius: var(--radius-full);
  border: 2px solid white;
  animation: pulse 2s infinite;
}

/* Card variations */
.card-elevated {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-interactive {
  cursor: pointer;
  transition: var(--transition-all);
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-selected {
  border-color: var(--color-theme-500);
  box-shadow: 0 0 0 1px var(--color-theme-500);
}

/* List styles */
.list-divider {
  border-bottom: 1px solid var(--color-gray-200);
}

.list-divider:last-child {
  border-bottom: none;
}

.list-item {
  padding: var(--space-4);
  transition: var(--transition-colors);
}

.list-item:hover {
  background-color: var(--color-gray-50);
}

.list-item.selected {
  background-color: var(--color-theme-50);
  border-left: 4px solid var(--color-theme-500);
}

/* Custom checkbox and radio styles */
.custom-checkbox,
.custom-radio {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  background: white;
  cursor: pointer;
  transition: var(--transition-all);
}

.custom-checkbox {
  border-radius: var(--radius);
}

.custom-radio {
  border-radius: var(--radius-full);
}

.custom-checkbox:checked,
.custom-radio:checked {
  background: var(--color-theme-600);
  border-color: var(--color-theme-600);
}

.custom-checkbox:checked::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.custom-radio:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: var(--radius-full);
  margin: 4px;
}