body {
    background-color: #f4f7f9;
    font-family: 'Poppins', sans-serif;
  }
  
  .card {
    border: none;
    border-radius: 12px;
  }
  
  .task-card {
    border-left: 5px solid transparent;
    transition: background 0.3s;
  }
  
  .task-card.completed {
    background-color: #d4edda;
    border-left-color: #28a745;
  }
  
  .task-card.in-progress {
    background-color: #fff3cd;
    border-left-color: #ffc107;
  }
  
  .type-badge {
    text-transform: capitalize;
    padding: 0.35em 0.6em;
    font-size: 0.75rem;
  }
  
  .bg-work {
    background-color: #0d6efd !important;
    color: white;
  }
  
  .bg-personal {
    background-color: #198754 !important;
    color: white;
  }
  
  .bg-shopping {
    background-color: #ffc107 !important;
    color: black;
  }
  
  .bg-other {
    background-color: #6c757d !important;
    color: white;
  }
  
  .chart-container {
    position: relative;
    width: 100%;
    height: 100%;
  }