html, body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    height: 100%;
}

:fullscreen {
    background-color: var(--bs-body-bg);
}

.appicon {
    width: 1.5rem;
}

#app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content {
    padding-top: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.sidebar {
    background-image: linear-gradient(to bottom right, light-dark(#189292, #0c4949) 0%, light-dark(#167991, #0b3c48) 100%);
    box-shadow: 0px 0px 10px light-dark(#808080, #5a5a5a);
    display: flex;
    flex-direction: column;
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .navigation {
        height: 100%;
        overflow: auto;
    }

    .sidebar .bi {
        font-size: 1.2rem;
    }

    .sidebar .label {
        padding-left: 1rem;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #fff;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a:hover, .sidebar .nav-item a:focus {
                background-color: rgba(255,255,255,0.1);
            }

            .sidebar .nav-item a.active {
                background-color: rgba(0,0,0,0.4);
            }

                .sidebar .nav-item a.active:hover {
                    background-color: rgba(0,0,0,0.6);
                }

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

/* fill */
/* The element marked .fill takes the height .content has left, and every element between the two
   grows along with it, so the flex chain does not have to be spelled out on each of them.
   min-height: 0 is what lets an overflowing .fill scroll instead of growing the page.
   Modals are outside the page layout and are left alone. */
:where(.content :has(.fill:not(.modal .fill)), .content .fill:not(.modal .fill)) {
    flex: 1 1 0;
    min-height: 0;
}

    /* rows and explicit flex containers keep their own direction */
    :where(.content :has(.fill:not(.modal .fill)):not(.row, .d-flex)) {
        display: flex;
        flex-direction: column;
    }

/* /fill */

/* bootstrap */
.btn-link {
    text-decoration: none;
}

.form-control[readonly] {
    background-color: var(--bs-secondary-bg);
}

/* textarea */
textarea.autosize {
    field-sizing: content;
}

/* grid */
.table-container {
    overflow: auto;
    width: 100%;
    position: relative;
}

    /* a modal has no layout to fill, so its grid scrolls inside it instead of growing the modal */
    .modal .table-container {
        max-height: 70vh;
    }

    .table-container table thead th {
        position: sticky;
        z-index: 1;
        top: 0;
        background-color: var(--bs-body-bg);
        border: 0;
    }

        /* fix bootstrap border */
        .table-container table thead th:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            border-bottom: 1px solid #dee2e6;
        }

        .table-container table thead th:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 2px solid #dee2e6;
        }

    /* force single line to keep row height consistent */
    .table-container table tbody tr.singleline > td > span {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
    }

/* /grid */

/* file */
.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

        .btn-file input[type=file]::-webkit-file-upload-button {
            cursor: pointer;
        }

/* /file */

/* cms */
ul.cms-hierarchy {
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    cursor: default;
    list-style: none;
    height: 100%;
    overflow: auto;
}

    ul.cms-hierarchy ul {
        list-style: none;
        padding-left: 1rem;
    }

    ul.cms-hierarchy li {
        white-space: nowrap;
    }

    ul.cms-hierarchy .state {
        cursor: pointer;
        display: inline-block;
        width: 16px;
    }

/* /cms */

/* monaco */
.monaco-editor a {
    text-decoration: initial;
}
/* /monaco */

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "");
}

@media (min-width: 768px) {
    #app {
        flex-direction: row;
    }

    .content {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar.small .label {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/* ErrorAlertHost: above bootstrap modals (1055) and at the level of its toasts */
.error-alert-host {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1090;
    width: min(36rem, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 1rem;
}

.error-alert-message {
    white-space: pre-line;
}

.error-alert-details > summary {
    cursor: pointer;
    width: fit-content;
}

.error-alert-details > pre {
    max-height: 20rem;
    overflow: auto;
    white-space: pre-wrap;
}

/*
 * The icon of Bootstrap's .is-invalid field, in the warning colour and without the coloured border: a setting that only
 * takes effect after a restart. Shown once the user has changed the field (:user-valid - the fields have no constraints,
 * so it means "edited and left"); the padding is always there so the text doesn't shift when it appears.
 */
.form-control.is-restart-required {
    padding-right: calc(1.5em + 0.75rem);
}

.form-control.is-restart-required:user-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc107'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}