/* General Reset */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Poppins', sans-serif;
       background-color: #f8f9fa;
       /* Light Gray */
       color: #333;
       /* Dark Gray */
       line-height: 1.6;
   }

   .container {
       max-width: 1200px;
       margin: 20px auto;
       padding: 10px;
   }

   /* Header */
   header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: #2c3e50;
       /* Dark Blue */
       color: #f5f5f5;
       /* White */
       padding: 15px;
       border-radius: 8px;
   }

   header h1 {
       font-size: 1.8rem;
       font-weight: bold;
   }

   #addTaskBtn {
       background-color: #f1c40f;
       /* Gold */
       color: #2c3e50;
       /* Dark Blue */
       border: none;
       padding: 10px 20px;
       border-radius: 5px;
       cursor: pointer;
       font-weight: bold;
       font-size: 1rem;
   }

   #addTaskBtn:hover {
       background-color: #f9e79f;
       /* Light Gold */
   }

   /* Form Section */
   #taskFormContainer {
       background-color: #fff;
       /* White */
       border-radius: 10px;
       padding: 20px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       margin: 20px 0;
   }

   #taskFormContainer.hidden {
       display: none;
   }

   form h2 {
       margin-bottom: 15px;
       color: #2c3e50;
       /* Dark Blue */
   }

   label {
       display: block;
       font-weight: 600;
       margin-top: 10px;
   }

   input,
   select,
   textarea,
   button {
       width: 100%;
       padding: 10px;
       margin-top: 5px;
       border: 1px solid #dcdcdc;
       /* Light Gray */
       border-radius: 5px;
       font-size: 0.9rem;
   }

   textarea {
       resize: none;
       height: 80px;
   }

   button[type="submit"] {
       background-color: #2c3e50;
       /* Dark Blue */
       color: #fff;
       /* White */
       font-weight: bold;
       border: none;
       margin-top: 15px;
   }

   button[type="submit"]:hover {
       background-color: #34495e;
       /* Slightly lighter Dark Blue */
   }

   button[type="button"] {
       background-color: #f8f9fa;
       /* Light Gray */
       color: #333;
       /* Dark Gray */
       border: 1px solid #ccc;
       font-weight: bold;
   }

   /* Filters */
   .filters {
       text-align: center;
       margin: 20px 0;
       display: flex;
   }

   .filters button {
       margin: 5px;
       padding: 10px 25px;
       border: none;
       border-radius: 30px;
       background-color: #2c3e50;
       /* Dark Blue */
       color: white;
       cursor: pointer;
       font-size: 0.9rem;
       font-weight: bold;
   }

   .filters button:hover {
       background-color: #34495e;
       /* Slightly lighter Dark Blue */
   }

   .filters button.active {
       background-color: #f1c40f;
       /* Gold */
       color: #2c3e50;
       /* Dark Blue */
   }

   /* Task List */
   #taskList {
       margin-top: 30px;
       background-color: #fff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }



   #tasksContainer {
       display: grid;
       /* Use grid to create the card layout */
       grid-template-columns: repeat(3, 1fr);
       /* 3 cards per row */
       gap: 20px;
       /* border: 0.5PX SOLID #b46868; */
       margin: 10px 20px;
       /* Gap between cards */
   }

   .task {
       background-color: #fff;
       padding: 15px;
       border-radius: 10px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease, opacity 0.3s ease;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .task button {
       margin-left: 5px;
       padding: 8px 12px;
       border: none;
       border-radius: 20px;
       cursor: pointer;
       font-weight: bold;
       font-size: 0.85rem;
   }

   .task button:hover {
       opacity: 0.9;
   }

   .task button:nth-child(1) {
       background-color: #f1c40f;
       /* Gold */
       color: #2c3e50;
       /* Dark Blue */
   }

   .task button:nth-child(2) {
       background-color: #27ae60;
       /* Green */
       color: white;
   }

   .task button:nth-child(3) {
       background-color: #e74c3c;
       /* Red */
       color: white;
   }

   /* Responsive Design */

   @media (max-width: 1024px) {
       #tasksContainer {
           grid-template-columns: repeat(2, 1fr);
           /* 2 cards per row on smaller laptops */
       }
   }

   @media (max-width: 768px) {
       header h1 {
           font-size: 1.4rem;
       }

       #addTaskBtn {
           font-size: 0.85rem;
           padding: 8px 15px;
       }

       .task {
           flex-direction: column;
           align-items: flex-start;
       }

       .task div {
           margin-bottom: 10px;
       }

       .filters button {
           padding: 8px 15px;
           font-size: 0.8rem;
       }

       #tasksContainer {
           grid-template-columns: 1fr;
           /* 1 card per row on tablets or smaller screens */
       }
   }

   @media (max-width: 480px) {
       .container {
           width: 95%;
       }

       .task {
           font-size: 0.9rem;
           /* Reduce font size on small screens */
       }

       .task button {
           font-size: 0.8rem;
           /* Smaller buttons on small screens */
       }
   }

   /* Status Summary Box
.status-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  
  .status-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 30%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .status-box h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
  }
  
  .status-box p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f1c40f;
  }
  
  /* Progress Bars 
  #statusProgress {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
  }
  
  .progress-bar {
    margin-bottom: 15px;
  }
  
  progress {
    width: 100%;
    height: 20px;
    border-radius: 5px;
  }
  
  progress::-webkit-progress-bar {
    background-color: #f0f0f0;
  }
  
  progress::-webkit-progress-value {
    border-radius: 5px;
  }
  
  progress#pendingProgress::-webkit-progress-value {
    background-color: #f1c40f;
  }
  
  progress#completedProgress::-webkit-progress-value {
    background-color: #27ae60;
  }
  
  progress#delayedProgress::-webkit-progress-value {
    background-color: #e74c3c;
  }
  
  label {
    font-weight: bold;
    color: #2c3e50;
  }
  
  /* Task List Styles 
  #taskList {
    margin-top: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  #taskList ul {
    list-style-type: none;
    padding: 0;
  }
  
  #taskList li {
    margin-bottom: 10px;
    font-size: 1rem;
  }
  
  #taskList button {
    margin-left: 10px;
    padding: 5px 10px;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #taskList button:hover {
    background-color: #2980b9;
  }
  
  /* Responsive Design 
  @media (max-width: 768px) {
    .status-summary {
      flex-direction: column;
      align-items: center;
    }
  
    .status-box {
      width: 80%;
      margin-bottom: 15px;
    }
  
    #taskList ul {
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  @media (max-width: 480px) {
    .status-box h3 {
      font-size: 1rem;
    }
  
    .status-box p {
      font-size: 1.2rem;
    }
  
    progress {
      height: 15px;
    }
  
    #taskList li {
      font-size: 0.9rem;
    }
  
    #taskList button {
      padding: 3px 8px;
      font-size: 0.9rem;
    }
  }   */

   /* Status Summary Box */
   .status-summary {
       display: flex;
       justify-content: space-between;
       margin-bottom: 20px;
       flex-wrap: wrap;
   }

   .status-box {
       background-color: #fff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       width: 30%;
       text-align: center;
       margin-bottom: 20px;
   }

   .status-box h3 {
       font-size: 1.2rem;
       color: #2c3e50;
       margin-bottom: 10px;
   }

   .status-box p {
       font-size: 1.5rem;
       font-weight: bold;
       color: #f1c40f;
   }

   #pendingText,
   #completedText,
   #delayedText {
       font-size: 1rem;
       color: #7f8c8d;
       margin-top: 10px;
   }

   /* Progress Bars */
   #statusProgress {
       background-color: #fff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       margin-top: 30px;
   }

   .progress-bar {
       margin-bottom: 15px;
   }

   progress {
       width: 100%;
       height: 20px;
       border-radius: 5px;
   }

   progress::-webkit-progress-bar {
       background-color: #f0f0f0;
   }

   progress::-webkit-progress-value {
       border-radius: 5px;
   }

   progress#pendingProgress::-webkit-progress-value {
       background-color: #f1c40f;
   }

   progress#completedProgress::-webkit-progress-value {
       background-color: #27ae60;
   }

   progress#delayedProgress::-webkit-progress-value {
       background-color: #e74c3c;
   }

   label {
       font-weight: bold;
       color: #2c3e50;
   }

   /* Task List Styles */
   #taskList {
       margin-top: 30px;
       background-color: #fff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   #taskList ul {
       list-style-type: none;
       padding: 0;
   }

   #taskList li {
       margin-bottom: 10px;
       font-size: 1rem;
   }

   #taskList button {
       margin-left: 10px;
       padding: 5px 10px;
       border: none;
       background-color: #3498db;
       color: white;
       border-radius: 5px;
       cursor: pointer;
   }

   #taskList button:hover {
       background-color: #2980b9;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .status-summary {
           flex-direction: column;
           align-items: center;
       }

       .status-box {
           width: 80%;
           margin-bottom: 15px;
       }

       #taskList ul {
           margin-left: 0;
           margin-right: 0;
       }
   }

   @media (max-width: 480px) {
       .status-box h3 {
           font-size: 1rem;
       }

       .status-box p {
           font-size: 1.2rem;
       }

       progress {
           height: 15px;
       }

       #taskList li {
           font-size: 0.9rem;
       }

       #taskList button {
           padding: 3px 8px;
           font-size: 0.9rem;
       }
   }