html,
body,
app {
    background-color: #e6e6e6ff;
}

app {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.fixed-main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tile {
    width: 300px;
}

.tile .mud-card-header-content {
    min-width: 0;
}

.tile-title {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* header on top, below it the area that scrolls: the tiles, or the table that scrolls in itself;
   a container, so the narrow layouts below follow the width of the view, not of the window (the drawer takes some) */
.tile-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    container: tile-view / inline-size;
}

/* the tiles fade out towards the header and the pager instead of being cut off at their edges;
   at rest the first and the last row lie outside the fades (their margins are as high as the fades) */
.tile-view-content {
    flex: 1 1 auto;
    min-height: 0;
    /* the tiles bring their own margin (ma-4), so their outer edges line up with header and pager */
    margin: 0 -16px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* bar above the items, a surface like the tiles and the table (MudPaper, elevation 1);
   on a layer of its own so its shadow lies over the items */
.tile-view-header {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
}

.tile-view-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
}

/* one surface for the table and its pager, as with MudTable; only the rows scroll */
.tile-view-list .tile-table-paper,
.tile-view-list .tile-table {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tile-view-list .tile-table .mud-table-container {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.tile-view-list .mud-table-pagination {
    flex: none;
}

/* pager below the tiles, a surface like the header */
.tile-view-pager {
    flex: none;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
}

.tile-view-pager .mud-table-pagination-toolbar {
    border-top: none;
}

/* search field in the header, the same rounded track as the switch */
.tile-view-search {
    flex: 0 1 420px;
    min-width: 200px;
}

.tile-view-search.mud-input-control,
.tile-view-search .mud-input-control {
    margin-top: 0;
}

.tile-view-search .mud-input {
    height: 38px;
    padding: 0 8px 0 14px;
    border-radius: 999px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.07);
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.tile-view-search .mud-input:focus-within {
    background-color: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.tile-view-search .mud-input .mud-input-slot {
    padding: 0 0 0 4px;
    font-size: 0.875rem;
}

/* filter in the header: a pill like the search field, blue while it filters */
.tile-view-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    padding: 0 8px 0 14px;
    border: none;
    border-radius: 999px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.07);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.tile-view-filter:hover {
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.11);
}

.tile-view-filter.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14);
    color: var(--mud-palette-primary);
}

.tile-view-filter:disabled {
    opacity: 0.5;
    cursor: default;
}

.tile-view-filter:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.tile-view-filter-label {
    color: var(--mud-palette-text-secondary);
}

.tile-view-filter-label::after {
    content: ":";
}

.tile-view-filter .mud-icon-root {
    font-size: 20px;
}

.tile-view-filter-value {
    display: inline-grid;
    text-align: left;
}

.tile-view-filter-value > span {
    grid-area: 1 / 1;
    visibility: hidden;
}

.tile-view-filter-value > span.selected {
    visibility: visible;
}

.tile-view-search .mud-input-adornment-start .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    font-size: 22px;
}

/* segmented switch: a track with a thumb that slides under the active option */
.tile-view-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.07);
}

.tile-view-toggle .mud-tooltip-root {
    display: flex;
}

.tile-view-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 44px;
    height: 32px;
    border-radius: 999px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.06);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tile-view-toggle-list .tile-view-toggle-thumb {
    transform: translateX(44px);
}

.tile-view-toggle-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 200ms ease;
}

.tile-view-toggle-option:hover {
    color: var(--mud-palette-text-primary);
}

.tile-view-toggle-option.active {
    color: var(--mud-palette-primary);
}

.tile-view-toggle-option:disabled {
    cursor: default;
    opacity: 0.5;
}

.tile-view-toggle-option:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.tile-view-toggle-option .mud-icon-root {
    font-size: 22px;
}

.tile-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-table .tile-row-image {
    width: 1%;
    padding-right: 0;
}

.tile-table .tile-row-image img {
    display: block;
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.tile-table .tile-row-name {
    width: 35%;
}

/* shown instead of the items when the search or the filters let none through */
.tile-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.tile-view-empty .mud-icon-root {
    font-size: 40px;
    opacity: 0.6;
}

.tile-table .tile-row-type {
    width: 1%;
    white-space: nowrap;
}

/* a small pill like the filters in the header */
.tile-type-label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.07);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.tile-table .tile-row-actions {
    width: 1%;
    white-space: nowrap;
}

/* too narrow for the columns: each row of the list becomes a block of its own, without the column header;
   the name with the type next to it, the description below, image and actions at the sides */
@container tile-view (max-width: 900px) {
    /* MudBlazor.min.css is loaded after this file, the extra .tile-view-list wins over its table selectors */
    .tile-view-list .tile-table table,
    .tile-view-list .tile-table table tbody,
    .tile-table tr:not(.tile-row),
    .tile-table tr:not(.tile-row) > td {
        display: block;
    }

    .tile-view-list .tile-table table thead {
        display: none;
    }

    .tile-table .tile-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "image name type actions"
            "image description description actions";
        align-items: center;
        column-gap: 16px;
        padding: 12px 8px 12px 16px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .tile-table .tile-row:last-child {
        border-bottom: none;
    }

    .tile-table .tile-row > td {
        display: block;
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    .tile-table .tile-row-image {
        grid-area: image;
    }

    .tile-table .tile-row-name {
        grid-area: name;
    }

    .tile-table .tile-row-type {
        grid-area: type;
    }

    /* the cells have no padding here, the spacing between them is margin */
    .tile-table .tile-row-description {
        grid-area: description;
        margin-top: 2px;
    }

    .tile-table .tile-row-actions {
        grid-area: actions;
    }
}

/* the filters go below the search, the switch stays last: next to the last filter or on a line of its own at the right */
@container tile-view (max-width: 760px) {
    .tile-view-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .tile-view-header > .flex-grow-1 {
        display: none;
    }

    .tile-view-toggle {
        margin-left: auto;
    }

    /* next to the switch when there are no filters, a line of its own above them otherwise */
    .tile-view-search {
        flex: 1 1 0;
        min-width: 0;
    }

    .tile-view-header:has(> .mud-menu) .tile-view-search {
        flex-basis: 100%;
    }

    /* the filters share their line, or take one each when they do not fit next to each other */
    .tile-view-header > .mud-menu {
        flex: 1 1 auto;
    }

    .tile-view-header > .mud-menu .tile-view-filter {
        width: 100%;
    }

    .tile-view-filter .mud-icon-root {
        margin-left: auto;
    }
}

/* phone: one tile per line across the full width; in the list the type goes below the name,
   description and actions get a line each */
@container tile-view (max-width: 640px) {
    .tile-view .tile {
        width: calc(100% - 32px);
    }

    .tile-table .tile-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "image name"
            "image type"
            "description description"
            "actions actions";
        padding: 12px 16px 4px;
    }

    .tile-table .tile-row-type {
        justify-self: start;
        margin-top: 4px;
    }

    .tile-table .tile-row-description {
        margin-top: 8px;
    }

    /* the icon buttons bring their own padding, so their icons line up with the text */
    .tile-table .tile-row-actions {
        margin: 0 -12px;
    }
}

.on-top {
    z-index: 100;
}

.bottom-right {
    right: 0px;
    bottom: 0px;
    width: auto !important;
}

.plk-dd-inprogess > * {
    pointer-events: none;
}

/*dropzone style style*/
.plk-dd-dropzone {
    min-height: 50px;
    flex-wrap: wrap !important;
    display: flex !important;
}

/*drag drop styles*/
.plk-dd-spacing {
    height: 10px;
}

.plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.6;
        animation: blinker 1s linear infinite;
    }

.plk-dd-dragged-over-denied {
    background-color: red;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
    opacity: 0.5;
}

    .plk-dd-in-transit > div {
        opacity: 0.5;
    }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

.plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.9;
        animation: blinker 1s linear infinite;
    }

.plk-dd-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.mud-tabs {
    height: 100%;
}

    .mud-tabs.mud-tabs-rounded .mud-tabs-panels {
        background: var(--mud-palette-surface);
        height: 100%;
        overflow: auto;
    }

.item-selected {
    background: var(--mud-palette-secondary-lighten);
}

.blocklyModalContent {
    overflow-y: auto;
    height: 500px;
}

/* Overlays the image with its edit button instead of taking up a row of its own. */
.button-on-image {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

.preview-image {
    position: relative;
    width: 250px;
    height: 135px;
    cursor: pointer;
    overflow: hidden;
}

    .preview-image:hover {
        box-shadow: var(--mud-elevation-4);
    }

.image-container {
    overflow: scroll;
    max-height: 462px;
    min-height: 152px;
}

.mud-dialog-width-lg {
    max-width: 1414px !important;
}

.table-actions {
    margin-top: -52px;
}

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.blocklyDropDownDiv {
    z-index: 1700;
}

.mud-main-content {
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
    padding-bottom: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}

@media(min-width:0) and (orientation:landscape) {
    .mud-main-content {
        padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
        padding-bottom: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
    }
}

@media(min-width:600px) {
    .mud-main-content {
        padding-top: var(--mud-appbar-height);
        padding-bottom: var(--mud-appbar-height);
    }
}

.mud-table-container {
    flex-grow: 1 !important;
}

.mud-table-pagination {
    overflow: unset !important;
}

/* MudBlazor wraps the pager only for narrow viewports; tables in narrow grid columns need it too,
   as does the pager of the TileView, which is not inside a .mud-table.
   MudBlazor.min.css is loaded after this file, so the selectors need the extra .mud-table to win. */
.mud-table .mud-table-pagination-toolbar,
.tile-view .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
}

    .mud-table .mud-table-pagination-toolbar .mud-table-pagination-spacer,
    .tile-view .mud-table-pagination-toolbar .mud-table-pagination-spacer {
        flex: 1 1 auto;
    }

    /* as high as the action buttons: no change on one line, more space above a wrapped line */
    .mud-table .mud-table-pagination-toolbar .mud-table-pagination-caption,
    .tile-view .mud-table-pagination-toolbar .mud-table-pagination-caption {
        min-height: 48px;
    }

    /* the rows-per-page caption and select share this container; keep the select centered next to the taller caption */
    .mud-table .mud-table-pagination-toolbar .mud-table-pagination-display {
        align-items: center;
    }

    .mud-table .mud-table-pagination-toolbar .mud-table-pagination-actions,
    .tile-view .mud-table-pagination-toolbar .mud-table-pagination-actions {
        margin-left: auto;
        margin-inline-start: auto;
    }

.big-dialog {
    height: 75vh !important;
}

.page-content {
    height: calc(100% - 48px);
}

/* DiagnosisEditor - ResultTable-style layout classes */
.result-header {
    max-width: 70px;
}

.result-header-head {
    height: 120px;
}

.result-header-content {
    transform: rotate(90deg) translate(-19px, 0px);
    margin-top: 50% !important;
    margin-bottom: 50% !important;
    width: 37px;
    text-align: center;
}

.result-cell {
    padding: 8px;
    text-align: center;
}

.result-cell-button {
    width: 48px !important;
    height: 48px !important;
}

.result-header-task {
    text-align: center;
}

.no-wrap {
    white-space: nowrap;
}

/* The rating swatch in the button dialog. Carries no colour of its own - it takes one of
   the color-scoringcode-* classes below, the same ones the teacher preview paints with. */
.scoringcode-tile {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* One of the tiles the author picks a rating from. */
.scoringcode-choice {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .scoringcode-choice:hover {
        box-shadow: var(--mud-elevation-4);
    }

/* The rating the button carries. Drawn outside the tile so the colour stays untouched. */
.scoringcode-chosen {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Scoring color codes */
.color-scoringcode-green {
    background-color: #4CAF50 !important;
}

.color-scoringcode-yellow {
    background-color: #FFF59D !important;
}

.color-scoringcode-yelloworange {
    background-color: #FFEB3B !important;
}

.color-scoringcode-orange {
    background-color: #FFC107 !important;
}

.color-scoringcode-redorange {
    background-color: #9575CD !important;
}

.color-scoringcode-red {
    background-color: #673AB7 !important;
}

.color-scoringcode-black {
    background-color: #000000 !important;
}

.color-scoringcode-missingsign {
    background-color: #EEEEEE !important;
}

.color-scoringcode-questionmark {
    background-color: #EEEEEE !important;
}

.color-scoringcode-unknown {
    background-color: #BDBDBD !important;
}

.color-summary {
    background-color: #90A4AE !important;
}

/* Search bar in app bar - white icon */
.title-search .mud-icon-root.mud-svg-icon {
    fill: white;
}

.title-search .mud-input-control {
    margin-top: 0;
}

/* JSON text field - monospaced, so the indentation lines up; the adornment sits at the top instead of the vertical middle */
.json-text-field textarea {
    font-family: monospace;
}

.json-text-field .mud-input {
    align-items: flex-start;
}

.json-text-field .mud-input-adornment {
    height: auto;
    max-height: none;
}

/* Codebook table - column widths independent of expanded groups */
.codebook-table table {
    table-layout: fixed;
}

/* Item changes dialog - column widths independent of the chosen renames */
.item-changes-table table {
    table-layout: fixed;
}

.item-changes-table td {
    overflow-wrap: anywhere;
}

/* Codebook table - only the rows scroll, so the header stays pinned */
.codebook-table .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

/* Codebook table - the loading bar spans 1000 columns, keep it out of the fixed column layout */
.codebook-table .mud-table-loading-row > th {
    position: absolute !important;
    left: 0;
    right: 0;
}

/* Codebook table - a row jumped to from the study validation lights up briefly */
.codebook-table tr.codebook-focus-row > td {
    animation: codebook-focus-row 2.5s ease-out;
}

@keyframes codebook-focus-row {
    0%, 40% {
        background-color: var(--mud-palette-warning-lighten);
    }

    100% {
        background-color: transparent;
    }
}

/* References of a key - only the rows scroll, so the header and the rename above stay */
.key-references-table .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ALEA codebook - a button or support task jumped to from the references of a key */
.alea-focus,
tr.alea-focus > td {
    animation: codebook-focus-row 2.5s ease-out;
}

/* ---------------------------------------------------------------------------
   Study tabs: flat, and the group bar pinned.

   The study page has two levels of tabs - the study's own and, for an ALEA
   study, the group inside it. The outer panel area already scrolls on its own
   (see .mud-tabs-rounded .mud-tabs-panels above), so the outer bar stays put.
   The group bar sits inside that scrolling area, so it has to pin itself.

   Both bars are slimmed down: two full-height toolbars would have taken a
   third of the screen before any content.

   The class names come from TabHeaderClass on MudTabs, not from MudBlazor's
   own markup - an earlier attempt guessed at the markup and named an element
   that does not exist, so none of it had any effect.
   --------------------------------------------------------------------------- */

/* A sticky element can only hold position inside its own box. The global
   .mud-tabs rule gives every tab set height:100%, which for the inner set is
   one screenful - so the bar ran out of box after one screen and scrolled off
   with it. Letting the inner set grow with its content gives the bar the whole
   panel to stay pinned over.
   The outer panel area has pa-6 (TabPanelsClass in StudyDetails). The inner set
   pulls itself up over those 24px, so its bar sits right under the outer bar
   from the start: pinned below the padding, scrolled content showed through
   the gap; pinned above it, the bar jumped up by 24px on the first scroll. */
.study-tabs-group {
    height: auto;
    margin-top: -24px;
}

/* MudBlazor.min.css is loaded after this file and sets .mud-tabs-tabbar to
   position:relative - with a single class this rule lost to it and the bar
   was never sticky. Both classes outweigh it regardless of load order.
   top is the padding again, negative: a sticky bar holds inside the padding
   of its scroll container, and the bar's place is above it.
   z-index above the 2 of a MudTable's fixed header cells, which come later in
   the page and painted over the bar at the same level. The line below matches
   the one under the outer bar (Border on MudTabs), so the content scrolls away
   under an edge instead of into the tabs. */
.mud-tabs-tabbar.study-group-bar {
    position: sticky;
    top: -24px;
    z-index: 3;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* .mud-tabs-tabbar in front for the same reason as above: MudBlazor's
   .mud-tabs-tabbar .mud-tabs-tabbar-inner (min-height 48px) comes later and
   left the bar taller than its tabs, with the tabs at the top of it. */
.mud-tabs-tabbar.study-tabs-bar .mud-tabs-tabbar-inner,
.study-tabs-bar .mud-tab {
    min-height: 40px;
}

.study-tabs-bar .mud-tab {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* As tall as the outer bar - at 34px, between two lines, it looked squeezed */
.mud-tabs-tabbar.study-group-bar .mud-tabs-tabbar-inner,
.study-group-bar .mud-tab {
    min-height: 40px;
}

.study-group-bar .mud-tab {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
}