/**
 * Layout
 */
body {
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    margin: 3rem 0;
}


/**
 * Buttons
 */
.jmulib-button-secondary {
    border-radius: 0.5rem;
    padding:var(--jmulib-button-padding);
}


/**
 * Skip Link
 */
a.skip-to-main {
    background: #fff;
    margin: 1rem;
    outline-color: #fff;
    outline-offset: 0.25rem;
    padding: 0.5rem 0.75rem;
    position: absolute;
    transform: translateY(-140%);
    transition: transform 0.3s;
    z-index: 15;

    &:focus-visible {
        transform: translateY(0%);
    }
}


/**
 * Forms
 */
form {
    .field-desc {
        display: block;
        margin: -0.5rem 0 0.5rem;
    }

    .grid-2 {
        @media (width >= 768px) {
            align-items: end;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 2rem;
        }
    }
}


/**
 * Login
 * Course Reserves: #ucLoginUserControl_Login1
 * Dataset Request: #Login1
 */
table:is(#ucLoginUserControl_Login1, #Login1) {
    display: block;
    margin-bottom: 0;

    tbody tr {
        background-color: unset;
    }

    td {
        border: 0;
        padding: 0 0 1.5rem;

        > span {
            display: none;
        }
    }

    label {
        margin: 0 1rem 0 0;
    }

    input {
        margin-bottom: 0;
    }
}


/**
 * App-specific
 */
/* Course Reserves & Digital Course Reserves */
:is([data-app="courseReserves"], [data-app="digitalCourseReserves"]) {
    fieldset {
        padding: 0 1.5rem 0.75rem;
    }

    legend {
        padding: 0 0.5rem;
        margin-left: -0.5rem;
    }

    #requestItemsContainer {
        overflow-x: auto;

        table {
            min-width: 800px;
        }
    }

    form td :is(input, select) {
        margin-bottom: 0;
    }
}

/* Dataset Request */
[data-app="datasetRequest"] {
    .select-flex {
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;

        > div {
            flex-grow: 1;
        }

        select {
            width: 100%;
        }
    }
}