/* cards.css */

/* General Card Styling */
.card {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light);
  transition: transform 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
}

/* Card Headers */
.card header h2 {
  font-size: var(--font-size-large);
  font-weight: 600;
}
.card header button {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Tasks Card */
#tasks-card .stats {
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-sm);
}
#tasks-card .graph {
  border-radius: var(--radius-sm);
  background: transparent;
}

/* Notes Card */
#notes-card .stats {
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-sm);
}
#notes-card .graph {
  border-radius: var(--radius-sm);
  background: transparent;
}

/* Pomodoro Card */
#pomodoro-card .stats {
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-sm);
}
#pomodoro-card .graph {
  border-radius: var(--radius-sm);
  background: transparent;
}
#pomodoro-card .timer-controls button {
  background-color: var(--color-primary);
  color: #fff;
}

/* Activity Card */
#activity-card .calendar div {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  text-align: center;
  line-height: 30px;
  font-size: var(--font-size-small);
}
#activity-card .calendar .active {
  background-color: var(--color-active);
  color: #fff;
}
#activity-card .calendar .inactive {
  background-color: var(--color-inactive);
  color: #fff;
}

/* Graphs Card */
#weekly-chart,
#monthly-chart,
#ratio-chart {
  background-color: var(--card-bg-light);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
}

/* Weather Card */
#weather-card {
  text-align: center;
  font-size: var(--font-size-small);
}

/* GitHub Card */
#github-card {
  font-size: var(--font-size-small);
}

/* Codeforces Card */
#codeforces-card {
  font-size: var(--font-size-small);
}

/* LeetCode Card */
#leetcode-card {
  font-size: var(--font-size-small);
}

/* LinkedIn Card */
#linkedin-card {
  font-size: var(--font-size-small);
}

/* Quote Card */
#quote-card {
  font-style: italic;
  text-align: center;
}

/* Quicklinks Card */
#quicklinks-card a {
  background-color: var(--card-bg-light);
  color: var(--color-light-text);
  text-decoration: none;
}
#quicklinks-card a:hover {
  background-color: var(--color-secondary);
  color: #fff;
}

/* Theme Card */
#theme-card button {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}