/* Styles for dashboard elements */

/* Chart Containers */
.chart-container {
  position: relative;
  width: 100%;
  height: 400px;
  min-height: 400px;
  max-height: 400px;
  margin-bottom: 1rem;
}

.small-chart-container {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
  position: relative;
}

.monthly-chart-container {
  height: 25%; /* Reduced height to half */
}

.category-chart-container {
  height: 300%; /* Increased height to twice */
}

/* Card Styles */
.card-body {
  padding: 1.25rem; /* Standard Bootstrap padding */
}

.card-body canvas {
  width: 100% !important;
  height: 100% !important;
}

.metric-card {
  transition: transform 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
}

/* Buttons */
.fixed-width-button {
  min-width: 350px; /* Adjust this value to fit your longest expected text */
}

/* Tooltips */
.tooltip-inner {
  background-color: #f0bc74; /* Semi-transparent black */
  color: black; /* Black text */
  padding: 5px 10px; /* Smaller padding */
  font-size: 0.75rem; /* Slightly smaller font */
  border-radius: 10px; /* Softer rounded edges */
}

.tooltip-arrow {
  display: none; /* Hide the arrow for subtlety */
}

/* Text Colors */
.text-black {
  color: black;
}

.text-orange {
  color: orange;
}

/* Input Group */
.input-group-width {
  max-width: 350px;
  margin-right: 0.5rem; /* Adjust margin as needed */
}

/* Progress Bar */
.progress-bar-width {
  width: 100%; /* Default width, can be adjusted dynamically */
}