/* Notes Card */
.notes-card {
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .notes-card .note-item,
    .notes-list .note-item,
    #myMessagesContainer .note-item {
        border-bottom: 1px solid #e0e0e0;
        padding: 1.5rem 0;
    }

        .notes-card .note-item:last-child {
            border-bottom: none;
        }

        /* Rejection note styling */
        .notes-card .note-item.note-rejection {
            background-color: #ffe5e5;
            border-left: 4px solid #dc3545;
            padding: 1.5rem;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
        }

            .notes-card .note-item.note-rejection:last-child {
                border-bottom: none;
            }

    .notes-card .profile-pic,
    .notes-list .profile-pic,
    #myMessagesContainer .profile-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .notes-card .rejection-icon,
        .notes-list .rejection-icon,
        #myMessagesContainer .rejection-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        border: 2px solid #dc3545;
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    }

        .notes-card .rejection-icon i {
            font-size: 1.25rem;
        }

    .notes-card .note-header,
    .notes-list .note-header,
    #myMessagesContainer .note-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }

/* View button shown on hover for note items */
/* support notes rendered inside .notes-list or #myMessagesContainer as well as .notes-card */
.notes-card#dashboard-notes-card .note-item,
.notes-list .note-item,
#myMessagesContainer .note-item { position: relative; }
.notes-card#dashboard-notes-card .note-view-btn,
.notes-list .note-view-btn,
#myMessagesContainer .note-view-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: none;
}
.notes-card#dashboard-notes-card .note-item:hover .note-view-btn,
.notes-list .note-item:hover .note-view-btn,
#myMessagesContainer .note-item:hover .note-view-btn { display: inline-flex; }

    .notes-card .user-info {
        flex-grow: 1;
    }

    .notes-card .file-attachments-container,
    .notes-list .file-attachments-container,
    #myMessagesContainer .file-attachments-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
    }

    .notes-card .file-attachment-card,
    .notes-list .file-attachment-card,
    #myMessagesContainer .file-attachment-card {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        text-decoration: none;
        color: #495057;
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        width: fit-content;
    }

        .notes-card .file-attachment-card:hover {
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }



.task-description .file-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
    color: #6c757d;
}

.task-description .file-name {
    font-size: 0.9rem;
    font-weight: 500;
}

    .notes-card .file-icon,
    .notes-list .file-icon,
    #myMessagesContainer .file-icon {
        font-size: 1.5rem;
        margin-right: 0.75rem;
        color: #6c757d;
    }

    .notes-card .file-name,
    .notes-list .file-name,
    #myMessagesContainer .file-name {
        font-size: 0.9rem;
        font-weight: 500;
    }

.card-header {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}