/* Links aus Datei im Reiter „Sub Id´s" (js/subid-links.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), var(--darkblue), var(--white).
   Eigene Klasse statt .custom-file: styles-mobile.css verkleinert jedes
   .mc_a_row .custom-file label mit !important unter 44px (Muster .wm-su-waehlen). */

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

/* Knopf oben rechts ueber den Sub-Id-Feldern (User 16.09.2026); die Liste klappt darunter
   ueber die volle Breite auf.

   Buendig mit den Eingabefeldern: .seg-subid-rows (styles.css) haelt rechts 0,4rem Innenabstand,
   und sobald mehr Felder da sind als hineinpassen, nimmt der Scrollbalken weitere 10px
   (::-webkit-scrollbar width in styles.css). Ohne Scrollbalken waere die Kante 10px weiter
   rechts — deshalb haelt scrollbar-gutter den Platz IMMER frei und der Knopf rueckt um
   denselben Betrag ein. So sitzt er in beiden Faellen auf derselben Kante. */
.seg-subid-rows { scrollbar-gutter: stable; }

/* Beschriftung der Sub-Id-Felder in Weiss und 1rem (User 16.09.2026). Die Vorgabe steht in
   styles.css (.seg-subid-label: 0,78rem, 65 % Weiss) und wird hier ueberschrieben statt dort
   geaendert: der Versionsstring von styles.css liegt in header.tpl, die eine andere Session
   beansprucht, und im Beta-Webroot liegt dort ein fremder, ungepushter Stand. Diese Datei wird
   in footer.tpl NACH styles.css geladen, gleiche Spezifitaet — die spaetere Regel gewinnt. */
.seg-subid-label {
    color: var(--white);
    font-size: 1rem;
}

.seg-subid-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding-right: calc(0.4rem + 10px);
}

/* Auswahlknopf im Look von .custom-file label (styles.css). Das Datei-Feld liegt im
   Label und bleibt unsichtbar, so braucht es keine id. */
.seg-subid-links-waehlen {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background-color: var(--darkblue);
    color: var(--white);
    font-size: 1rem;
    border-radius: var(--border);
    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;
    cursor: pointer;
}
.seg-subid-links-waehlen:hover { background-color: var(--darkRose); }
.seg-subid-links-waehlen input[type="file"] { display: none; }

.seg-subid-links-liste {
    align-self: stretch;   /* Liste ueber die volle Breite, nur der Knopf steht rechts */
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(136, 84, 93, 0.45);
    border-radius: var(--border);
    background: rgba(10, 15, 36, 0.6);
}
/* hidden muss gegen display:flex gewinnen, auch ohne Bootstrap-Reboot. */
.seg-subid-links-liste[hidden] { display: none; }

.seg-subid-links-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--white);
}
.seg-subid-links-datei-name {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    overflow-wrap: anywhere;
}

.seg-subid-links-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.3;
}
.seg-subid-links-hinweis > i { color: var(--darkRose); margin-top: 0.15rem; }

/* Je Link eine Zeile: Nummer, Link, Auswahl der Sub Id. */
.seg-subid-links-zeilen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 20rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.seg-subid-links-zeile {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 11rem;
    gap: 0.75rem;
    align-items: center;
}
.seg-subid-links-nr {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-align: right;
}
.seg-subid-links-url {
    color: var(--white);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* Fuß-Knöpfe als btn_add mit Text, Muster .wm-su-fuss (wm-sammelupload.css). */
.seg-subid-links-fuss {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.seg-subid-links-fuss .btn_add {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: none;
}

/* =============================== Mobil =================================== */
@media (max-width: 991px) {
    /* Auf der schmalen Karte steht der Knopf über die volle Breite, nicht rechts.
       Mobile Scrollbalken liegen über dem Inhalt und brauchen keinen Platz — deshalb hier
       weder Gutter noch Einrückung, sonst wäre der Knopf schmaler als die Felder. */
    .seg-subid-rows { scrollbar-gutter: auto; }
    .seg-subid-links { align-items: stretch; padding-right: 0; }

    /* Touch-Ziel 44px über die volle Kartenbreite. */
    .seg-subid-links-waehlen {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* Nummer und Link oben, Auswahl darunter über die volle Breite. Die Liste scrollt
       nicht selbst: der Reiter-Container darüber scrollt schon. */
    .seg-subid-links-zeilen { max-height: none; overflow-y: visible; padding-right: 0; }
    .seg-subid-links-zeile {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: 0.5rem;
    }
    .seg-subid-links-ziel {
        grid-column: 1 / -1;
        min-height: 44px;
        font-size: 16px;   /* iOS zoomt bei kleinerer Schrift in das Feld */
    }

    /* 🛑 Bestandsfehler aufheben: Die Wert-Felder waren mobil gar nicht antippbar.
       styles-mobile.css (~Z. 3430) gibt dem read-only Publisher-NAMEN in der ersten Spalte einen
       Kasten-Look samt `pointer-events: none !important`. Seit die Publisher eigene Reiter haben
       (09.09.2026) enthält die Zeile nur noch EINE Spalte — sie ist damit zugleich `:first-child`,
       und die Regel trifft die Sub-Id-Eingabefelder. Folge: kein Fokus, keine Tastatur, weder beim
       Tippen noch nach dem Link-Import.

       Aufgehoben wird hier statt an der Quelle, weil `styles-mobile.css` und der Versionsstring in
       `header.tpl` der Session `claude-feld-labels` gehören und im Beta-Webroot beide einen fremden,
       ungepushten Stand tragen. Diese Datei wird später geladen und ist spezifischer
       (.seg-subid-rows in der Kette), das `!important` spiegelt nur das der Bestandsregel.
       Die Quelle gehört trotzdem verengt, sobald die Datei frei ist:
       `input[type="text"]:not(.seg-subid-input)` → [[ToDo — jd-partner Sub-Id-Felder mobil nicht antippbar]].

       Mitgenommen: 16px Schriftgröße, sonst zoomt iOS beim Hineintippen; Zentrierung wie am
       Desktop (die Felder tragen `text-center`, die Bestandsregel erzwingt linksbündig). */
    [id^="subids"] .tab-pane .row .col .seg-subid-rows input.seg-subid-input {
        pointer-events: auto !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    /* Abbrechen und Übernehmen nebeneinander, gleich breit. */
    .seg-subid-links-fuss {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem 0.75rem;
    }
    .seg-subid-links-fuss .btn_add { width: 100%; padding: 0.5rem 0.75rem; }
}