/* Sammel-Upload mehrerer Werbemittel (#wmSammelUpload, js/wm-sammelupload.js, 15.09.2026).
   Zwei getrennte Blöcke: Desktop ohne Media-Query, Mobil ab 991px abwärts.
   Farben nur aus dem Partner-Satz: var(--darkRose) / #88545d, var(--darkblue), var(--white).
   Kein eigenes Rot: Fehlertext in Rosé (UI Formulare & Validierung, Variante A jd-partner),
   Entfernen und Fuß-Knöpfe sind die Plattform-Knöpfe btn_delete / btn_add (User 15.09.2026). */

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

/* Das Werkzeug-Gerüst aus _modals.tpl ist .modal.position-absolute (Bootstrap: absolute).
   Absolut hängt das Fenster am Dokumentanfang — der Kampagnen-Editor ist beim Öffnen
   aber weit gescrollt, das Fenster läge außerhalb des Sichtfensters. 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
   "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
   Breite der .mc_a je Desktop-Breakpoint mit !important in vw (85–65 vw) und zentriert sie
   mit 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 — Nachbau der Rechnungs-Ablage in eigenen Klassen. */
.wm-su-zone {
    min-height: 11rem;
    padding: 1.5rem;
    border: 2px dashed rgba(136, 84, 93, 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(--darkRose);
    background: rgba(136, 84, 93, 0.16);
    box-shadow: 0 0 0 3px rgba(136, 84, 93, 0.22);
    outline: none;
}
.wm-su-zone-icon { color: var(--darkRose); 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(--darkRose);
    border-radius: var(--border);
    background: rgba(136, 84, 93, 0.22);
    color: var(--white);
    cursor: pointer;
}
.wm-su-waehlen:hover { background: var(--darkRose); color: var(--white); }

/* Übersprungene Dateien (falsche Endung, zu groß) — Fehlertext in Rosé wie die
   Formular-Validierung auf jd-partner, nicht rot. */
.wm-su-fehler {
    min-height: 1.2rem;
    margin-top: -0.5rem;
    color: var(--darkRose);
    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(136, 84, 93, 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: Wrapper in #88545d. */
.wm-su-bilder.hat-bilder,
.wm-su-bilder.hat-bilder label { background-color: #88545d; 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 / _getUser.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. Die vier Gegenregeln werden hier für #wmSammelUpload nachgebildet.
   (a) Rand wie die anderen Fenster; 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/#setRechnungUpload in styles-mobile.css). */
@media (max-width: 991px) {
    #wmSammelUpload.modal { padding: 0.875rem !important; }

    /* (b) Dialog im Stapelkontext des .modal halten (Desktop: position fixed/absolute
       ergäbe einen eigenen Kontext unter dem Schleier). Die Höhe ist ausdrücklich die
       volle Innenhöhe des .modal (Viewport minus 0.875rem-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 im Mail-Stil: gerundet, Höhe nach Inhalt, oben angesetzt.
       Obergrenze = Dialoghöhe (100%) statt calc(100vh - 1.75rem): 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.1rem 0.875rem !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: absolut im Fenster, transparent + Schatten, 40px. */
    #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(--darkRose) !important;
        color: var(--white) !important;
    }

    /* (e) Der ungeklammerte Header-Div des Gerüsts (nur Inline-Style, kein
       .modal-header-wrapper) bekommt beidseitig Platz für den 40px-Schließen-Knopf, damit
       der zentrierte Großbuchstaben-Titel nicht unter das X gerät und mittig bleibt
       (Muster #updateSystems in styles-mobile.css). */
    #wmSammelUpload > .modal-dialog > .modal-content > div[style*="flex-direction: column"] {
        padding-right: 3.5rem !important;
        padding-left: 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; }
}