/*
 * ============================================================
 * INSTITUT TERMINE V3
 * ============================================================
 */


/*
 * Screenreader-only.
 */
.ij-v3-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/*
 * ============================================================
 * HAUPTÜBERSICHT
 * ============================================================
 */

.ij-v3-overview {
    width: 100%;
}

.ij-v3-overview-title {
    margin-bottom: 1rem;
}

.ij-v3-print-meta {
    display: none;
}


/*
 * Toolbar.
 */
.ij-v3-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ij-v3-search {
    flex: 1 1 auto;
}

.ij-v3-search-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 1rem;
    font: inherit;
}

.ij-v3-print-button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.7rem 1rem;
    font: inherit;
    cursor: pointer;
}


/*
 * Keine Suchergebnisse.
 */
.ij-v3-no-results {
    margin: 2rem 0;
}


/*
 * ============================================================
 * JAHRE / MONATE
 * ============================================================
 */

.ij-v3-year-group {
    margin: 0 0 3rem;
}

.ij-v3-year-title {
    margin: 0 0 1.5rem;
}

.ij-v3-month-group {
    margin-bottom: 2.5rem;
}

.ij-v3-month-title {
    margin: 0 0 0.75rem;
}


/*
 * Durch Suche ausgeblendet.
 */
.ij-v3-table-row.is-filtered-out,
.ij-v3-month-group.is-filtered-empty,
.ij-v3-year-group.is-filtered-empty {
    display: none;
}


/*
 * ============================================================
 * TABELLENÄHNLICHE LISTE
 * ============================================================
 */

.ij-v3-table {
    width: 100%;
}

.ij-v3-table-header,
.ij-v3-table-row {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.9fr)
        minmax(220px, 2fr)
        minmax(140px, 1.2fr)
        minmax(120px, 1fr)
        minmax(90px, 0.8fr)
        minmax(150px, 1.2fr)
        minmax(170px, 1.4fr);
    gap: 1rem;
    align-items: center;
}

.ij-v3-table-header {
    padding: 0.75rem 1rem;
    font-weight: 700;
    border-bottom: 2px solid currentColor;
}

.ij-v3-table-row {
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.ij-v3-table-cell {
    min-width: 0;
}

.ij-v3-event-title {
    font-weight: 700;
}


/*
 * ============================================================
 * AKTIONEN
 * ============================================================
 */

.ij-v3-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.ij-v3-ausschreibung-link,
.ij-v3-booking-link {
    display: inline-block;
}


/*
 * ============================================================
 * STATUS
 * ============================================================
 */

.ij-v3-status {
    display: inline-block;
    font-weight: 600;
}


/*
 * ============================================================
 * AUTOMATISCHE AUSSCHREIBUNGSSEITE
 * ============================================================
 */

.ij-v3-ausschreibung-termine {
    margin-top: 3rem;
}

.ij-v3-ausschreibung-title {
    margin-bottom: 1.5rem;
}

.ij-v3-ausschreibung-list {
    display: grid;
    gap: 1rem;
}

.ij-v3-ausschreibung-termin {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(120px, 1fr))
        minmax(160px, 1.2fr)
        minmax(150px, auto);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.ij-v3-detail {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ij-v3-detail-label {
    font-size: 0.85em;
    opacity: 0.75;
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 900px) {

    .ij-v3-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ij-v3-print-button {
        width: 100%;
    }


    /*
     * Tabellenkopf wird auf Mobilgeräten nicht benötigt.
     */
    .ij-v3-table-header {
        display: none;
    }

    .ij-v3-table-row {
        display: block;
        padding: 1rem 0;
    }

    .ij-v3-table-cell {
        display: grid;
        grid-template-columns:
            minmax(110px, 0.7fr)
            1.3fr;
        gap: 1rem;
        padding: 0.3rem 0;
    }

    .ij-v3-table-cell::before {
        content: attr(data-label);
        font-weight: 700;
    }

    .ij-v3-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .ij-v3-actions::before {
        align-self: flex-start;
    }


    .ij-v3-ausschreibung-termin {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .ij-v3-table-cell {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .ij-v3-table-cell::before {
        font-size: 0.85em;
        opacity: 0.75;
    }


    .ij-v3-ausschreibung-termin {
        grid-template-columns: 1fr;
    }

}


/*
 * ============================================================
 * DRUCK / PDF
 * ============================================================
 */

#ij-v3-print-root {
    display: none;
}


@media print {

    @page {
        margin: 12mm;
    }


    /*
     * Beim normalen Browser-Druck ohne unseren Button
     * verändert V3 zunächst nichts.
     *
     * Erst unser Button setzt diese Klasse.
     */
    body.ij-v3-printing > *:not(#ij-v3-print-root) {
        display: none !important;
    }


    body.ij-v3-printing #ij-v3-print-root {
        display: block !important;
    }


    #ij-v3-print-root {
        font-size: 10pt;
    }


    #ij-v3-print-root .ij-v3-overview {
        display: block !important;
    }


    #ij-v3-print-root .ij-v3-print-meta {
        display: block;
        margin: 0 0 1.5rem;
    }


    /*
     * Eine eventuell zuvor aktive Suche darf die
     * Druckausgabe niemals beeinflussen.
     */
    #ij-v3-print-root .is-filtered-out,
    #ij-v3-print-root .is-filtered-empty {
        display: block !important;
    }


    #ij-v3-print-root .ij-v3-table-header,
    #ij-v3-print-root .ij-v3-table-row {
        display: grid !important;

        grid-template-columns:
            1fr
            2.3fr
            1.4fr
            1.2fr
            0.9fr
            1.3fr;

        gap: 4mm;
    }


    #ij-v3-print-root .ij-v3-table-header {
        padding: 2mm 0;
    }


    #ij-v3-print-root .ij-v3-table-row {
        padding: 3mm 0;
        break-inside: avoid;
        page-break-inside: avoid;
    }


    #ij-v3-print-root .ij-v3-table-cell {
        display: block;
    }


    #ij-v3-print-root .ij-v3-table-cell::before {
        display: none !important;
    }


    #ij-v3-print-root .ij-v3-actions {
        display: none !important;
    }


    #ij-v3-print-root .ij-v3-year-group {
        break-before: auto;
    }


    #ij-v3-print-root .ij-v3-month-group {
        break-inside: auto;
    }


    #ij-v3-print-root .ij-v3-month-title {
        break-after: avoid;
    }


    #ij-v3-print-root a {
        color: inherit;
        text-decoration: none;
    }

}

/*
 * ============================================================
 * BUCHUNGSSEITE
 * ============================================================
 */

.ij-v3-booking {
    width: 100%;
}

.ij-v3-booking-summary {
    margin-bottom: 2rem;
}

.ij-v3-booking-title {
    margin-bottom: 1.5rem;
}

.ij-v3-booking-details {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin: 0;
}

.ij-v3-booking-details > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ij-v3-booking-details dt {
    font-weight: 700;
}

.ij-v3-booking-details dd {
    margin: 0;
}

.ij-v3-booking-notice {
    margin-top: 1.5rem;
}

.ij-v3-booking-form {
    margin-top: 2rem;
}

.ij-v3-booking-unavailable,
.ij-v3-booking-message {
    margin: 1.5rem 0;
}

@media (max-width: 600px) {

    .ij-v3-booking-details {
        grid-template-columns: 1fr;
    }

}