/* Sammel-Upload mehrerer Werbemittel (#wmSammelUpload, js/wm-sammelupload.js, 15.09.2026).
   Port von jd-partner in den Farben von jd-mail. Zwei getrennte Blöcke: Desktop ohne
   Media-Query, Mobil ab 991px abwärts.
   Farben nur aus dem Mail-Satz: var(--main) / #00cbb5 / rgba(0, 203, 181, …), var(--darkblue),
   var(--white). Kein eigenes Rot: Fehlertext in Türkis (UI Formulare & Validierung, Variante A
   jd-mail), Entfernen und Fuß-Knöpfe sind die Plattform-Knöpfe btn_delete / btn_add. */

/* ============================== Desktop ================================== */

/* Das Werkzeug-Gerüst aus _modals.tpl ist .modal.position-absolute (Bootstrap: absolute).
   styles.css setzt .modal zwar ebenfalls position:fixed !important — das gilt aber nur, solange
   styles.css nach Bootstrap geladen wird. Absolut hinge das Fenster am Dokumentanfang, der
   Kampagnen-Editor ist beim Öffnen aber weit gescrollt. fixed heftet es an den Viewport,
   genau über das offene Kampagnen-Fenster. */
#wmSammelUpload.modal.position-absolute { position: fixed !important; }

/* Stapelung über dem Kampagnen-Fenster UND dessen Schleier (Muster rechnung-oben in
   footer.tpl). Bewusst OHNE Media-Query und mit !important — mobil gilt
   ".modal { z-index: 10000 !important }" und
   "body.modal-open .modal-backdrop { z-index: 10005 !important }". Die Klassen setzen
   die show/shown/hidden-Handler im Skript. */
#wmSammelUpload.modal.wm-oben { z-index: 20000 !important; }
.modal-backdrop.wm-schleier { z-index: 19990 !important; }
body.modal-open .modal-backdrop.wm-schleier { z-index: 19990 !important; }

/* Kompaktes Werkzeugfenster (Muster #wmModal in wm-builder.css): styles.css setzt die .mc_a
   ohne Media-Query auf left:-280px/width:285% und je Breakpoint mit !important auf 95vw bis
   65vw samt left:50%/translateX(-50%) — eine Begrenzung nur am .modal-dialog bliebe dadurch
   unsichtbar. Erst füllt die .mc_a den Dialog, dann greift dessen max-width. */
#wmSammelUpload .mc_a {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
}
#wmSammelUpload .modal-dialog { max-width: 54rem; margin-left: auto; margin-right: auto; }

.wm-su-dialog { display: flex; flex-direction: column; gap: 1rem; }

/* Ablagefläche — gestrichelter Rahmen in Mail-Türkis. */
.wm-su-zone {
    min-height: 11rem;
    padding: 1.5rem;
    border: 2px dashed rgba(0, 203, 181, 0.75);
    border-radius: var(--border);
    background: rgba(10, 15, 36, 0.6);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wm-su-zone:hover,
.wm-su-zone:focus-visible,
.wm-su-zone.is-dragover {
    border-color: var(--main);
    background: rgba(0, 203, 181, 0.16);
    box-shadow: 0 0 0 3px rgba(0, 203, 181, 0.22);
    outline: none;
}
.wm-su-zone-icon { color: var(--main); font-size: 2.2rem; }
.wm-su-zone-oder,
.wm-su-zone small { color: rgba(255, 255, 255, 0.58); }
.wm-su-waehlen {
    margin: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--main);
    border-radius: var(--border);
    background: rgba(0, 203, 181, 0.22);
    color: var(--white);
    cursor: pointer;
}
/* Hover wie .btn_add:hover und .custom-file label:hover in styles.css. */
.wm-su-waehlen:hover { background: var(--main); color: var(--white); }

/* Übersprungene Dateien (falsche Endung, zu groß) — Fehlertext in Türkis wie die
   Formular-Validierung auf jd-mail, nicht rot. */
.wm-su-fehler {
    min-height: 1.2rem;
    margin-top: -0.5rem;
    color: var(--main);
    text-align: center;
    font-size: 0.88rem;
}

/* Zeilenliste: je Datei eine Zeile. */
.wm-su-liste {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.wm-su-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(0, 203, 181, 0.45);
    border-radius: var(--border);
    background: rgba(10, 15, 36, 0.6);
}
.wm-su-datei-name {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    overflow-wrap: anywhere;
}
.wm-su-name { min-height: 44px; }
.wm-su-bilder label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    margin: 0;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--border);
}
/* Nach der Auswahl wie im Bestand (_getNewsletter.tpl, fileUploaderNewsNew): Wrapper in #00cbb5. */
.wm-su-bilder.hat-bilder,
.wm-su-bilder.hat-bilder label { background-color: #00cbb5; border-radius: 5px; }
/* Entfernen = btn_delete der Plattform (40×40, weißes Symbol, Hover aus styles.css).
   Hier nur Rahmen weg und das Symbol mittig. */
.wm-su-entfernen {
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fuß: Zähler links, Fortschritt, Knöpfe rechts. */
.wm-su-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.wm-su-zaehler { color: var(--white); margin-right: auto; }
.wm-su-stand { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }
/* Fuß-Knöpfe als btn_add mit Text — Bestandsmuster _getMessage.tpl
   („width: auto; height: auto; padding: 0.5rem 1rem"). */
.wm-su-fuss .btn_add {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: none;
}
.wm-su-fuss .btn_add:disabled { opacity: 0.45; cursor: not-allowed; background-color: transparent; }

/* =============================== Mobil =================================== */
/* Gotcha #254: die Mobil-Stile der Plattform hängen an namentlichen Selektor-Listen in
   styles-mobile.css (Abschnitt 4.4). Die Gegenregeln werden hier für #wmSammelUpload
   nachgebildet.
   (a) Rand 1rem wie die Fenster der Listen; KEIN z-index 10010 — der Wert käme von wm-oben
   (20000) und das Fenster läge sonst unter dem Kampagnen-Fenster (siehe Kommentar zu
   #rechnungViewer in styles-mobile.css). */
@media (max-width: 991px) {
    #wmSammelUpload.modal { padding: 1rem !important; }

    /* (b) Dialog im Stapelkontext des .modal halten (bis 768px setzt styles-mobile.css jeden
       .modal-dialog fixed auf den ganzen Viewport). Die Höhe ist ausdrücklich die volle
       Innenhöhe des .modal (Viewport minus 1rem-Rand oben und unten): styles-mobile.css setzt
       height:100% nur bis 768px, darüber gäbe es sonst keine feste Bezugshöhe für
       max-height:100% am Inhalt. */
    #wmSammelUpload .modal-dialog {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        height: 100% !important;
        overflow: visible !important;
    }

    /* (c) Inhalt wie die Fenster der Listen: gerundet, Innenabstand 1.25rem 1rem, Höhe nach
       Inhalt, oben angesetzt. Obergrenze = Dialoghöhe (100%) statt calc(100vh - 2rem): Das
       .modal ist fixed mit height:100% und folgt damit auf iOS/Android der sichtbaren
       Fensterhöhe samt eingeblendeter Browserleisten; 100vh wäre dort die große Höhe ohne
       Leisten und schöbe den Fuß wieder unter den Rand. --vh-voll setzt die Plattform nur ab
       992px. Flex-Spalte: Kopf, Ablage und Fuß behalten ihre Höhe, nur die Liste gibt nach.
       overflow-y bleibt auto als Notnagel für sehr kleine Querformat-Höhen. */
    #wmSammelUpload .modal-content,
    #wmSammelUpload .mc_a {
        border-radius: var(--border) !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        padding: 1.25rem 1rem !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #wmSammelUpload .modal-content > * { flex-shrink: 0; }

    /* Körper (.modal-body mit .wm-su-dialog) füllt den Rest und darf schrumpfen —
       min-height:0 ist nötig, sonst wächst ein Flex-Kind auf seine Inhaltshöhe. */
    #wmSammelUpload .modal-content > .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0;
    }
    #wmSammelUpload .wm-su-dialog {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0.75rem;
    }

    /* (d) Schließen-Knopf wie die Fenster der Listen: absolut im Fenster, transparent +
       Schatten, 40px, Hover in var(--main). Ersetzt die feste 44px-Fassung aus dem
       Inline-Style des Kopf-Bausteins (_modals.tpl, name="header", bis 768px). */
    #wmSammelUpload .modal-close-mobile {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 40px !important;
        height: 40px !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: var(--border) !important;
        color: var(--white) !important;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                    rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        font-size: 1rem !important;
        transition: background-color 0.15s ease !important;
    }
    #wmSammelUpload .modal-close-mobile:hover {
        background-color: var(--main) !important;
        color: var(--white) !important;
    }

    /* (e) Kopf: .modal-header-wrapper (enthält in jd-mail auch den Schließen-Knopf) bekommt
       beidseitig Platz für den 40px-Knopf, damit der zentrierte Titel nicht unter das X gerät
       und mittig bleibt; position static, damit sich der Knopf am .modal-content ausrichtet
       (Muster der Listen in styles-mobile.css). */
    #wmSammelUpload .modal-header-wrapper {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
        position: static !important;
    }

    /* (f) Ablagefläche kompakt: auf Touch-Geräten wird nicht gezogen, also ohne
       großes Symbol und ohne „oder“ — Überschrift, Auswahlknopf (44px) und Hinweis bleiben. */
    .wm-su-zone {
        flex-shrink: 0;
        min-height: 0;
        padding: 0.75rem;
        gap: 0.35rem;
    }
    .wm-su-zone-icon,
    .wm-su-zone-oder { display: none; }
    .wm-su-zone small { font-size: 0.8rem; }

    /* Leere Fehlerzeile nimmt keinen Platz und hebt den Spalt davor auf; das Element
       bleibt für die Live-Ansage (role="alert") im Baum. */
    .wm-su-fehler { flex-shrink: 0; }
    .wm-su-fehler:empty { min-height: 0; margin-top: -0.75rem; }

    /* (g) Liste nimmt den Restplatz und scrollt innen; keine feste vh-Grenze mehr.
       min-height hält mindestens einen Zeilenanfang sichtbar. */
    .wm-su-liste {
        flex: 1 1 auto;
        min-height: 5.5rem;
        max-height: none;
        overscroll-behavior: contain;
    }
    .wm-su-liste:empty { min-height: 0; flex-grow: 0; }

    /* Zeile zweispaltig: Dateiname und Reitername über volle Breite, darunter
       Bilder-Knopf und Entfernen nebeneinander (spart eine Knopfhöhe je Datei). */
    .wm-su-zeile {
        flex-shrink: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }
    .wm-su-datei-name,
    .wm-su-name { grid-column: 1 / -1; }
    .wm-su-bilder,
    .wm-su-bilder label { width: 100%; justify-content: center; }
    .wm-su-entfernen { width: 44px; height: 44px; }

    /* (h) Fuß immer sichtbar: Zähler und Fortschritt über volle Breite, Abbrechen und
       Übernehmen nebeneinander in zwei gleich breiten Spalten (je mindestens 44px hoch). */
    .wm-su-fuss {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem 0.75rem;
    }
    .wm-su-zaehler,
    .wm-su-stand { grid-column: 1 / -1; margin-right: 0; text-align: center; }
    .wm-su-stand:empty { margin-top: -0.5rem; }
    .wm-su-fuss .btn_add { width: 100%; padding: 0.5rem 0.75rem; }

    /* (i) Sammel-Knopf in der Reiterleiste: Touch-Ziel mindestens 44px. jd-mail setzt die
       Reiter-Links mobil mit 0.75rem Innenabstand (styles-mobile.css .nav-tabs .nav-link) —
       gemessen 36,4 px breit (jd-partner 42,6 px). */
    .wm-sammel-knopf {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}