/* ==========================================================================
   K428 »Én popup-stil« + K429 »Blød kant på afklippet tekst« (Kim 31/10)

   Alt der popper op, får stemmevælgerens udseende (.speak-voice-picker-panel):
   hvid flade, 1 px kant #D5DCD8, 16 px hjørner, popover-skygge, rolig grøn hover
   og 160 ms glid-ind som Udtryk-panelet. Mobil (≤ 600 px): rækkemenuer bliver et
   bundark med let mørk baggrund som »Stemme pr. afsnit«. Dialoger får samme kant og
   hjørner, men modal-skygge og den dæmpede baggrund fra organisationsdialogerne.

   Tokens: --pop-* / --modal-* / --fade-size i voices247-design.css (:root).
   Kun popup-rammen ændres (flade, kant, hjørner, skygge, hover, rækkehøjde i menuer).
   Knap-, slet- og saldofarver er uændrede.

   Filen linkes som det SIDSTE stylesheet i _Host. Komponenternes scoped CSS har
   [b-…]-attributter (+1 klasse i specificitet); derfor står ».mud-popover« eller
   ":root" foran, så reglerne vinder ved samme specificitet uden !important.
   Rollback: fjern <link> til denne fil i _Host.cshtml.
   ========================================================================== */

@keyframes v247-pop-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes v247-sheet-in {
    from { opacity: .4; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   1 · MudBlazor-menuer og rullelister (MudSelect/Autocomplete)
   Menuer: PopoverClass="v247-pop" – eller de eksisterende klasser på rækkemenuerne
   (speaks-row-action-menu-popover / speaks-compact-row-action-menu-popover) og topbarens
   v247-account-popover. Rullelister uden egen klasse rammes af :has(.mud-list) – pakket i
   :where(), så reglen ikke vinder over menuernes egne (fx mobil-bundarket).
   -------------------------------------------------------------------------- */
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover),
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) {
    box-sizing: border-box;
    padding: var(--pop-pad);
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
    color: var(--v247-design-text);
    font: var(--pop-item-font);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover).mud-popover-open,
.mud-popover.mud-popover-open:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) {
    animation: var(--pop-enter);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-list,
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-list,
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list {
    padding: 0;
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item,
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list-item {
    box-sizing: border-box;
    min-height: var(--pop-item-h);
    padding: var(--pop-item-pad);
    border-radius: var(--pop-item-radius);
    color: var(--v247-design-text);
    font: var(--pop-item-font);
    letter-spacing: normal;
    text-transform: none;
}

/* Mud sætter teksten som <p class="mud-typography-body1"> (systemskrift 16 px) – den skal følge menuen */
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item .mud-typography,
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list-item .mud-typography {
    font: inherit;
    letter-spacing: inherit;
}

/* Mud lægger 36 px luft til højre for teksten (plads til en undermenu-pil) – det gjorde menuen ~800 px bred */
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item .mud-menu-item-text {
    margin-block: 0;
    margin-inline-end: 0;
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-list:has(.mud-menu-item-icon) .mud-menu-item:not(:has(.mud-menu-item-icon)) .mud-menu-item-text {
    margin-inline-start: calc(var(--pop-icon) + 12px);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item .mud-menu-item-icon,
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item > .mud-icon-root {
    width: var(--pop-icon);
    height: var(--pop-icon);
    margin-inline-end: 12px;
    color: var(--pop-icon-color);
    font-size: var(--pop-icon);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item .mud-menu-submenu-icon {
    color: var(--pop-icon-color);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item:hover,
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item:focus-visible,
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list-item:hover,
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list-item:focus-visible {
    background: var(--pop-hover);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item:focus-visible,
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list-item:focus-visible {
    outline: var(--pop-focus);
    outline-offset: -2px;
}

/* Valgt/åben: rækken, der har åbnet undermenuen, og det valgte punkt i en rulleliste */
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item[aria-expanded="true"],
.mud-popover:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)) .mud-list-item.mud-selected-item {
    background: var(--pop-active);
    box-shadow: inset 3px 0 0 var(--pop-active-edge);
    color: var(--v247-design-text);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-divider {
    margin: var(--pop-sep-margin);
    border-color: var(--pop-sep);
    opacity: 1;
}

/* Slet: samme farve som før */
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item.speaks-row-action-delete-menu,
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item.speaks-row-action-delete-menu .mud-icon-root {
    color: var(--pop-danger);
}

.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item.speaks-row-action-delete-menu:hover,
.mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover) .mud-menu-item.speaks-row-action-delete-menu:focus-visible {
    background: var(--pop-danger-hover);
    color: var(--pop-danger);
}

/* Rækkens »···« og »Hent i andet format ›«: smal og rolig */
.mud-popover.speaks-row-action-menu-popover,
.mud-popover.speaks-compact-row-action-menu-popover {
    min-width: 240px;
    max-width: min(330px, calc(100vw - 24px));
}

.mud-popover.speaks-compact-row-action-menu-popover .speaks-row-action-subtitles-text small {
    max-width: none;
}

/* Mobil: rækkemenuerne (og PopoverClass="v247-pop--sheet") bliver et bundark med let mørk baggrund (som »Stemme pr. afsnit«) */
@media (max-width: 600px) {
    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover) {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        min-width: 0;
        max-width: none;
        max-height: 85vh;
        max-height: 85dvh;
        display: flex;
        flex-direction: column;
        padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: var(--pop-sheet-radius) var(--pop-sheet-radius) 0 0;
        /* Scrim uden ekstra element: en stor skygge rundt om arket */
        box-shadow: 0 0 0 100vmax var(--pop-scrim-mobile);
        animation: v247-sheet-in 200ms ease-out;
    }

    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover)::before {
        content: "";
        display: block;
        flex: none;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: #D3DAD6;
    }

    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover) > div {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover) .mud-menu-list {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover) .mud-menu-item {
        min-height: var(--pop-sheet-item-h);
        font-size: 16px;
    }

    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover) .mud-menu-item .mud-menu-item-icon,
    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover) .mud-menu-item > .mud-icon-root {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }
}

/* --------------------------------------------------------------------------
   2 · Egne popups (knapper/paneler, der ikke er MudMenu)
   -------------------------------------------------------------------------- */

/* Topbar for indloggede: saldo, »?«, profil, Online nu (MudMenu med v247-ah-pop) */
.mud-popover.v247-account-popover.v247-ah-pop {
    padding: var(--pop-pad);
    border-radius: var(--pop-radius);
    box-shadow: var(--pop-shadow);
}

/* Offentlig topbar: saldo-pop og navigations-dropdown */
:root .v247-balance-group .v247-time-pop {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
}

:root .v247-nav-dropdown-menu {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
}

:root .v247-nav-dropdown-item:hover,
:root .v247-nav-dropdown-item:focus-visible {
    background: var(--pop-hover);
}

/* Lav speak: »Flere valg ▾« */
:root .v247-more-menu {
    padding: var(--pop-pad);
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
    transform: translateY(6px);
    transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s linear 160ms;
}

:root .v247-speak-page .v247-stage-bot .v247-more-item {
    border-radius: var(--pop-item-radius);
}

:root .v247-speak-page .v247-stage-bot button.v247-more-item:hover,
:root .v247-speak-page .v247-stage-bot button.v247-more-item:focus-visible {
    background: var(--pop-hover);
}

/* Lav speak: »Stemme pr. afsnit« (desktop – mobil er allerede bundark) */
@media (min-width: 641px) {
    :root .v247-voice-menu {
        padding: var(--pop-pad);
        border: var(--pop-border);
        border-radius: var(--pop-radius);
        background: var(--pop-bg);
        box-shadow: var(--pop-shadow);
        animation: var(--pop-enter);
    }
}

:root .v247-voice-menu-item:hover:not([disabled]),
:root .v247-voice-menu-item:focus-visible,
:root .v247-voice-menu-more:hover,
:root .v247-voice-menu-more:focus-visible,
:root .v247-voice-menu-reset:hover:not([disabled]),
:root .v247-voice-menu-reset:focus-visible {
    background: var(--pop-hover);
}

:root .v247-voice-menu-item.is-current {
    background: var(--pop-active);
    box-shadow: inset 3px 0 0 var(--pop-active-edge);
}

:root .v247-voice-menu-item,
:root .v247-voice-menu-more,
:root .v247-voice-menu-reset {
    border-radius: var(--pop-item-radius);
}

:root .v247-voice-menu-divider {
    margin: var(--pop-sep-margin);
    background: var(--pop-sep);
}

/* Lav speak: ældre, flydende Udtryk-menu */
:root .v247-emotion-menu {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
}

/* Produktioner: »Flyt til mappe« ved rækken */
:root .speak-folder-move-option:hover:not(:disabled),
:root .speak-folder-move-option:focus-visible {
    background: var(--pop-hover);
}

/* Produktioner: Sortér/Filtrér */
:root .v247-speaks-page .speaks-filter-popover {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    box-shadow: var(--pop-shadow);
}

:root .v247-speaks-page .speaks-filter-option:hover,
:root .v247-speaks-page .speaks-filter-option:focus-within {
    background: var(--pop-hover);
}

/* Formatmenu ved »Hent« (detalje) */
:root .speaks-format-menu {
    padding: var(--pop-pad);
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
    animation: var(--pop-enter);
}

:root .speaks-format-option {
    border-radius: var(--pop-item-radius);
}

:root .speaks-format-option:hover {
    background: var(--pop-hover);
}

/* Organisation: mappemenu */
:root .org-folder-menu {
    padding: var(--pop-pad);
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
    animation: var(--pop-enter);
}

:root .org-folder-menu button:hover,
:root .org-folder-menu button:focus-visible {
    background: var(--pop-hover);
}

:root .org-folder-menu hr {
    margin: var(--pop-sep-margin);
    border-top-color: var(--pop-sep);
}

/* Vis som panel – menu */
:root .v247-viewas-pill-menu {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
}

/* Admin »Mere« */
:root .k414-more-pop {
    padding: var(--pop-pad);
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--pop-shadow);
    animation: var(--pop-enter);
}

:root .k414-more-pop a:hover,
:root .k414-more-pop .v247-viewas-entry:hover {
    background: var(--pop-hover);
}

/* --------------------------------------------------------------------------
   3 · Dialoger og modaler: samme kant og hjørner, kraftigere skygge, dæmpet baggrund
   -------------------------------------------------------------------------- */
.mud-overlay.mud-overlay-dialog .mud-overlay-scrim.mud-overlay-dark {
    background-color: var(--modal-scrim);
}

.mud-dialog.v247-dialog.v247-design,
.mud-dialog.organization-dialog,
.mud-dialog.v247-release-dialog {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    background: var(--pop-bg);
    box-shadow: var(--modal-shadow);
}

.mud-dialog.language-dialog {
    border-radius: var(--pop-radius) !important;
    box-shadow: var(--modal-shadow);
}

/* »Nyt i Voices247« */
:root .rn-backdrop {
    background: var(--modal-scrim);
}

:root .rn-card {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    box-shadow: var(--modal-shadow);
}

/* Vis som panel – dialog */
:root .v247-panel-backdrop {
    background: var(--modal-scrim);
}

:root .v247-panel-dialog {
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    box-shadow: var(--modal-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .mud-popover:is(.v247-pop, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover, .v247-account-popover).mud-popover-open,
    .mud-popover.mud-popover-open:where(:not(.mud-tooltip, .v247-pop, .v247-account-popover, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover):has(.mud-list)),
    .mud-popover:is(.v247-pop--sheet, .speaks-row-action-menu-popover, .speaks-compact-row-action-menu-popover),
    :root .v247-voice-menu,
    :root .speaks-format-menu,
    :root .org-folder-menu,
    :root .k414-more-pop {
        animation: none;
    }

    :root .v247-more-menu {
        transition: none;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   K429 · Blød kant på afklippet tekst
   js/v247-scroll-fade.js sætter data-fade="top|bottom|both|none" – kun når indholdet
   faktisk er større end boksen. Uden JS: ingen udtoning (som før).
   Bruges kun på rullelister uden egen skygge (mask-image ville ellers skjule skyggen).
   -------------------------------------------------------------------------- */
.v247-scroll-fade[data-fade="bottom"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-size)), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-size)), transparent);
}

.v247-scroll-fade[data-fade="top"] {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--fade-size)), transparent);
    mask-image: linear-gradient(to top, #000 calc(100% - var(--fade-size)), transparent);
}

.v247-scroll-fade[data-fade="both"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent);
}

/* »Flyt til mappe« ved rækken: søgefeltet bliver stående, kun listen ruller (og toner ud) */
:root .speak-folder-move-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

:root .speak-folder-move-panel > .speak-folder-move-options {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* K436-fix (Kim 31/10): »Vælg mappe« – valgt række = K428's bløde valgte stil (lys grøn flade, runde hjørner, ingen mørk kant).
   Den mørke kant var sidens generelle tastaturfokus (2 px grøn ring med 2 px afstand), som listen klippede af.
   Fokus vises nu som en blød ring inde i rækken, så den aldrig klippes. Panelet bruger popup-tokens som de andre menuer. */
:root .speak-folder-picker .speak-folder-picker-panel {
    border: var(--pop-border);
    box-shadow: var(--pop-shadow);
}

:root .speak-folder-picker .speak-folder-picker-list .speak-folder-picker-card.is-selected {
    background: var(--pop-hover);
    box-shadow: none;
}

:root .speak-folder-picker .speak-folder-picker-list .speak-folder-picker-card:hover:not(:disabled) {
    background: var(--pop-hover);
}

:root body .speak-folder-picker .speak-folder-picker-list .speak-folder-picker-card:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px var(--pop-active-edge);
}