ion-content {
  --background: #f0f0f5;

  .empty-tasks {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
  }

  ion-list {
    margin: 20px;

    ion-item {
      --background: #ffffff;
      --border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      height: 100px; /* Increased height for better touch area */
      align-items: center; /* Center content vertically */
      display: flex; /* Use flexbox for vertical alignment */
      font-size: 18px;

      .edit-button, .save-button {
        font-size: 24px;
      }

      .time-label, .content-label, .content-input, .time-input {
        flex: 1; /* Ensure content takes up available space */
        text-align: center; /* Center text horizontally */
      }

      .time-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1; /* Ensure the time-edit div takes up available space */
        font-size: 18px;

        ion-input {
          max-width: 50px;
          margin: 0 5px;
          text-align: center;
          --padding-start: 0;
          --padding-end: 0;
          --border: none; /* Remove underline */
        }

        span {
          margin: 0 5px;
        }
      }
    }
  }

  .delete-button {
    width: 100px; /* Increased width for better touch area */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure button height matches item height */
  }

  ion-fab {
    margin-bottom: 20px;

    ion-fab-button {
      --background: #3880ff;
      --color: white;
    }
  }
}
