/* Styles pour la section de téléversement des documents */
.upload-container {
    margin: 20px 0;
}

.upload-container table {
    width: 100%;
    border-collapse: collapse;
}

.upload-container th, .upload-container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.upload-container th {
    background-color: #f2f2f2;
}

/* Styles pour les documents obligatoires et optionnels */
.required-document {
    background-color: #fef2f2 !important;
}

.optional-document {
    background-color: #f9fafb !important;
}

.required-indicator {
    color: #dc2626;
    font-weight: bold;
    margin-left: 5px;
}

.optional-indicator {
    color: #6b7280;
    font-style: italic;
    margin-left: 5px;
    font-size: 0.9em;
}

.material-icons {
    font-size: 30px;
}

.upload-btn {
    background-color: #4664b2; /* Couleur du bouton */
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.delete-btn {
    background-color: red; /* Couleur pour le bouton de suppression */
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.notification {
    margin-top: 10px;
    color: green;
}

.progress-bar-container {
    margin: 10px 0;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 10px;
    width: 0%;
    background-color: #4664b2; /* Couleur de la barre de progression */
    transition: width 0.5s ease;
}

.upload-complete-message {
    color: green;
    font-weight: bold;
}

/* Mobile responsiveness for upload section */
@media (max-width: 768px) {
    .upload-container table {
        display: block;
        overflow-x: auto; /* Allow horizontal scroll */
    }

    .upload-container th, 
    .upload-container td {
        padding: 8px;
        font-size: 0.9rem;
    }

    .upload-btn,
    .delete-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .material-icons {
        font-size: 24px; /* Smaller icons on mobile */
    }
}
