/* Custom CSS for the SelfTracker */

/* Custom theme variables */
:root {
  --primary-color: var(--bs-primary);
  --secondary-color: var(--bs-secondary);
  --dashboard-bg: var(--bs-dark);
  --card-bg: var(--bs-gray-800);
}

/* Card styling */
.metric-card {
  transition: transform 0.2s ease-in-out;
  height: 100%;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Chart containers */
.chart-container {
  height: 300px;
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Dashboard widgets */
.stats-widget {
  background-color: var(--card-bg);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Metrics with due dates */
.due-metric {
  border-left: 4px solid var(--bs-warning);
}

/* Range input styling for scale metrics */
input[type="range"] {
  width: 100%;
}

/* Custom styling for the range value display */
#range-value {
  font-size: 1.2rem;
  width: 3rem;
  display: inline-block;
  text-align: center;
}

/* Form section styling */
.form-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: var(--card-bg);
}

/* Backup and restore section */
.backup-section {
  border-left: 4px solid var(--bs-info);
}

/* Value trends indicators */
.trend-up {
  color: var(--bs-success);
}

.trend-down {
  color: var(--bs-danger);
}

.trend-neutral {
  color: var(--bs-warning);
}

/* Make height of category and metric cards consistent */
.admin-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-card .card-body {
  flex: 1 0 auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chart-container {
    height: 250px;
  }
  
  .stats-widget {
    padding: 0.75rem;
  }
}