/*
Nom de fichier : tableau_medias.css
Version : 3.0.1
Projet : Pégase
Auteur  : Samuel Bocharel
Contributeur : Nicolas Chevallier
Description : Tableau des médias
Date    : 02/04/2025
*/


/* masquer un élément tout en le gardant accessible aux lecteurs d’écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* conteneur de la table */
.media-tab-container {

}

/* gestion des bordures */
.media-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0; 
    border-radius: 12px; 
    border: 1px solid var(--Gray-200, #D5D9EB);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    position: relative !important;
    overflow: hidden;
}

/* Cas particulier pour la bordure entre la pagination et les en-têtes de colonne */
.media-table thead tr:last-child th {
    border-top: 1px solid #D5D9EB;
}

/* fixer l'en-tête quand on scroll */
/* .media-tab-container table.media-table thead th, */
.media-tab-container table.media-table thead {
    position: sticky;    
    top: 0;
    background-color: #fff;  
    z-index: 1; 
}


.media-table th:not(:last-child) {
    cursor: pointer;
    user-select: none;
}

.media-table th:not(:last-child):hover {
    color: #000000;
    font-family: Marianne-Bold, sans-serif; 
}


/* personnalisation des largeurs de colonnes en fonction de la taille des contenus attendus */
.media-table td:nth-child(3) {
    width: 120px;
}

.media-table td:nth-child(6) {
    width: 88px;
} 

.media-table td:nth-child(5), .media-table th:nth-child(5) {
    max-width: 250px;
}


/* .media-table td:nth-child(3), .media-table th:nth-child(3) {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}

.media-table td:nth-child(4), .media-table th:nth-child(4) {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}

.media-table td:nth-child(6), .media-table th:nth-child(6) {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
}

.media-table td:nth-child(1), .media-table th:nth-child(1) {
    width: calc((100% - 243px) * 0.3); 
}

.media-table td:nth-child(2), .media-table th:nth-child(2) {
    width: calc((100% - 243px) * 0.3); 
}

.media-table td:nth-child(5), .media-table th:nth-child(5) {
    width: calc((100% - 243px) * 0.4); 
    max-width: 250px; 
} */


/* propriétés générales des cellules */
.media-table th, .media-table td {
    padding: 10px;
    text-align: left;
    font-weight: 500;
    font-family: Marianne-Regular, sans-serif;
    font-size: 12px;
}

.media-table td {
    vertical-align: top;
}

.media-table tbody td:empty::before,
.media-table tbody td div:not(.badge-svg-chevron-up):empty::before {
    content: '-';
}

/* ajout d'un conteneur intermédiaire td-media-container pour réorganiser les 3 élements (image, nom et ype) comme sur Figma */
.td-media-container {
    display: flex;
    align-items: flex-start;
}

.td-media-container table {
    width: 100%;
}

/* mise type du nom et du type */
.media-name {
    color: var(--Gray-900, #1F2647);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.media-type {
    color: var(--Gray-600, #49528E);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

/* ajout d'un conteneur intermédiaire td-badge-container pour les badges car passer un td en flex pose des problèmes d'homogénéité des hauteurs de td sur une tr */
.media-table td div.td-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap:8px;
}

/* pointeur de souris sur les badges pour déployer ou masquer les badges de parcours */
.media-table td div.td-badge-container .badge-spec-gris {
    cursor: pointer;
} 

.media-table th {
    background-color: #ffffff;
}

.media-table tfoot td {
    background-color: #ffffff;
}

/* ajustement spécifique pour que la flèche SVG de tri ne se positionne pas sous le texte mais à côté */
.media-table th .td-media-container {
    display: flex;
    gap: 12px;
}

.media-table th .media-list-caption-icon svg {
    vertical-align: middle;
}

/* on met un arriere plan gris une tr sur 2 pour plus de lisibilité globale */
.media-table tbody tr:nth-child(odd) td {
    background-color: var(--Gray-25, #F7F9FC);
}

.media-table tbody tr:nth-child(even) td {
    background-color: #ffffff;
}


/* on opacifie légèrement le Gray-100, #EAECF5 car sinon on ne voit plus le contour des boutons qui sont du même gris */
.media-table tbody tr:hover td {
    /* background-color: rgba(234, 236, 245, 0.65); */
    /* background-color: #eaecf5a6; */
    background-color: #F1F3F8;
}

/* graisse particulière appliquée, dans ce tableau, aux boutons précédent et suivant par rapport au standard de figma_buttons.css */
tfoot button[class*="buttons-button"] {
    font-weight: 700;
}

/* police des boutons */
.media-table button {
    font-family: Marianne-Regular;
    font-size: 14px;
}

/* buttons action */
.media-list-item-actions {
    display: inline-flex; /* PEUT ETRE PASSER EN FLEX */
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.media-list-actions-edit, .media-list-actions-delete {
    width: 40px;
    height: 40px;
    line-height: 48px;
    border-radius: 8px;
    background: #EAECF5;
    text-align: center;
}

/* Style pour la thumbnail fichier */
.media-list-item-thumbnail {
    margin-right: 12px;
    /* max-height: 40px;
    max-width: 60px; */
    object-fit: contain; /* Cela garantit que l'image s'adapte sans être déformée */
    border-radius: 4px;
    width: 44px;
    max-height: 100px;
    display: inline-block;
}

/* .media-list-item-thumbnail.svg-image {
  align-items: center;
  width: 42px;
  height: 42px; 
  border-radius: 50%;
  box-shadow: var(--focusrings-ring-brand-shadow-xs-box-shadow);
  padding: 0;
} */


.media-list-item-thumbnail svg {
    /* position: relative;
    top: 1px; */
    cursor: pointer;
    /* border-radius: 25px;
    box-shadow: var( --focusrings-ring-brand-shadow-xs-box-shadow, 0px 0px 0px 4px rgba(52, 185, 180, 0.24), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) ) !important; */
}



.td-media-container {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

/* Style pour la pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.page-numbers {
    display: flex;
    justify-content: center;
    flex-grow: 1; /* Centre les numéros de page */
}

.page-numbers button {
    margin: 2px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    /* background: #EAECF5; */
    background-color: #FFFFFF !important;
    color: var(--Gray-600, #49528E);
    text-align: center;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.page-summary {
    display: none;
  }

.page-numbers button:hover {
    background-color: #d5d9eb !important;
}

.page-numbers button.active {
    background: #49528E; /* Couleur différente */
    background-color: var(--Gray-50, #F1F3F8) !important;    
    color: var(--Gray-600, #49528E);
}

/* style du bouton de tri par nom de fichier */
.media-list-caption-icon {
    cursor: pointer;
}

/* elements pour media queries */
/* affichage / masquage des colonnes */
@media screen and (max-width: 930px) {
    .media-table td:nth-child(3), .media-table th:nth-child(3),
    .media-table td:nth-child(5), .media-table th:nth-child(5)
     {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .media-table td:nth-child(2), .media-table th:nth-child(2),
    .media-table td:nth-child(4), .media-table th:nth-child(4)
     {
        display: none;
    }
}

/* boutons précédent / suivant */
@media screen and (max-width: 600px) {
    .pagination button span {
        display: none;
    }
}

/* marges TPE */
@media screen and (max-width: 360px) {
    .media-tab-container {
    margin-left: 10px;
    margin-right: 10px;
    margin-left: 0px;
    margin-right: 0px;
    }
}