/* Lauf-Banner fuer asynchrone Atlantis-Laeufe (Zeugnisvorschau, Atlantis-Listen) -- template/js/atlantisListJobs.js.
   Laedt auf jeder Seite (meta.tpl), deshalb alles unter #atlantisListJobsBanner bzw. dem Dialog "Generiere Liste". */

/* z-index 9: ueber dem Seiteninhalt, unter den App-Dialogen (customDialog ab 10, jQuery UI ab 100) */
#atlantisListJobsBanner {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9;
    width: 26rem;
    max-width: calc(100vw - 3rem);
    background-color: white;
    border: var(--atlantis-std-border);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 2.5rem rgba(52, 56, 70, 0.22);
    color: var(--atlantis-anthracite);
    line-height: 1.4;
    overflow: hidden;
}

#atlantisListJobsBanner .atlJobsHeader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--atlantis-lightgrey);
}

body:not(.isMobile) #atlantisListJobsBanner .atlJobsHeader:hover {
    background-color: var(--atlantis-blue-trans);
}

#atlantisListJobsBanner .atlJobsHeading {
    font-weight: bold;
}

#atlantisListJobsBanner .atlJobsSummary {
    flex: 1;
    text-align: right;
    white-space: nowrap;
}

#atlantisListJobsBanner .atlJobsHeaderSpinner {
    display: none;
    height: 1.25rem;
}

#atlantisListJobsBanner.atlJobsRunning .atlJobsHeaderSpinner {
    display: inline-block;
}

/* Unten verankert: offen zeigt der Pfeil nach unten (zuklappen), zu nach oben (aufklappen) */
#atlantisListJobsBanner .atlJobsToggle {
    height: 1.5rem;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

#atlantisListJobsBanner .atlJobsList {
    max-height: 40vh;
    overflow-y: auto;
}

#atlantisListJobsBanner .atlJobsRow {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--atlantis-lightgrey);
}

#atlantisListJobsBanner .atlJobsStatus_timeout {
    box-shadow: inset 0.25rem 0 0 var(--atlantis-red-text);
}

#atlantisListJobsBanner .atlJobsIcon {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
}

#atlantisListJobsBanner .atlJobsSpinner,
#atlantisListJobsBanner .atlJobsHeaderSpinner {
    animation: atlJobsSpin 1.2s linear infinite;
}

@keyframes atlJobsSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#atlantisListJobsBanner .atlJobsText {
    flex: 1;
    min-width: 0;
}

#atlantisListJobsBanner .atlJobsTitle {
    font-weight: bold;
    overflow-wrap: anywhere;
}

#atlantisListJobsBanner .atlJobsInfo,
#atlantisListJobsBanner .atlJobsError {
    margin-top: 0.25rem;
}

#atlantisListJobsBanner .atlJobsError {
    color: var(--atlantis-red-text);
}

/* Server-Meldung mit <br><br>: im Banner nur ein Zeilenumbruch */
#atlantisListJobsBanner .atlJobsError br + br {
    display: none;
}

/* "Datei öffnen" + Entfernen unter dem Titel, damit der Titel nicht umbricht */
#atlantisListJobsBanner .atlJobsActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

#atlantisListJobsBanner .atlJobsDismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

#atlantisListJobsBanner .atlJobsDismiss img {
    height: 1.5rem;
}

/* Fehlerzeile: Entfernen oben rechts in der Zeile */
#atlantisListJobsBanner .atlJobsRow > .atlJobsDismiss {
    margin-top: -0.5rem;
    margin-right: -0.5rem;
}

#atlantisListJobsBanner .atlJobsOpen:focus-visible,
#atlantisListJobsBanner .atlJobsDismiss:focus-visible,
#generatingListDialog #moveListJobToBannerButton:focus-visible {
    outline: 2px solid var(--atlantis-blue-text);
    outline-offset: 2px;
}

/* Kopfzeile: Ring nach innen, sonst schneidet overflow: hidden des Banners ihn ab */
#atlantisListJobsBanner .atlJobsHeader:focus-visible {
    outline: 2px solid var(--atlantis-blue-text);
    outline-offset: -2px;
}

/* Zugeklappt: nur die Kopfzeile als Pille */
#atlantisListJobsBanner.atlJobsCollapsed {
    width: auto;
}

#atlantisListJobsBanner.atlJobsCollapsed .atlJobsList {
    display: none;
}

#atlantisListJobsBanner.atlJobsCollapsed .atlJobsHeader {
    padding: 0.5rem 1rem;
}

#atlantisListJobsBanner.atlJobsCollapsed .atlJobsToggle {
    transform: rotate(0deg);
}

#atlantisListJobsBanner.atlJobsCollapsed.atlJobsHasReady {
    border-color: var(--atlantis-ampel-gruen);
}

#atlantisListJobsBanner.atlJobsCollapsed.atlJobsHasFailed,
#atlantisListJobsBanner.atlJobsOffline,
#atlantisListJobsBanner.atlJobsCollapsed.atlJobsOffline {
    border-color: var(--atlantis-red-text);
}

#atlantisListJobsBanner.atlJobsOffline .atlJobsSpinner,
#atlantisListJobsBanner.atlJobsOffline .atlJobsHeaderSpinner {
    animation: none;
}

#atlantisListJobsBanner.atlJobsOffline .atlJobsSummary {
    color: var(--atlantis-red-text);
    white-space: normal;
}

/* Platz unter dem Banner freihalten: das Ende der Noten-/Listen-Scroller laesst sich darunter hervorscrollen.
   :has() -- aeltere Browser ignorieren die Regel, dann verdeckt das Banner nur wie bisher (Zuklappen hilft). */
body.atlJobsBannerShown #table_scroller,
body.atlJobsBannerShown .notenkopf_table_scroll {
    padding-bottom: var(--atl-jobs-space, 0);
}

/* Einzelleistung: die Ø-Zeile klebt per sticky unten -- ein padding zoege sie mit hoch, deshalb Abstandhalter */
body.atlJobsBannerShown .noten_einzel_eingabe_tabs:has(table)::after {
    content: "";
    display: block;
    height: var(--atl-jobs-space, 0);
}

/* Per Tastatur angesprungene Felder nicht unter dem Banner stehen lassen (:has() in eigener Regel -- aeltere
   Browser verwerfen sonst die ganze Regel) */
body.atlJobsBannerShown #table_scroller,
body.atlJobsBannerShown .notenkopf_table_scroll {
    scroll-padding-bottom: var(--atl-jobs-space, 0);
}

body.atlJobsBannerShown .noten_einzel_eingabe_tabs:has(table) {
    scroll-padding-bottom: var(--atl-jobs-space, 0);
}

body.atlJobsBannerShown #auswertungenListContainer > div:has(> #auswertungenAtlList) {
    padding-bottom: var(--atl-jobs-space, 0);
    min-height: 0;
}

/* Dialog "Generiere Liste": Button und Hinweis unter der Ladeanzeige; align-items, sonst dehnt die Spalte das GIF */
#generatingListDialog .loading {
    align-items: center;
}

#generatingListDialog #moveListJobToBannerButton {
    margin-bottom: 0.5rem;
}

#generatingListDialog #moveListJobToBannerHint {
    max-width: 18rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Mobil: unten volle Breite, Liste niedriger, Seite scrollt im Dokument */
body.isMobile #atlantisListJobsBanner {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    border-radius: 1rem 1rem 0 0;
}

body.isMobile #atlantisListJobsBanner .atlJobsList {
    max-height: 30vh;
}

body.isMobile #atlantisListJobsBanner.atlJobsCollapsed {
    left: auto;
    right: 1rem;
    bottom: 1rem;
    border-radius: 1rem;
}

/* Nur Seiten, die im Dokument scrollen -- Seiten mit eigenem Scroller wuerden sonst als Ganzes verrutschen */
body.isMobile.atlJobsBannerShown:not(:has(#table_scroller, .notenkopf_table_scroll, #fixedPageContainer)) {
    padding-bottom: var(--atl-jobs-space, 0);
}