@use "../../../styles/abstracts/variables" as *;
@use "../../../styles/abstracts/mixins" as *;

.checklist {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: all 0.3s ease;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;

    .headerText {
      h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #065f46; // Dark green
      }
      p {
        font-size: 0.95rem;
        color: #334d4d;
        margin-top: 0.3rem;
      }
    }

    button {
      background-color: #16a34a; // green
      color: #ffffff;
      font-weight: 600;
      border-radius: 8px;
      padding: 0.6rem 1.25rem;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);

      &:hover {
        background-color: #15803d;
        box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
      }
    }
  }

  .items {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .item {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      padding: 0.8rem 1rem;
      border-radius: 10px;
      background: #f7f9fa;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      }

      .todoText {
        font-weight: 500;
        font-size: 0.95rem;
        color: #065f46;
        word-break: break-word;
      }

      .statusDone {
        background: #d1fae5; // green bg
        color: #065f46;       // green text
        font-weight: 600;
        text-transform: capitalize;
        border-radius: 6px;
        padding: 0.25rem 0.8rem;
        font-size: 0.85rem;
        text-align: center;
      }

      .statusPending {
        background: #fef3f2; // red bg
        color: #b91c1c;       // red text
        font-weight: 600;
        text-transform: capitalize;
        border-radius: 6px;
        padding: 0.25rem 0.8rem;
        font-size: 0.85rem;
        text-align: center;
      }

      .buttons {
        display: flex;
        align-items: center;
        gap: 10px;

        .icon {
          cursor: pointer;
          transition: transform 0.2s ease;

          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  // Mobile responsiveness
  @media (max-width: 768px) {
    padding: 1.5rem;
    .header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
      button {
        width: 100%;
      }
    }

    .items {
      .item {
        grid-template-columns: 1fr auto auto;
        gap: 0.5rem;
      }
    }
  }

  @media (max-width: 480px) {
    padding: 1rem;
    .items {
      .item {
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
        .buttons {
          grid-column: 1 / -1;
          margin-top: 0.5rem;
        }
      }
    }
  }
}