/* =============================================================================
   Fil d'activite - liste, detail, choix du fil, lecteur de courriel
   -----------------------------------------------------------------------------
   Reprend les blocs <style> de Boracay presque a l'identique - MudTimeline
   compris, avec sa neutralisation de pseudo-elements par declarations forcees -
   seules les couleurs en clair et les variables --cp-* et --mud-palette-* du
   portail client passent par les tokens de la marque active.
   ============================================================================= */


/* =============================================================================
   MyActivityList
   ============================================================================= */

.mud-card.my-card.my-activity {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---- Barre d'outils (mode Timeline) ---- */

.my-activity__toolbar {
    display: flex;
    align-items: center;
    gap: var(--my-space-md);
    margin-bottom: var(--my-space-md);
}

.my-activity__search {
    flex: 1 1 auto;
}

/* ---- En-tete (mode Feed) ---- */

.my-activity__header {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    margin-bottom: var(--my-space-md);
}

.my-activity__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--my-radius-full);
    background: var(--my-surface-sunken);
    color: var(--my-text-muted);
    font-size: var(--my-font-size-2xs);
    font-weight: var(--my-font-weight-bold);
}

.my-activity__empty {
    color: var(--my-text-muted);
    font-size: var(--my-font-size-sm);
    text-align: center;
    padding: var(--my-space-xl) 0;
    margin: 0;
    font-style: italic;
}

/* ---- Defilement et depot (mode Timeline) ---- */

.my-activity__timeline-scroll {
    max-height: 600px;
    overflow-y: auto;
    padding-right: var(--my-space-2xs);
    scrollbar-width: thin;
    scrollbar-color: var(--my-border-default) transparent;
}

.my-activity__timeline-scroll::-webkit-scrollbar {
    width: 4px;
}

.my-activity__timeline-scroll::-webkit-scrollbar-thumb {
    background: var(--my-border-default);
    border-radius: var(--my-radius-full);
}

.my-activity__feed-drop {
    position: relative;
    min-height: 240px;
}

.my-activity__drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: copy;
    z-index: var(--my-z-dropdown);
}

.my-activity__drop-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--my-space-md);
    background: var(--my-surface-card);
    border: 2px dashed var(--my-action-primary);
    border-radius: var(--my-radius-md);
    z-index: calc(var(--my-z-dropdown) - 5);
    pointer-events: none;
    text-align: center;
    padding: 0 var(--my-space-lg);
}

/* ---- MudTimeline, neutralisee comme chez Boracay ----

   MudTimeline dessine par defaut un filet et des pseudo-elements de connexion
   entre chaque point ; Boracay les neutralise pour ne garder que ses propres
   cartes. Les declarations forcees sont necessaires : elles l'emportent sur des
   regles internes de MudBlazor, pas sur une autre regle de ce fichier. */
.my-activity__timeline {
    padding: var(--my-space-2xs) 0;
}

.my-activity__timeline [class*="modifier"] {
    display: none !important;
}

.my-activity__timeline .mud-timeline-item::before,
.my-activity__timeline .mud-timeline-item::after,
.my-activity__timeline .mud-timeline-item-content::before,
.my-activity__timeline .mud-timeline-item-content::after,
.my-activity__timeline .mud-timeline-item-dot::before,
.my-activity__timeline .mud-timeline-item-dot::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

.my-activity__timeline .mud-timeline-item-content {
    border: none !important;
    padding-left: var(--my-space-sm) !important;
}

/* Refus (client, fournisseur ou Boracay) : fond de carte legerement teinte d'erreur. */
.my-activity__tl-item--refused .mud-card.my-activity__tl-card {
    background-color: var(--my-error-100);
    border-color: var(--my-error-300);
}

.my-activity__tl-item--refused .mud-card.my-activity__tl-card:hover {
    border-color: var(--my-error-500);
}

.mud-card.my-activity__tl-card {
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    margin-bottom: var(--my-space-xs);
    transition: border-color var(--my-transition-fast), box-shadow var(--my-transition-fast);
}

.mud-card.my-activity__tl-card:hover {
    border-color: var(--my-border-default);
    box-shadow: var(--my-shadow-sm);
}

.my-activity__tl-toggle {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px var(--my-space-xs) !important;
    min-width: 0 !important;
    font-size: var(--my-font-size-2xs) !important;
    text-transform: none !important;
}

.my-activity__tl-content {
    padding: var(--my-space-sm) var(--my-space-md) !important;
    display: flex;
    flex-direction: column;
    gap: var(--my-space-2xs);
}

.my-activity__tl-header {
    min-width: 0;
}

.my-activity__tl-subject {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/*  Les icones d'action ne se revelent qu'au survol de la carte - fidele a
    Boracay, y compris pour ce que cela coute a l'accessibilite tactile et
    clavier : voir le bloc de tete de MyActivityList.razor.cs. */
.my-activity__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--my-transition-fast);
    flex-shrink: 0;
}

.mud-card.my-activity__tl-card:hover .my-activity__actions,
.my-activity__actions:focus-within {
    opacity: 1;
}

.my-activity__actions .mud-icon-button {
    border: none !important;
    background: transparent;
}

.my-activity__tl-meta {
    font-size: var(--my-font-size-xs);
}

.my-activity__tl-author {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-body);
}

.my-activity__tl-date {
    color: var(--my-text-muted);
}

.my-activity__tl-desc {
    margin-top: var(--my-space-2xs);
    padding-top: var(--my-space-xs);
    border-top: 1px solid var(--my-border-subtle);
    color: var(--my-text-body);
    white-space: pre-line;
}

.my-activity__attachments {
    align-items: center;
}

.my-activity__attachments .mud-chip.my-chip {
    max-width: 200px;
}

/* ---- Fil en bulles (mode Feed) ---- */

.my-activity__list {
    display: flex;
    flex-direction: column;
    gap: var(--my-space-md);
    max-height: 420px;
    overflow-y: auto;
    padding-right: var(--my-space-2xs);
    margin-bottom: var(--my-space-md);
    scrollbar-width: thin;
    scrollbar-color: var(--my-border-default) transparent;
}

.my-activity__list::-webkit-scrollbar {
    width: 4px;
}

.my-activity__list::-webkit-scrollbar-thumb {
    background: var(--my-border-default);
    border-radius: var(--my-radius-full);
}

.my-activity__msg {
    display: flex;
    gap: var(--my-space-sm);
    align-items: flex-start;
}

.my-activity__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--my-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.my-activity__avatar--mine {
    background: var(--my-info-100);
    color: var(--my-info-500);
}

.my-activity__avatar--other {
    background: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-activity__bubble {
    flex: 1;
    min-width: 0;
    background: var(--my-surface-sunken);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    padding: var(--my-space-sm) var(--my-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--my-space-2xs);
}

.my-activity__msg--other .my-activity__bubble {
    background: var(--my-brand-primary-subtle);
    border-color: var(--my-brand-primary-subtle);
}

.my-activity__meta {
    display: flex;
    align-items: baseline;
    gap: var(--my-space-xs);
}

.my-activity__author {
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.my-activity__date {
    font-size: var(--my-font-size-2xs);
    color: var(--my-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.my-activity__subject {
    font-size: var(--my-font-size-sm);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    overflow-wrap: anywhere;
}

.my-activity__text {
    margin: 0;
    font-size: var(--my-font-size-sm);
    color: var(--my-text-body);
    line-height: var(--my-line-height-loose);
    overflow-wrap: anywhere;
}

.my-activity__msg .my-activity__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--my-space-2xs);
    align-items: center;
}

button.my-activity__attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--my-space-2xs);
    padding: 3px var(--my-space-xs);
    border-radius: var(--my-radius-full);
    font-size: var(--my-font-size-2xs);
    font-weight: var(--my-font-weight-medium);
    background: var(--my-info-100);
    color: var(--my-info-500);
    border: 1px solid var(--my-info-300);
    max-width: 180px;
    min-width: 0;
    cursor: pointer;
    transition: all var(--my-transition-fast);
}

button.my-activity__attachment:hover {
    background: var(--my-brand-primary-subtle);
    border-color: var(--my-action-primary);
    color: var(--my-action-primary);
}

button.my-activity__attachment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.my-activity__form {
    border-top: 1px solid var(--my-border-subtle);
    padding-top: var(--my-space-md);
}

.my-activity__input {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--my-border-default);
    border-radius: var(--my-radius-md);
    padding: var(--my-space-sm);
    font: inherit;
    color: var(--my-text-body);
    background: var(--my-surface-card);
}

.my-activity__input:focus {
    outline: none;
    border-color: var(--my-border-focus);
    box-shadow: var(--my-shadow-focus);
}

.my-activity__form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--my-space-sm);
}

.my-activity__send {
    display: inline-flex;
    align-items: center;
    gap: var(--my-space-2xs);
    padding: var(--my-space-xs) var(--my-space-lg);
    border-radius: var(--my-radius-md);
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--my-letter-spacing-caps);
    cursor: pointer;
    border: none;
    background: var(--my-surface-sunken);
    color: var(--my-text-muted);
    transition: all var(--my-transition-fast);
}

.my-activity__send--active {
    background: var(--my-action-primary);
    color: var(--my-neutral-0);
}

.my-activity__send--active:hover {
    background: var(--my-action-primary-hover);
}

.my-activity__send:disabled {
    cursor: default;
}


/* =============================================================================
   MyActivityDetail
   ============================================================================= */

.my-modal.my-activity-detail .my-modal__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 70vh;
}

.my-activity-detail__corps {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.my-activity-detail__onglets {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.my-activity-detail .mud-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Fil porteur ---- */

.my-activity-detail__fil {
    display: flex;
    align-items: center;
    gap: var(--my-space-xs);
    flex-wrap: wrap;
    margin: 0 0 var(--my-space-sm);
    font-size: var(--my-font-size-sm);
    color: var(--my-text-muted);
}

.my-activity-detail__fil-nature {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-body);
}

.my-activity-detail__fil-libelle {
    color: var(--my-text-heading);
    font-weight: var(--my-font-weight-bold);
}

.my-activity-detail__fil .mud-button-root.my-activity-detail__fil-lien {
    min-height: 0;
    padding: 0 var(--my-space-xs);
}

/* ---- Depot de courriel ---- */

.my-activity-detail__depot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: var(--my-space-md);
    border: 2px dashed var(--my-border-default);
    border-radius: var(--my-radius-md);
    transition: border-color var(--my-transition-fast);
}

.my-activity-detail__depot--survol,
.my-activity-detail__depot:hover {
    border-color: var(--my-action-primary);
}

.my-activity-detail__depot-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--my-space-xs);
    color: var(--my-text-muted);
    text-align: center;
}

.my-activity-detail__depot-vide p {
    margin: 0;
    font-size: var(--my-font-size-sm);
}

.my-activity-detail__depot-fichier {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    width: 100%;
    padding-right: 40px;
}

.my-activity-detail__depot-nom {
    margin: 0;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-heading);
}

.my-activity-detail__depot-note {
    margin: 0;
    font-size: var(--my-font-size-xs);
    color: var(--my-text-muted);
}

.my-activity-detail__depot-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.my-activity-detail__depot-supprimer {
    position: absolute;
    top: 50%;
    right: var(--my-space-sm);
    transform: translateY(-50%);
    z-index: 2;
}


/* =============================================================================
   MyActivityFeedPickerDialog
   ============================================================================= */

.my-feed-picker__erreur {
    margin: var(--my-space-sm) 0 0;
    font-size: var(--my-font-size-sm);
    color: var(--my-error-500);
}


/* =============================================================================
   MyEmailViewer
   ============================================================================= */

.my-email {
    height: 100%;
}

.mud-paper.my-email__header {
    background: var(--my-surface-sunken);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md) var(--my-radius-md) 0 0;
    flex-shrink: 0;
}

.mud-avatar.my-email__avatar {
    background: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    font-weight: var(--my-font-weight-bold);
}

.my-email__head-text {
    min-width: 0;
}

.my-email__subject {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    overflow-wrap: anywhere;
}

.my-email__sender {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-body);
}

.mud-paper.my-email__body {
    flex-grow: 1;
    border: 1px solid var(--my-border-subtle);
    border-top: none;
    border-radius: 0 0 var(--my-radius-md) var(--my-radius-md);
    overflow: hidden;
}

.my-email__iframe {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: none;
    display: block;
    background: var(--my-neutral-0);
}

.my-email__pj-titre {
    display: flex;
    align-items: center;
    gap: var(--my-space-xs);
    font-weight: var(--my-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--my-letter-spacing-caps);
    color: var(--my-text-muted);
}

/* Pendant l'ouverture d'une piece jointe : un seul apercu a la fois. */
.my-email__pj--occupe {
    pointer-events: none;
    opacity: 0.6;
}