:root {
    /* the theme's 0.65 leaves disabled text at 3.74:1 on white; 0.75 keeps it readable and still clearly inactive */
    --kendo-disabled-opacity: 0.75;
}


.k-form-legend {
    /* form legend text for bootstrap is smaller, unstyled text. By variables it is made larger but no font-weight variable is available.*/
    font-weight: 600;
}


.k-step-link {
    /* make the stepper links more obvious that they are clickable as they are used here for non-linear navigation */
    cursor: pointer;
}


.k-step-list-horizontal .k-step-link, .k-stepper .k-step-label .k-step-text {
    /* allow long items, like 'announcement templates' that get truncated at smaller screen sizes */
    max-width: 100% !important;
}


/* fix popup and absolute positioning causing scrolling - https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-popup-causes-scroll-on-show */
html, body {
    /* container is full viewport size and un-scrollable */
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.layout-container {
    /* content area is full size and allows scrolling */
    height: 100%;
    overflow: auto;
}

@media print {
    /* container overflows for pagination */
    html, body {
        height: unset !important;
        min-height: unset !important;
        max-height: unset !important;
        overflow: unset !important;
    }

    /* content area overflows */
    .layout-container {
        height: unset !important;
        overflow: visible;
    }
}


/* Recipient non-recipients: students tracked against a form with no valid recipient in EduPoint.
   They receive no email; they are visually distinguished in the recipient and Responses grids
   (set via Telerik OnRowRender — kept here in the global stylesheet so it applies to grid rows).
   Colours come from theme tokens so the row stays readable and distinct in light and dark mode. */
.non-recipient-row > td {
    background-color: var(--kendo-color-warning-subtle-hover) !important;
}

.non-recipient-row:hover > td {
    background-color: var(--kendo-color-warning-subtle) !important;
}

.non-recipient-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.5em;
    border-radius: 1em;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kendo-color-warning-on-subtle);
    background-color: var(--kendo-color-warning-subtle);
    border: 1px solid var(--kendo-color-warning);
    vertical-align: middle;
    white-space: nowrap;
}

.non-recipient-text {
    color: var(--kendo-color-warning-on-subtle);
}

/* Recipients withdrawn from a published form. The row stays in the grid so the school can see what it did,
   greyed out to show it is no longer part of the form. Colours come from theme tokens so the row stays readable
   and distinct in light and dark mode. */
.removed-recipient-row > td {
    background-color: var(--kendo-color-base-subtle) !important;
    color: var(--kendo-color-subtle);
}

.removed-recipient-row:hover > td {
    background-color: var(--kendo-color-base-subtle) !important;
    color: var(--kendo-color-on-app-surface);
}

.removed-recipient-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.5em;
    border-radius: 1em;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.4;
    color: #58151c;
    background-color: #f8d7da;
    border: 1px solid #e6a2aa;
    vertical-align: middle;
    white-space: nowrap;
}

/* A grid with a saved layout renders with its defaults first, because column state does not exist until
   the columns register. Keep it hidden until the layout is applied so it never visibly snaps (#12813).
   Hidden rather than removed so the grid still lays out and measures its columns. */
.grid-restoring {
    visibility: hidden;
}

/* Keep full headings readable, including long question labels and user-resized columns.
   Columns retain usable widths and scroll horizontally when they exceed the available page width. */
.response-grid .k-column-title {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

/* Align titles from the top, including columns without a filter button. */
.response-grid .k-grid-header .k-table-th {
    position: relative;
    vertical-align: top;
    overflow: clip;
}

/* Reserve a shared filter row so wrapped titles and missing filter buttons cannot shift alignment. */
.response-grid .k-cell-inner {
    padding-bottom: 28px;
}

/* Keep wrapped headings clear of the cell edge. */
.response-grid .k-cell-inner > .k-link {
    padding-right: 8px;
}

/* Keep filter buttons aligned beneath headings of different heights. */
.response-grid .k-cell-inner > .k-grid-filter-menu {
    position: absolute;
    right: 8px;
    bottom: 4px;
    margin: 0;
}