/* Style specyficzne dla wtyczki My ToDo List */
.task-item {
    background-color: #f9f9f9;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Styl dla wersji webowej */
.task-main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-title {
    flex-grow: 1;
}

.task-date {
    margin-right: 20px; /* Możesz dostosować */
}

.task-buttons {
    display: flex;
    align-items: center;
}

/* Styl dla wersji mobilnej */
@media (max-width: 768px) {
    .task-main-container {
        flex-wrap: wrap; /* Pozwala zawijanie elementów */
        align-items: center;
    }

    .task-title {
        flex-basis: auto; /* Zajmuje tyle miejsca ile potrzebuje */
        flex-grow: 1; /* Rozciąga się, aby zająć wolne miejsce */
    }

   .task-date {
        flex-basis: 100%; /* Zajmuje całą szerokość kontenera */
        order: 3; /* Umieszcza datę pod tytułem i przyciskami */
        margin-top: -3px; /* Zmniejszony odstęp od górnych elementów */
		opacity: 0.3;
    }

    .task-buttons {
        order: 2; /* Umieszcza przyciski po prawej stronie nazwy zadania */
    }

    .task-description {
        order: 4; /* Opis zadania jest ostatni */
        flex-basis: 100%; /* Zajmuje całą szerokość kontenera */
    }
}