/*
   Chrome commun des fenêtres modales Blazor.
   Cette feuille est chargée après les styles isolés afin que les fenêtres de
   chaque outil partagent la même enveloppe que la vue « artéfact par
   artéfact », sans imposer leur largeur ni leur mise en page interne.
*/
:root {
    --neon-dialog-backdrop: rgba(4, 0, 15, .76);
    --neon-dialog-border: #6643a7;
    --neon-dialog-header-border: rgba(150, 103, 234, .43);
    --neon-dialog-bg: linear-gradient(145deg, #241044 0%, #10031f 100%);
    --neon-dialog-header-bg: linear-gradient(90deg, rgba(63, 28, 114, .7), rgba(16, 3, 31, .32));
    --neon-dialog-text: #f4efff;
    --neon-dialog-muted: #d7cbff;
    --neon-dialog-shadow: 0 28px 90px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .1);
    --neon-dialog-action-bg: rgba(28, 10, 57, .9);
    --neon-dialog-action-border: #7046bf;
    --neon-dialog-action-hover: #352065;
    --neon-dialog-action-focus: #20c5f2;
}

/* Voiles des vraies fenêtres modales. Les menus et popovers ancrés à un
   élément (filtres, stocks, menus de navigation) restent volontairement hors
   de cette liste : leur comportement spatial est différent. */
:is(
    .artifact-viewer-backdrop,
    .rune-viewer-backdrop,
    .ro-modal-backdrop,
    .modal-backdrop,
    .decks-native-modal-backdrop,
    .deck-matchups-backdrop,
    .siege-modal-backdrop,
    .speed-timeline-effect-backdrop,
    .ro2-modal-backdrop
) {
    background: var(--neon-dialog-backdrop);
    backdrop-filter: blur(3px);
}

/* Cadre commun : la largeur, la hauteur et le défilement restent définis par
   la fenêtre qui porte son contenu. */
:is(
    .artifact-viewer-modal,
    .rune-viewer-modal,
    .ro-modal,
    .modal,
    .decks-native-modal,
    .deck-matchups-modal,
    .siege-tower-modal,
    .siege-picker-modal,
    .siege-assignment-modal,
    .siege-note-modal,
    .speed-timeline-effect-dialog,
    .ro2-modal
)[role="dialog"] {
    border-color: var(--neon-dialog-border);
    border-radius: 14px;
    background: var(--neon-dialog-bg);
    color: var(--neon-dialog-text);
    box-shadow: var(--neon-dialog-shadow);
}

/* Les composants Bootstrap utilisent une enveloppe supplémentaire ; ils
   rejoignent donc le même chrome sans modifier leur comportement Bootstrap. */
.modal-dialog > .modal-content {
    border-color: var(--neon-dialog-border);
    border-radius: 14px;
    background: var(--neon-dialog-bg);
    color: var(--neon-dialog-text);
    box-shadow: var(--neon-dialog-shadow);
}

.modal-dialog > .modal-content > .modal-header {
    border-bottom-color: var(--neon-dialog-header-border);
    background: var(--neon-dialog-header-bg);
}

.modal-dialog > .modal-content > .modal-footer {
    border-top-color: var(--neon-dialog-header-border);
}

/* En-têtes et pieds de fenêtres : même séparation et même dégradé que la
   fiche d'artéfact, avec les classes propres à chaque page conservées. */
:is(
    .artifact-viewer-modal,
    .rune-viewer-modal,
    .ro-modal,
    .modal,
    .decks-native-modal,
    .deck-matchups-modal,
    .siege-tower-modal,
    .siege-picker-modal,
    .siege-assignment-modal,
    .siege-note-modal,
    .speed-timeline-effect-dialog,
    .ro2-modal
)[role="dialog"] > :is(
    .artifact-viewer-modal-head,
    .rune-viewer-modal-head,
    .ro-modal-head,
    .modal-head,
    .decks-native-modal-head,
    .deck-matchups-head,
    header
) {
    border-bottom: 1px solid var(--neon-dialog-header-border);
    background: var(--neon-dialog-header-bg);
}

:is(
    .artifact-viewer-modal,
    .rune-viewer-modal,
    .ro-modal,
    .modal,
    .decks-native-modal,
    .deck-matchups-modal,
    .siege-tower-modal,
    .siege-picker-modal,
    .siege-assignment-modal,
    .siege-note-modal,
    .speed-timeline-effect-dialog,
    .ro2-modal
)[role="dialog"] > :is(.modal-actions, .ro-modal-actions, footer) {
    border-top: 1px solid var(--neon-dialog-header-border);
}

:is(
    .artifact-viewer-modal-head,
    .rune-viewer-modal-head,
    .ro-modal-head,
    .modal-head,
    .decks-native-modal-head,
    .deck-matchups-head,
    .speed-timeline-effect-dialog > header,
    .siege-note-modal > header
) :is(h2, h3) {
    color: var(--neon-dialog-text);
}

:is(
    .artifact-viewer-modal-head,
    .rune-viewer-modal-head,
    .ro-modal-head,
    .modal-head,
    .decks-native-modal-head,
    .deck-matchups-head,
    .speed-timeline-effect-dialog > header,
    .siege-note-modal > header
) p {
    color: var(--neon-dialog-muted);
}

/* Navigation précédente/suivante et fermetures : même forme, contraste et
   état de focus quelle que soit la page qui héberge la modale. */
:is(
    .artifact-viewer-controls button,
    .rune-viewer-action,
    .rune-viewer-close,
    .ro-icon-button,
    .guild-report-modal-close,
    .account-modal-close,
    .decks-native-modal-close,
    .deck-matchups-close,
    .siege-modal-close,
    .speed-timeline-effect-dialog__close
) {
    border-color: var(--neon-dialog-action-border);
    background: var(--neon-dialog-action-bg);
    color: var(--neon-dialog-text);
}

:is(
    .artifact-viewer-controls button,
    .rune-viewer-action,
    .rune-viewer-close,
    .ro-icon-button,
    .guild-report-modal-close,
    .account-modal-close,
    .decks-native-modal-close,
    .deck-matchups-close,
    .siege-modal-close,
    .speed-timeline-effect-dialog__close
):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--neon-dialog-action-focus);
    background: var(--neon-dialog-action-hover);
    color: #fff;
}

:is(
    .artifact-viewer-controls button,
    .rune-viewer-action,
    .rune-viewer-close,
    .ro-icon-button,
    .guild-report-modal-close,
    .account-modal-close,
    .decks-native-modal-close,
    .deck-matchups-close,
    .siege-modal-close,
    .speed-timeline-effect-dialog__close
):focus-visible {
    outline: 2px solid var(--neon-dialog-action-focus);
    outline-offset: 2px;
}

/* Préserve l'icône SVG Bootstrap (ne pas utiliser la propriété raccourcie
   `background`, qui l'effacerait) tout en alignant son écrin sur les autres
   boutons de fermeture. */
.modal-header .btn-close {
    border: 1px solid var(--neon-dialog-action-border);
    border-radius: 7px;
    background-color: var(--neon-dialog-action-bg);
}

.modal-header .btn-close:is(:hover, :focus-visible) {
    border-color: var(--neon-dialog-action-focus);
    background-color: var(--neon-dialog-action-hover);
    outline: 2px solid var(--neon-dialog-action-focus);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    :is(
        .artifact-viewer-backdrop,
        .rune-viewer-backdrop,
        .ro-modal-backdrop,
        .modal-backdrop,
        .decks-native-modal-backdrop,
        .deck-matchups-backdrop,
        .siege-modal-backdrop,
        .speed-timeline-effect-backdrop,
        .ro2-modal-backdrop
    ) {
        padding: 10px;
    }
}