.list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 60px;
    position: relative;
}

.message-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.message-body {
    font-size: 1rem;
    color: #555;
}

.message-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #888;
}


.placeholder-item {
    color: #aaa;
    font-style: italic;
}

@media (max-width: 768px) {
    .list-container {
        max-height: calc(100vh - 125px);
        overflow-y: scroll; /* Görgetés engedélyezése */
        scrollbar-width: none; /* Firefox: scrollbar eltüntetése */
        -ms-overflow-style: none; /* Internet Explorer 10+: scrollbar eltüntetése */
    }

        .list-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge: scrollbar eltüntetése */
        }

        .list-container .fab {
            right: 16px !important; /* Távolság a list-container jobb szélétől */
        }

    .fab {
        bottom: 86px !important;
    }

    .fab-text {
        display: none !important; /* Csak desktop nézetben jelenik meg */
    }
}

/*.list-container {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
}*/

.list-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    padding: 0.5rem 0; /* Csökkentett padding */
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center; /* Vízszintes középre igazítás */
    align-items: center; /* Függőleges középre igazítás */
    margin-bottom: 0px; /* Margó eltávolítása */
}

.list-container {
    /*margin-top: 60px; */
    margin-top: 0; /* Margó eltávolítása */
    padding-top: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    overflow-y: auto;
    /*    margin-bottom: 10px;*/
    /*max-height: calc(100vh - 60px);*/
}

.message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.5s ease-in-out;
}

.message-card:hover {
    background-color: #f0f8ff; /* Világoskék háttér hover esetén */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Árnyék hover esetén */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Simább animáció */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.message-timestamp {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
}


.message-status {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    min-width: 80px;
}

    .message-status.Open {
        background: #a8d5ba; /* Pasztell zöld */
        color: #2d6a4f; /* Sötétebb zöld szöveg */
    }

    .message-status.InProgress {
        background: #ffe5b4; /* Pasztell narancs */
        color: #b85c00; /* Sötétebb narancs szöveg */
    }

    .message-status.Closed {
        background: #f5b5b5; /* Pasztell piros */
        color: #8b0000; /* Sötétebb piros szöveg */
    }


.message-documents {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.material-icons {
    font-size: 20px;
    color: #888;
}

.document-actions {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 1rem;
}

.fab {
    position: fixed; /* A list-container-hez igazított pozíció */
    bottom: 16px; /* Távolság a képernyő aljától */
    width: auto;
    height: 56px;
    background-color: rgba(230, 230, 230);
    color: #555; /* Sötétszürke ikon */
    border: none;
    border-radius: 12px; /* Lekerekített négyzet */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Távolság az ikon és a szöveg között */
    font-size: 24px;
    cursor: pointer;
    z-index: 1000; /* Magas z-index, hogy más elemek fölött legyen */
    transition: background-color 0.3s ease;
    padding: 0 16px; /* Extra padding a szöveghez */
}

    .fab:hover {
        background-color: rgba(169, 169, 169, 0.8); /* Sötétebb szürke hover szín */
    }

    .fab i.material-icons {
        font-size: 24px;
    }

.fab-text {
    display: inline; /* Alapértelmezés szerint rejtve */
    font-size: 16px;
    color: #555;
}

/* Dinamikus vízszintes igazítás a list-container jobb széléhez */
.list-container .fab {
    right: 0px; /* Távolság a list-container jobb szélétől */
}