/* public/css/components/empty-state.css */

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

.empty-state h3 {
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.empty-state p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .empty-state {
    padding: 50px 20px;
  }

  .empty-state h3 {
    font-size: 1.375rem;
  }
}

@media (max-width: 768px) {
  .empty-state {
    padding: 40px 15px;
  }

  .empty-state h3 {
    font-size: 1.25rem;
  }

  .empty-state p {
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {
  .empty-state {
    padding: 30px 12px;
    font-size: 1rem;
  }

  .empty-state h3 {
    font-size: 1.125rem;
  }

  .empty-state p {
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
  }
}