/* =========================================================
   Globale Modal-Normalisierung
   - Einheitlicher Rahmen/Backdrop für normale Dialoge
   - Einheitliche Aktionsreihenfolge: Bestätigen links, Abbrechen rechts
   - Deutlicher Tastaturfokus
   - Emulator-Dialoge behalten ihr eigenes Design
   ========================================================= */

.app-modal-managed-overlay:not(.app-modal-managed-overlay--preserve-visual) {
    background: var(--ui-backdrop, rgba(0, 0, 0, 0.68)) !important;
    backdrop-filter: blur(7px);
}

.app-modal-managed-dialog:not(.app-modal-managed-dialog--emulator):not(.app-modal-managed-dialog--preserve-visual) {
    border: 1px solid var(--ui-border-strong, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--ui-radius-xl, 18px) !important;
    background: var(--ui-surface-1, #242424) !important;
    color: var(--ui-text, #f5f5f5) !important;
    box-shadow: var(--ui-shadow-layer, 0 24px 70px rgba(0, 0, 0, 0.45)) !important;
}

dialog.app-modal-managed-dialog:not(.app-modal-managed-dialog--emulator):not(.app-modal-managed-dialog--preserve-visual)::backdrop {
    background: var(--ui-backdrop, rgba(0, 0, 0, 0.68));
    backdrop-filter: blur(7px);
}

.app-modal-managed-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: var(--ui-space-2, 8px) !important;
}

.app-modal-managed-actions > .app-modal-managed-confirm {
    order: 10 !important;
}

.app-modal-managed-actions > .app-modal-managed-cancel {
    order: 20 !important;
}

.app-modal-managed-dialog:not(.app-modal-managed-dialog--emulator) .app-modal-managed-cancel:focus-visible,
.app-modal-managed-dialog:not(.app-modal-managed-dialog--emulator) .app-modal-managed-confirm:focus-visible,
.app-modal-managed-dialog:not(.app-modal-managed-dialog--emulator) button:focus-visible {
    outline: 3px solid var(--ui-accent, #e9a624) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px var(--ui-surface-1, #242424), 0 0 0 5px color-mix(in srgb, var(--ui-accent, #e9a624) 48%, transparent) !important;
}

.app-confirm-overlay {
    z-index: 2147483646 !important;
}

.app-confirm-message {
    margin: 0;
    white-space: pre-line;
    line-height: var(--ui-line-height-normal, 1.45);
}

/*
   Emulator: ausschließlich Tastaturfokus ergänzen.
   Farben, Rahmen, Flächen, Clip-Paths und Glitch-Effekte bleiben in emulator.css.
*/
.app-modal-managed-dialog--emulator button:focus-visible,
.app-modal-managed-dialog--emulator [tabindex]:focus-visible {
    outline: 3px solid #f9f002 !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 2px #050505,
        0 0 0 5px #39ff14,
        3px 3px 0 #ff003c !important;
}

body.light-mode .app-modal-managed-dialog--emulator button:focus-visible,
body.light-mode .app-modal-managed-dialog--emulator [tabindex]:focus-visible,
html[data-theme="light"] .app-modal-managed-dialog--emulator button:focus-visible,
html[data-theme="light"] .app-modal-managed-dialog--emulator [tabindex]:focus-visible {
    outline-color: #b51f42 !important;
    box-shadow:
        0 0 0 2px #fffdf0,
        0 0 0 5px #197a2a,
        3px 3px 0 #f3df31 !important;
}

@media (max-width: 640px) {
    .app-modal-managed-actions > button,
    .app-modal-managed-actions > input[type="button"],
    .app-modal-managed-actions > input[type="submit"] {
        min-width: min(100%, 140px);
    }
}

/* =========================================================
   Emulator-Seite: globale/vereinheitlichte Dialoge im
   Cyberpunk-Kontext darstellen. Native Emulator-Dialoge
   behalten weiterhin ausschließlich ihr bestehendes Design.
   ========================================================= */
.app-modal-managed-overlay--emulator-context {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.72) 0,
            rgba(0, 0, 0, 0.72) 3px,
            rgba(249, 240, 2, 0.035) 3px,
            rgba(249, 240, 2, 0.035) 5px
        ),
        rgba(0, 0, 0, 0.76) !important;
    backdrop-filter: blur(9px) contrast(1.08) !important;
}

.app-modal-managed-dialog--emulator-context:not(.app-modal-managed-dialog--preserve-visual) {
    position: relative;
    overflow: hidden;
    font-family: "VT323", "Courier New", monospace !important;
    color: #f8f3c4 !important;
    background:
        radial-gradient(rgba(249, 240, 2, 0.08) 1px, transparent 0),
        linear-gradient(145deg, rgba(18, 19, 12, 0.98), rgba(4, 6, 4, 0.98)) !important;
    background-size: 5px 5px, auto !important;
    border: 2px solid #f9f002 !important;
    border-right-color: #39ff14 !important;
    border-radius: 4px !important;
    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.72),
        0 0 26px rgba(249, 240, 2, 0.20),
        5px 0 0 rgba(57, 255, 20, 0.52),
        -5px 0 0 rgba(255, 0, 60, 0.38) !important;
}

.app-modal-managed-dialog--emulator-context:not(.app-modal-managed-dialog--preserve-visual)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(249, 240, 2, 0.032) 0,
            rgba(249, 240, 2, 0.032) 1px,
            transparent 1px,
            transparent 5px
        );
}

.app-modal-managed-dialog--emulator-context:not(.app-modal-managed-dialog--preserve-visual) > * {
    position: relative;
    z-index: 2;
}

.app-modal-managed-dialog--emulator-context .ui-modal__title,
.app-modal-managed-dialog--emulator-context h1,
.app-modal-managed-dialog--emulator-context h2,
.app-modal-managed-dialog--emulator-context h3 {
    color: #f9f002 !important;
    letter-spacing: 0.04em;
    text-shadow:
        2px 0 rgba(255, 0, 60, 0.62),
        -2px 0 rgba(57, 255, 20, 0.52) !important;
}

.app-modal-managed-dialog--emulator-context .ui-modal__body,
.app-modal-managed-dialog--emulator-context .app-confirm-message,
.app-modal-managed-dialog--emulator-context p {
    color: rgba(248, 243, 196, 0.88) !important;
}

.app-modal-managed-dialog--emulator-context .ui-btn,
.app-modal-managed-dialog--emulator-context button {
    border-radius: 2px !important;
    font-family: "VT323", "Courier New", monospace !important;
    letter-spacing: 0.035em;
}

.app-modal-managed-dialog--emulator-context .app-modal-managed-confirm {
    color: #050505 !important;
    background: #f9f002 !important;
    border-color: #f9f002 !important;
    border-right: 3px solid #39ff14 !important;
}

.app-modal-managed-dialog--emulator-context .app-modal-managed-cancel {
    color: #f8f3c4 !important;
    background: #151712 !important;
    border-color: rgba(249, 240, 2, 0.62) !important;
    border-right: 3px solid #ff003c !important;
}

body.light-mode .app-modal-managed-overlay--emulator-context,
html[data-theme="light"] .app-modal-managed-overlay--emulator-context {
    background: rgba(22, 22, 12, 0.50) !important;
    backdrop-filter: blur(9px) saturate(0.92) !important;
}

body.light-mode .app-modal-managed-dialog--emulator-context:not(.app-modal-managed-dialog--preserve-visual),
html[data-theme="light"] .app-modal-managed-dialog--emulator-context:not(.app-modal-managed-dialog--preserve-visual) {
    color: #2f2900 !important;
    background:
        radial-gradient(rgba(122, 107, 0, 0.10) 1px, transparent 0),
        linear-gradient(180deg, #fffdf0, #f4e8bf) !important;
    background-size: 5px 5px, auto !important;
    border-color: rgba(122, 107, 0, 0.78) !important;
    border-right-color: #197a2a !important;
    box-shadow:
        0 30px 100px rgba(47, 41, 0, 0.24),
        0 0 30px rgba(122, 107, 0, 0.18) !important;
}

body.light-mode .app-modal-managed-dialog--emulator-context .ui-modal__title,
body.light-mode .app-modal-managed-dialog--emulator-context h1,
body.light-mode .app-modal-managed-dialog--emulator-context h2,
body.light-mode .app-modal-managed-dialog--emulator-context h3,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context .ui-modal__title,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context h1,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context h2,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context h3 {
    color: #2f2900 !important;
    text-shadow:
        2px 0 rgba(169, 20, 53, 0.28),
        -1px 0 rgba(25, 122, 42, 0.32) !important;
}

body.light-mode .app-modal-managed-dialog--emulator-context .ui-modal__body,
body.light-mode .app-modal-managed-dialog--emulator-context .app-confirm-message,
body.light-mode .app-modal-managed-dialog--emulator-context p,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context .ui-modal__body,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context .app-confirm-message,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context p {
    color: rgba(47, 41, 0, 0.80) !important;
}

body.light-mode .app-modal-managed-dialog--emulator-context .app-modal-managed-confirm,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context .app-modal-managed-confirm {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
    border-right-color: #197a2a !important;
}

body.light-mode .app-modal-managed-dialog--emulator-context .app-modal-managed-cancel,
html[data-theme="light"] .app-modal-managed-dialog--emulator-context .app-modal-managed-cancel {
    color: #ffffff !important;
    background: #0f647c !important;
    border-color: #0f647c !important;
    border-right-color: #197a2a !important;
}