/* src/components/App/App.css */
.app-container {
  padding: var(--spacing-md) 4vw;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  height: 100vh;
}

.view-wrapper {
  display: flex;
  gap: var(--spacing-md);
  animation: fadeIn .3s ease;
  flex-direction: column;

  & .action-buttons {
    display: flex;
    gap: 1vw;
  }

  & .btn-secondary {
    background-color: #8b5cf6;

    &:hover {
      background-color: #7c3aed;
    }
  }

  & .back-btn {
    width: -moz-fit-content;
    width: fit-content;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(1vh);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.recharts-default-tooltip {
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  background-color: var(--bg-secondary) !important;
  border-radius: var(--border-radius) !important;
  border: none !important;
}

.recharts-tooltip-item {
  color: var(--text-primary) !important;
}

.custom-tooltip {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: 10px;
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;

  & .tooltip-label {
    color: var(--text-secondary);
    margin: 0 0 5px;
    font-size: .8rem;
  }

  & .tooltip-entry {
    color: var(--text-primary);
    margin-bottom: 2px;
    font-size: .9rem;

    & .tooltip-dot {
      margin-right: 8px;
    }
  }
}