/* =============================================================================
   Documents requis - carte d'une piece, bouton d'acces, fenetre de depot
   -----------------------------------------------------------------------------
   Les trois composants d'origine portaient chacun un bloc <style>, ou une chaine
   de style construite en C# pour le bouton. Seules les couleurs changent ici,
   des variables --mud-palette-* (le violet du theme d'origine) vers les tokens
   de la marque active.
   ============================================================================= */


/* =============================================================================
   MyRequiredDocument
   ============================================================================= */

.my-required-document .mud-icon-button {
    border: none;
    background: transparent;
}

.my-required-document .mud-icon-button:hover {
    background-color: var(--my-surface-hover);
}


/* =============================================================================
   MyRequiredDocumentButton
   -----------------------------------------------------------------------------
   La couleur est calculee en C# (voir MyRequiredDocumentButton.razor.cs) et
   posee directement en attribut style, comme chez Boracay : il n'y a donc rien
   de plus a poser ici que les tokens que ce style reference.
   ============================================================================= */


/* =============================================================================
   MyRequiredDocumentDialog
   -----------------------------------------------------------------------------
   LA CHAINE FLEX EST PORTEUSE, PAS DECORATIVE

   L'onglet Historique contient un MyFileExplorer en Height="100%". Pour que ce
   100% designe quelque chose, la hauteur doit descendre sans interruption depuis
   la fenetre : fenetre -> contenu -> corps -> onglets -> panneaux -> panneau.
   Un seul maillon manquant et l'explorateur s'effondre a la hauteur de son
   contenu, l'arborescence devenant illisible.

   Les dimensions 50vw / 70vh sont celles de l'original, reprises telles quelles :
   elles l'emportent sur la largeur de MyModalSize.Large, qui laisserait la
   fenetre sans hauteur imposee.
   ============================================================================= */

.mud-dialog.my-required-document-dialog {
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 70vh;
    max-width: none;
}

.my-required-document-dialog .mud-dialog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-required-document-dialog .my-modal__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.my-required-document-dialog .my-modal__body > .mud-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.my-required-document-dialog .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.my-required-document-dialog .mud-tabs-panels .mud-tab-panel {
    height: 100%;
}

.my-required-document-dialog__historique {
    display: flex;
    flex-direction: column;
}

.my-required-document-dialog .mud-tabs-tabbar {
    border-bottom: 1px solid var(--my-border-subtle);
}

.my-required-document-dialog .mud-icon-button {
    border: none;
    background: transparent;
}

.my-required-document-dialog .mud-icon-button:hover {
    background-color: var(--my-surface-hover);
}

.my-required-document-dialog__actions-fichier {
    gap: 4px;
    padding-left: 8px;
}

.my-required-document-dialog__envoi {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.my-required-document-dialog__champ {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.my-required-document-dialog__zone {
    border: 2px dashed var(--my-border-subtle);
    background-color: var(--my-surface-sunken);
    transition: all 0.3s ease;
    border-radius: 10px;
}

.my-required-document-dialog__envoi:hover .my-required-document-dialog__zone,
.my-required-document-dialog__zone--survol {
    border-color: var(--my-action-primary);
    background-color: var(--my-surface-hover);
}