/* The look of MeDaF, for the whole app: flat, compact, no shadows. Set on body, because the Radzen theme is loaded
   after this file and would win on :root. */
/* The primary color of MeDaF: graphite, practically none, so every color in the app means something (blue edit, green new,
   red delete, yellow warning). On :root (doubled, to win over the theme loaded later),
   as the theme derives further colors from it there. */
:root:root {
    --rz-primary: #424242;
    --rz-primary-light: #616161;
    --rz-primary-lighter: rgba(66, 66, 66, 0.16);
    --rz-primary-dark: #2e2e2e;
    --rz-primary-darker: #1c1c1c;
}

body {
    /* Buttons without shadows. */
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    /* Checked check boxes neutral grey, not in the primary color. */
    --rz-checkbox-checked-background-color: var(--rz-base-700);
    --rz-checkbox-checked-border: var(--rz-border-base-700);
    --rz-checkbox-checked-hover-background-color: var(--rz-base-800);
    --rz-checkbox-checked-hover-border: var(--rz-border-base-800);
    --rz-checkbox-checked-color: var(--rz-white);
    --rz-button-focus-shadow: none;
    --rz-button-active-shadow: none;

    /* Tables tighter than Radzen's 0.625rem 1rem; lines and alternating rows stay. */
    --rz-grid-cell-padding: 0.25rem 0.75rem;
    --rz-grid-header-cell-padding: 0.5rem 0;
    /* The grip to drag a column width: a grey line when the pointer is over it (Radzen: the secondary color). */
    --rz-grid-column-resizer-helper-background-color: var(--rz-base-600);
    --rz-grid-column-resizer-helper-width: 0.1875rem;

    /* Normal writing instead of capitals (Material 2 writes buttons, tabs and headers in capitals): easier to read, and
       German keeps its capitalized nouns. Capitals only as an exception. */
    --rz-text-button-text-transform: none;
    --rz-tabs-tab-text-transform: none;
    --rz-datepicker-calendar-header-text-transform: none;
    --rz-scheduler-header-text-transform: none;
    --rz-badge-text-transform: none;
    --rz-text-overline-text-transform: none;
}

/* Buttons too: the Material theme writes them in capitals with wide letter spacing, without a variable. */
body .rz-button:is(.rz-button-lg, .rz-button-md, .rz-button-sm, .rz-button-xs) {
    text-transform: none;
    letter-spacing: normal;
}

/* Icon standard (PrevisIconButton): no background, a muted color of its action, the full color under the mouse.
   In rows 1.25rem, large ones (header of a list) 1.65 times that. Strong ones are fully colored from the start. */
.previs-icon {
    --previs-icon-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
    border: none;
    border-radius: var(--rz-border-radius);
    background: none;
    color: color-mix(in srgb, var(--previs-icon-color) 25%, var(--rz-base-500));
    cursor: pointer;
    transition: color var(--rz-transition);
}

.previs-icon .rzi {
    width: var(--previs-icon-size);
    height: var(--previs-icon-size);
    font-size: var(--previs-icon-size);
    line-height: var(--previs-icon-size);
}

.previs-icon:hover,
.previs-icon:focus-visible,
.previs-icon-strong {
    color: var(--previs-icon-color);
}

.previs-icon:focus-visible {
    outline: var(--rz-outline-focus);
}

/* Disabled (e.g. saving with nothing to save): pale, and nothing happens under the mouse. */
.previs-icon:disabled {
    color: var(--rz-base-300);
    cursor: default;
}

.previs-icon-lg {
    --previs-icon-size: calc(1.25rem * 1.65);
}

.previs-icon-view { --previs-icon-color: var(--rz-base-700); }
.previs-icon-edit { --previs-icon-color: var(--rz-info); }
.previs-icon-delete { --previs-icon-color: var(--rz-danger); }
.previs-icon-deletemany { --previs-icon-color: var(--rz-danger); }
.previs-icon-new { --previs-icon-color: var(--rz-success); }
.previs-icon-cancel { --previs-icon-color: var(--rz-base-700); }
.previs-icon-search { --previs-icon-color: var(--rz-info); }
.previs-icon-quicksearch { --previs-icon-color: var(--rz-warning); }
.previs-icon-detailedsearch { --previs-icon-color: var(--rz-base-700); }
.previs-icon-save { --previs-icon-color: var(--rz-info); }
.previs-icon-settings { --previs-icon-color: var(--rz-base-700); }
.previs-icon-apply { --previs-icon-color: var(--rz-info); }
.previs-icon-resetplan { --previs-icon-color: var(--rz-base-700); }
.previs-icon-solve { --previs-icon-color: var(--rz-success); }
.previs-icon-copyforai { --previs-icon-color: var(--rz-base-700); }
.previs-icon-open { --previs-icon-color: var(--rz-base-700); }
.previs-icon-pick { --previs-icon-color: var(--rz-base-700); }
.previs-icon-openreference { --previs-icon-color: var(--rz-base-700); }
.previs-icon-saveandview { --previs-icon-color: var(--rz-info); }
.previs-icon-saveandclose { --previs-icon-color: var(--rz-info); }
.previs-icon-saveandnew { --previs-icon-color: var(--rz-info); }
.previs-icon-saveandcopy { --previs-icon-color: var(--rz-info); }
.previs-icon-backup { --previs-icon-color: var(--rz-base-700); }
.previs-icon-restore { --previs-icon-color: var(--rz-warning-dark); }
.previs-icon-remove { --previs-icon-color: var(--rz-base-700); }
.previs-icon-reload { --previs-icon-color: var(--rz-base-700); }
.previs-icon-moveup { --previs-icon-color: var(--rz-base-700); }
.previs-icon-movedown { --previs-icon-color: var(--rz-base-700); }
.previs-icon-fullscreen { --previs-icon-color: var(--rz-base-700); }
.previs-icon-fullscreenexit { --previs-icon-color: var(--rz-base-700); }
.previs-icon-download { --previs-icon-color: var(--rz-base-700); }

/* Menu standard (PrevisMenu): ▾ opens on hover, ⋮ on click; a hidden ⋮ appears while the mouse is over its host
   (previs-menu-host), always on touch screens. Opacity, not visibility, so it can still get the keyboard focus. */
.previs-icon-menu {
    --previs-icon-color: var(--rz-base-700);
    padding: 0;
}

.previs-menu-anchor {
    display: inline-flex;
    flex: none;
}

.previs-menu-host .previs-menu-reveal {
    opacity: 0;
}

.previs-menu-host:hover .previs-menu-reveal,
.previs-menu-host:focus-within .previs-menu-reveal {
    opacity: 1;
}

@media (hover: none) {
    .previs-menu-host .previs-menu-reveal {
        opacity: 1;
    }
}

/* The backdrop of click menus is .previs-menu-backdrop, shared with the header menus. */
.previs-popup-menu {
    position: fixed;
    z-index: 1001;
    min-width: 12rem;
    padding: 0.25rem 0;
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-base-background-color);
    box-shadow: var(--rz-shadow-2);
    color: var(--rz-text-color);
    font-size: 0.875rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.25rem;
    text-transform: none;
    text-align: start;
}

.previs-popup-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.previs-popup-menu-item:hover:not(:disabled),
.previs-popup-menu-item:focus-visible {
    background-color: var(--rz-base-200);
}

.previs-popup-menu-item:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Same width with and without icon, so all texts are aligned. */
.previs-popup-menu-icon {
    display: inline-flex;
    flex: none;
    width: 1.25rem;
    color: var(--rz-text-secondary-color);
}

.previs-popup-menu-icon .rzi {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.previs-popup-menu-separator {
    height: 1px;
    margin: 0.25rem 0;
    background-color: var(--rz-base-300);
}

.previs-popup-menu-hint {
    max-width: 18rem;
    padding: 0.375rem 0.75rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: normal;
}

/* Several icons side by side, e.g. the actions of a row. */
.previs-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

/* Reload of a list: the icon, the interval chosen (small, muted) and the ▾ menu of intervals side by side. */
.previs-reload {
    gap: 0;
}

.previs-reload-interval {
    margin-inline: 0.125rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* The question (PrevisConfirm) is a window; its action button is red when it destroys, "Cancel" stays grey. */
.previs-confirm-danger .rz-dialog-confirm-buttons .rz-button:first-child {
    --rz-primary: var(--rz-danger);
    --rz-primary-light: var(--rz-danger-light);
    --rz-primary-dark: var(--rz-danger-dark);
    --rz-primary-darker: var(--rz-danger-darker);
}

.previs-icon-group-text {
    padding-inline: 0.5rem 0.25rem;
    font-size: 0.875rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* MeDaF */
.previs-required {
    color: var(--rz-danger);
    margin-left: 0.25rem;
}

/* Detail form: the labels left of the inputs, in one column as wide as the longest label (at most 16rem), long texts
   with the label above (previs-field-stacked). Compact: smaller inputs, little space between the rows. */
/* Radzen sizes its inputs by variables set on the input itself (.rz-input-md), so they are set there. */
.previs-fdetail .previs-input .rz-input-md {
    --rz-input-height: 1.875rem;
    --rz-input-padding-block: 0.1875rem;
    --rz-input-line-height: 1.25rem;
}

/* The labels stand at the top of their row, level with the first line of the input: the label is as high as one input
   (--previs-row-height) and centred in that, so a hint or an error below the input does not move it. */
:root {
    --previs-row-height: var(--rz-input-size-md, 2.5rem);
    /* The widest the fields of a form get; the settings dialogs are not dragged wider than this plus their margin (medaf.js, plan 078). */
    --previs-controls-max-width: 64rem;
    /* What the dialogs that can be resized leave free of the window, in height and in width together (half of it on each side); one place (medaf.js reads it too, plan 078). */
    --previs-dialog-margin: 2rem;
}

.previs-fdetail {
    --previs-row-height: 1.875rem;
}

.previs-controls {
    display: grid;
    align-content: start;
    grid-template-columns: fit-content(16rem) minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.25rem;
    align-items: start;
    max-width: var(--previs-controls-max-width);
}

.previs-field {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
}

.previs-label {
    display: inline-flex;
    align-items: center;
    min-height: var(--previs-row-height);
    min-width: 0;
}

/* A check box is as high as a row, so its label is level with it. */
.previs-input > .rz-chkbox {
    display: inline-flex;
    align-items: center;
    min-height: var(--previs-row-height);
}

/* ... but the box itself stays square: it would be stretched to the height of the row (as wide as in a list, as high as an input). */
.previs-input > .rz-chkbox > .rz-chkbox-box {
    align-self: center;
    height: auto;
    aspect-ratio: 1;
}

/* A group of fields (e.g. the value list) does not break the grid: its fields are items of the grid itself. A message in it
   stands in the column of the inputs. */
.previs-value-list {
    display: contents;
}

.previs-value-list > .rz-alert {
    grid-column: 2;
}

/* A value list shown as options (plan 058): side by side, the text of an option is clickable (a click on the chosen one clears an optional field). */
.previs-valuelist-options {
    align-self: center;
}

.previs-valuelist-option {
    cursor: pointer;
}

.previs-input {
    min-width: 0;
}

.previs-field-stacked {
    row-gap: 0.125rem;
    margin-block: 0.25rem;
}

.previs-field-stacked > .previs-label,
.previs-field-stacked > .previs-input {
    grid-column: 1 / -1;
}

.previs-field-stacked > .previs-label {
    min-height: 0;
}

/* Viewing is harmless and neutral: the values as plain text, no frames, spinners or calendar buttons, no background.
   The same for fields that cannot be changed while editing (e.g. the key of an existing record). */
.previs-fdetail .previs-controls {
    padding: 0.5rem 1rem;
    border-radius: var(--rz-border-radius);
}

:is(.previs-fdetail.previs-fdetail-view, .previs-fdetail .previs-field-readonly) .previs-input :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-datepicker, .rz-numeric-input, .rz-inputtext) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--rz-text-color);
    opacity: 1;
}

/* Text, not something to click: Radzen gives e.g. the read-only date picker a hand. */
:is(.previs-fdetail.previs-fdetail-view, .previs-fdetail .previs-field-readonly) .previs-input :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-datepicker, .rz-numeric-input, .rz-inputtext, .rz-chkbox, .rz-chkbox-box),
:is(.previs-fdetail.previs-fdetail-view, .previs-fdetail .previs-field-readonly) .previs-input .rz-datepicker * {
    cursor: default;
}

/* Radzen shows the date picker of a read-only field as disabled, styled by variables on the input. */
:is(.previs-fdetail.previs-fdetail-view, .previs-fdetail .previs-field-readonly) .previs-input .rz-input-md {
    --rz-input-disabled-background-color: transparent;
    --rz-input-disabled-border: 1px solid transparent;
    --rz-input-disabled-color: var(--rz-text-color);
    --rz-input-disabled-opacity: 1;
    --rz-input-disabled-shadow: none;

    /* Nor white under the mouse or with the focus: the values stay text on the tinted panel. */
    --rz-input-hover-background-color: transparent;
    --rz-input-hover-border: 1px solid transparent;
    --rz-input-hover-shadow: none;
    --rz-input-focus-background-color: transparent;
    --rz-input-focus-border: 1px solid transparent;
    --rz-input-focus-shadow: none;

    /* Some inputs (e.g. the date) draw their bottom line separately. */
    --rz-input-border-block-end: 1px solid transparent;
    --rz-input-disabled-border-block-end: 1px solid transparent;
    --rz-input-hover-border-block-end: 1px solid transparent;
    --rz-input-focus-border-block-end: 1px solid transparent;
}

:is(.previs-fdetail.previs-fdetail-view, .previs-fdetail .previs-field-readonly) .previs-input :is(.rz-numeric-button, .rz-datepicker-trigger) {
    display: none;
}

/* Locked while editing: what cannot be changed (the key of an existing record, a field a "one of" group locks) gets the light grey of an input that is
   not allowed to be used, the text stays fully readable; the reason is the tooltip. Viewing stays plain text. */
:root {
    --previs-locked-background: color-mix(in srgb, var(--rz-base-500) 16%, var(--rz-base-background-color));
}

.previs-fdetail:not(.previs-fdetail-view) .previs-field-readonly .previs-input :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-datepicker, .rz-inputtext) {
    background: var(--previs-locked-background);
    border-radius: var(--rz-input-border-radius, var(--rz-border-radius));
}

.previs-fdetail:not(.previs-fdetail-view) .previs-field-readonly .previs-input .rz-input-md {
    --rz-input-disabled-background-color: var(--previs-locked-background);
}

.previs-fdetail:not(.previs-fdetail-view) .previs-field-readonly .previs-input :is(.rz-chkbox-box, .rz-radiobutton-box) {
    background: var(--previs-locked-background);
}

/* Editing: the inputs with their frames on a panel tinted in the blue of "edit" (green for a new record). */
.previs-fdetail-edit .previs-controls {
    background-color: color-mix(in srgb, var(--rz-info) 7%, var(--rz-base-background-color));
}

.previs-fdetail-new .previs-controls {
    background-color: color-mix(in srgb, var(--rz-success) 7%, var(--rz-base-background-color));
}

/* The dialog that edits one cell of a list: the editor on the blue panel of "edit", the actions as icons at the bottom right. */
.previs-fcelledit .previs-controls {
    padding: 0.5rem 1rem;
    border-radius: var(--rz-border-radius);
    background-color: color-mix(in srgb, var(--rz-info) 7%, var(--rz-base-background-color));
}

.previs-fcelledit-actions {
    align-self: flex-end;
}

/* The edit mode of a list: the cells hold their editors; changed cells are tinted in the blue of "edit" (the old value is the tooltip), cells
   with an error of the last save have a red frame (the message is the tooltip). What would change the page (search, reading again, the pager,
   sorting) is dimmed and does nothing until the changes are saved or discarded. */
.previs-grid tr.rz-data-row > td.previs-cell-changed {
    /* Over the colors of the rows, which Radzen gives to the cells themselves. */
    background-color: color-mix(in srgb, var(--rz-info) 16%, var(--rz-base-background-color)) !important;
}

/* A cell that cannot be edited here (the reason is the tooltip): the same light grey as a locked field of the detail form. */
.previs-grid tr.rz-data-row > td.previs-cell-locked {
    background-color: var(--previs-locked-background) !important;
}

.previs-grid td.previs-cell-error {
    box-shadow: inset 0 0 0 0.125rem var(--rz-danger);
}

.previs-grid td .previs-cell-input:is(.rz-textbox, .rz-numeric, .rz-datepicker, .rz-dropdown) {
    min-height: 1.75rem;
}

.previs-flist-editing .previs-edit-lock > *,
.previs-flist-editing .previs-sort-click,
.previs-flist-editing .rz-pager {
    pointer-events: none;
    opacity: 0.45;
}

/* The header of a detail form: the title, at the right end (aligned with the fields) the actions as icons, like New
   in a list: edit and delete while viewing, save and view while editing. */
.previs-fdetail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    max-width: 64rem;
}

.previs-fdetail-actions {
    margin-inline-start: auto;
}

/* The dialog for a new record: the actions are icons in the title line of the dialog, left of Radzen's cross (the dialog is the
   containing block; the row of the title in the content has nothing left). */
.previs-fnewrecord .previs-fdetail-title {
    display: contents;
}

/* The title line has a height of its own (3 rem), so the icons are level with the title and the cross at every font size. */
.rz-dialog:has(.previs-fnewrecord) .rz-dialog-titlebar {
    box-sizing: border-box;
    height: 3rem;
    padding-block: 0;
    align-items: center;
}

.previs-fnewrecord .previs-fdetail-actions {
    position: absolute;
    top: 0;
    right: 3.5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    margin: 0;
}

/* Messages of a detail form as wide as its fields and header (not those of the dependent lists below). */
.previs-fdetail > .rz-alert {
    max-width: 64rem;
}



.medaf-header {
    width: 100%;
    padding: 0 1.5rem;
}

.medaf-title {
    color: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
}

/* The tenant in use, in the header, for the master; a click leads to all tenants. */
.previs-tenant-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    font-size: 0.875rem;
    text-decoration: none;
    opacity: 0.85;
}

.previs-tenant-switch:hover,
.previs-tenant-switch:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

/* An icon button in the header (e.g. the gear of the app): in the color of the header, a little muted, full under the mouse. */
.previs-icon.previs-header-icon {
    color: inherit;
    opacity: 0.85;
}

.previs-icon.previs-header-icon:hover,
.previs-icon.previs-header-icon:focus-visible {
    color: inherit;
    opacity: 1;
}

/* The master's page of the tenants: the tenants left, the backups right (under each other when narrow). */
.previs-plain:has(.previs-databases) {
    max-width: 96rem;
}

.rz-layout.previs-plain-layout:has(.previs-databases) {
    align-items: flex-start;
}

/* Whether a database is there: a small button with icon and word, a click checks again. */
.previs-db-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--rz-text-secondary-color);
    font: inherit;
    cursor: pointer;
}

.previs-db-status .rzi {
    font-size: 1.125rem;
}

.previs-db-status-available { color: var(--rz-success-dark); }
.previs-db-status-missing { color: var(--rz-warning-dark); }
.previs-db-status-unreachable { color: var(--rz-danger); }
.previs-db-status:disabled { cursor: default; }

/* The button of the upload: normal case like every button (the file upload of Radzen does not take its variables). */
.previs-db-upload { display: flex; align-items: center; gap: 0.75rem; }
.previs-db-upload .rz-fileupload-choose,
.previs-db-upload .rz-button-text { text-transform: none; }

/* The backup to restore and the button, in one line. */
.previs-db-restore {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.previs-db-restore .rz-dropdown {
    flex: 1;
    min-width: 0;
}

/* List page: the form fills the body and the grid the rest of it, so only the rows scroll and the pager stays in view.
   On very small windows the grid keeps a minimum height and the page scrolls instead. */
.rz-body:has(> .previs-flist) {
    display: flex;
    flex-direction: column;
}

.previs-flist {
    flex: 1 1 auto;
    min-height: 0;
}

/* The table is at least as wide as its columns need (set by PrevisCGrid): a column without a stored width gets at least the minimum
   (ColumnLayout.DefaultMinWidthRem) instead of what is left, which can be nothing; if the columns do not fit, the table scrolls
   sideways (.rz-data-grid-data), the selection and the actions stay on the left (frozen). */
.previs-grid .rz-grid-table {
    min-width: var(--previs-grid-min-width, 0);
}

.previs-flist > .previs-grid {
    flex: 1 1 0;
    min-height: 15rem;
}

/* Tabs of the dependent records in a detail form: compact, in normal case, each title on one line; tabs that do not
   fit go to the menu at the end (TabsOverflow.Collapse). Tabs without records are muted. */
.previs-dependents .rz-tabview-nav li > button {
    padding: 0.375rem 0.75rem;
    text-transform: none;
    white-space: nowrap;
    font-size: 0.875rem;
}

.previs-dependents .rz-tabview-nav li.previs-tab-empty:not(.rz-tabview-selected) > button {
    color: var(--rz-text-disabled-color);
}

/* A list in a tab of a detail form (dependent records): as high as its rows, the page scrolls. */
.previs-flist.previs-flist-embedded > .previs-grid {
    flex: none;
    min-height: 0;
}

/* Header of a list: the title, right of it the search (PrevisSearchBox). The field opens in place of the magnifier
   and looks like a text box with the magnifier, × and the two modes inside. The active mode is colored on the
   tint that also marks the searched columns (light yellow quick, light grey detailed); the other one is muted and
   clickable like every icon. */
.previs-flist {
    --previs-search-quick-tint: #fff6c4;
    --previs-search-detailed-tint: color-mix(in srgb, var(--rz-base-700) 12%, var(--rz-base-background-color));
}

.previs-flist-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.previs-search {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.previs-search-box {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    height: var(--rz-input-height, 2.5rem);
    padding-inline: 0.25rem;
    border: var(--rz-input-border);
    border-radius: var(--rz-input-border-radius);
    background-color: var(--rz-input-background-color);
}

.previs-search-box:focus-within {
    border: var(--rz-input-focus-border);
    box-shadow: var(--rz-input-focus-shadow);
}

/* The magnifier on the left, set apart by a line like the modes on the right. */
.previs-search-hover {
    display: inline-flex;
}

.previs-search-icon {
    position: relative;
    margin-inline-end: 0.375rem;
}

.previs-search-icon::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: -0.25rem;
    border-inline-end: 1px solid var(--rz-base-300);
}

.previs-search-input {
    width: 16rem;
    max-width: 40vw;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--rz-input-font-size, 0.875rem);
}

.previs-search-modes {
    display: inline-flex;
    gap: 0.125rem;
    margin-inline-start: 0.25rem;
    padding-inline-start: 0.375rem;
    border-inline-start: 1px solid var(--rz-base-300);
}

.previs-search-mode {
    padding: 0.25rem;
}

/* The tooltip of the whole app (medaf.js, showTip; docs/features/tooltips.md): a flat box that medaf.js places over the mouse. Above the dialogs
   of Radzen. Texts keep their line breaks (a title can have some); the width stays below the window's. */
.previs-tip {
    position: fixed;
    z-index: 3000;
    width: max-content;
    max-width: min(32rem, calc(100vw - 0.5rem));
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-base-background-color);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
    color: var(--rz-text-color);
    font-size: 0.8125rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: pre-line;
    pointer-events: none;
}

/* A tooltip with parts that must stand out (e.g. the arrow to "slower"): the element carries the content hidden (.previs-tip-source) and
   medaf.js shows a copy of it. */
.previs-tip-host {
    display: inline-flex;
}

.previs-tip-source {
    display: none;
}

.previs-tip-arrow {
    padding-inline: 0.125rem;
    color: var(--rz-danger);
    font-size: 1.25em;
    font-weight: 700;
}

.previs-search-mode:not(.previs-search-mode-active):hover {
    background-color: var(--rz-base-200);
}

.previs-search-mode-active {
    cursor: default;
}

.previs-search-quick.previs-search-mode-active { background-color: var(--previs-search-quick-tint); }
.previs-search-detailed.previs-search-mode-active { background-color: var(--previs-search-detailed-tint); }

/* While the search is open, the headers of the columns it looks in, in the tint of its mode. */
.previs-grid .rz-grid-table thead th:has(.previs-searched-quick) {
    background-color: var(--previs-search-quick-tint);
}

.previs-grid .rz-grid-table thead th:has(.previs-searched-detailed) {
    background-color: var(--previs-search-detailed-tint);
}

/* Select boxes a little from the left edge and flush with the actions on their right, in the rows as in the header;
   all in rem, so it scales with the font size (the column is as wide as this padding and the box). */
.previs-grid td.previs-select-cell,
.previs-grid th.previs-select-cell .rz-column-title {
    padding-inline: 0.4375rem 0;
    text-align: start;
}

.previs-grid th.previs-select-cell .rz-column-title-content {
    justify-content: flex-start;
}

/* No vertical line between the select boxes and the actions: the two fixed columns are one group (the line after the actions stays), and the
   box is not cut off by it on its right. */
.previs-grid .rz-grid-table.rz-grid-gridlines-both > :is(thead, tbody) > tr > :is(td, th).previs-select-cell:not(:last-child) {
    /* Radzen draws the line with a selector of its own that is as specific as this one, hence the long form. */
    border-inline-end: none;
}

/* The actions in a row: between the icons only their own padding, no gap. */
.previs-grid .previs-icon-group {
    gap: 0;
}

/* The actions of the rows and the count above them start close to the select boxes on their left and end right
   after the last icon. */
.previs-grid td.previs-actions-after-select {
    padding-inline: 0.25rem 0;
}

.previs-grid th.previs-actions-after-select .rz-column-title {
    padding-inline: 0.25rem 0;
}

/* Before the name of a primary key field (header of a list, label in the detail view): a pale key, fully visible
   under the mouse; the tooltip says it is the primary key and, if composite, with which fields. */
/* An explanation behind a label (PrevisInfoTip): a small "i", neutral and muted like the icons of the standard, full under the
   mouse. Its size and spacing keep the row of the label as high as before. */
.previs-info {
    --previs-icon-size: 0.9rem;
    --previs-icon-color: var(--rz-base-700);
    margin-inline-start: 0.25rem;
    padding: 0;
}

.previs-key-icon {
    display: inline-flex;
    align-items: center;
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.35;
    cursor: default;
    transition: opacity var(--rz-transition);
}

.previs-key-icon:hover {
    opacity: 1;
}

/* Right at the name, without the gap between the parts of a header. */
.previs-sort-click > .previs-key-icon {
    margin-inline-end: -0.125rem;
}

/* A foreign key value in a list is plain text; a small icon at the right of the cell leads to the record it refers to. It
   appears while the mouse is over the cell or the focus is in it, always on touch screens. Opacity, not visibility, so it
   can still get the keyboard focus; its place is reserved, so the text does not move, and it stays visible when the text is cut. */
.previs-parent-cell {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.previs-parent-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previs-parent-link {
    flex: none;
    margin-inline-start: auto;
    padding: 0;
    text-decoration: none;
    opacity: 0;
}

td:hover .previs-parent-link,
td:focus-within .previs-parent-link {
    opacity: 1;
}

@media (hover: none) {
    .previs-parent-link {
        opacity: 1;
    }
}

/* Above the actions of the rows, next to the box that selects the page: selected / found, e.g. "3 / 312". */
.previs-found-count {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: default;
}

/* Column headers: title and arrow sort with click or double-click (with the position when sorted by several), ▾ opens
   the column menu. */
.previs-sort-header {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    width: 100%;
}

.previs-sort-click {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.previs-sort-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.previs-sort-icon {
    flex: none;
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--rz-primary);
}

.previs-sort-index {
    flex: none;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--rz-primary);
}

/* Filters: the funnel marks a filtered column and the line above a filtered list; the filter of a column opens below
   its header like a menu. */
.previs-filter-icon {
    flex: none;
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--rz-primary);
}

.previs-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--rz-primary);
    font: inherit;
    cursor: pointer;
}

.previs-link:hover,
.previs-link:focus-visible {
    text-decoration: underline;
}

.previs-popup-menu.previs-filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 16rem;
    padding: 0.75rem;
}

.previs-filter-title {
    font-weight: 600;
}

.previs-filter .rz-textbox {
    width: 100%;
}

.previs-filter-second {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.previs-filter .previs-filter-join {
    flex: none;
    width: 5.5rem;
}

.previs-filter-and {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.previs-filter-error {
    font-size: 0.75rem;
    color: var(--rz-danger);
}

.previs-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Current page: neutral grey instead of the primary color. */
.previs-grid .rz-pager {
    --rz-pager-numeric-button-selected-background-color: var(--rz-base-200);
    --rz-pager-numeric-button-selected-color: var(--rz-text-title-color);
}

/* The number of records sits between the page numbers and the page size selection (Radzen gives that order 2). */
.previs-grid .rz-pager-summary {
    order: 1;
    padding-inline: 0.75rem 0.5rem;
}

/* Page size selection: the box has padding on both sides and Radzen keeps room for two icons (arrow and clear) in the
   label, but there is no clear button. With room for the arrow only and 6rem, "1000" fits, also with a larger font. */
.previs-grid .rz-pager .rz-dropdown {
    width: 6rem;
}

.previs-grid .rz-pager .rz-dropdown .rz-dropdown-label {
    padding-inline-end: var(--rz-dropdown-trigger-icon-width);
}

/* Menu: no lines between the entries, compact (plan 069, see the variables below; Radzen: 1rem above and below). */
.previs-nav {
    --rz-panel-menu-item-border: none;
    /* Compact (plan 069): the space above and below an entry a third smaller than after plan 067 (a quarter of the line height), the space to the left of the icon half of Radzen's 1rem
       (the right stays), and the space between icon and text a third smaller than after plan 067 (0.3333rem; Radzen has 1rem). The whole entry stays the area to click. */
    --rz-panel-menu-item-padding-block: calc(var(--rz-panel-menu-item-line-height) / 6);
    --rz-panel-menu-item-padding-inline: 0.5rem 1rem;
    --rz-panel-menu-icon-margin-inline: 0 0.2222rem;
    /* All entries the same colour (plan 067): the icons in the colour of the text, not the grey of Radzen. */
    --rz-panel-menu-icon-color: var(--rz-panel-menu-item-color);
}

/* The icon of an entry of the menu or the home page (plan 067): a Material Symbol, an icon of the Material Design Icons or an emoji, the same size and on the same line. */
.previs-icon-glyph {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--rz-icon-size, 1.5rem);
    height: var(--rz-icon-size, 1.5rem);
    font-size: var(--rz-icon-size, 1.5rem);
    line-height: 1;
}

/* An emoji is drawn larger than the box of an icon of the same font size: a little smaller (the font size of the box is set by the menu, so it is scaled). */
.previs-icon-emoji {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    transform: scale(0.8);
}

/* The field "Icon" in the settings (plan 067): the text and the preview of the icon next to it, the links to look names up below. */
.previs-icon-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.previs-icon-input {
    flex: 1 1 auto;
}

.previs-icon-preview {
    display: inline-flex;
    flex: none;
    align-items: center;
}

.previs-icon-links {
    display: flex;
    gap: 1rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
}

.previs-icon-error {
    display: block;
}

/* The picker of icons (plan 071): search and the fixed choices on top, tabs with a grid of equally large cells (the icon in the size of the menu), the current one marked. */
/* The dialog of the picker can be resized (plan 073): the picker fills it, search and tabs stay on top, the grid takes the rest and scrolls in itself. */
.rz-dialog.previs-icon-picker-dialog {
    min-width: min(28rem, 100vw - var(--previs-dialog-margin));
    min-height: min(25rem, 100vh - var(--previs-dialog-margin));
    max-width: calc(100vw - var(--previs-dialog-margin));
    max-height: calc(100vh - var(--previs-dialog-margin));
}

/* The settings dialogs (plan 074) can be resized too: the smallest size is a little under the usual width, the largest the window; the content scrolls in itself. */
.rz-dialog.previs-resizable-dialog {
    min-width: min(32rem, 100vw - var(--previs-dialog-margin));
    min-height: min(16rem, 100vh - var(--previs-dialog-margin));
    max-width: calc(100vw - var(--previs-dialog-margin));
    max-height: calc(100vh - var(--previs-dialog-margin));
}

/* The frame fills the dialog: the fields scroll in themselves, Cancel and Save stay at the bottom (review of plan 074). */
.previs-resizable-dialog .rz-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.previs-resizable-dialog .previs-fsettings {
    flex: 1 1 auto;
    min-height: 0;
}

.previs-resizable-dialog .previs-fsettings > .previs-controls {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.previs-resizable-dialog .previs-fsettings > .previs-fsettings-footer {
    flex: none;
}

/* The browser's own handle (Radzen's Resizable) moves every edge by half of the mouse: the dialog is not Resizable, medaf.js adds a handle that changes the size by twice the move. */

.previs-dialog-grip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.25rem;
    height: 1.25rem;
    cursor: nwse-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--rz-base-400) 50%, var(--rz-base-400) 58%, transparent 58%, transparent 70%, var(--rz-base-400) 70%, var(--rz-base-400) 78%, transparent 78%);
}

.previs-icon-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}

.previs-icon-picker-tabs,
.previs-icon-picker-tabs > .rz-tabview-panels,
.previs-icon-picker-tabs .rz-tabview-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.previs-icon-picker-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.previs-icon-picker-search {
    flex: 1 1 auto;
}

.previs-icon-fixed,
.previs-icon-cell {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: none;
    color: var(--rz-text-color);
    cursor: pointer;
}

.previs-icon-fixed {
    flex: none;
    padding: 0.25rem 0.625rem;
    font-size: 0.875rem;
}

/* Virtualize needs a plain block with a fixed height per row (2.75rem = cell and gap; medaf.js, watchIconPicker, counts with it). */
.previs-icon-picker-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: scroll;
}

.previs-icon-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 10), 1fr);
    gap: 0.25rem;
    box-sizing: border-box;
    height: 2.75rem;
    padding-bottom: 0.25rem;
}

.previs-icon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0;
}

.previs-icon-fixed:hover,
.previs-icon-fixed:focus-visible,
.previs-icon-cell:hover,
.previs-icon-cell:focus-visible {
    background: var(--rz-base-200);
}

.previs-icon-cell-current {
    border-color: var(--rz-base-700);
    background: var(--rz-base-200);
}

.previs-icon-picker-note {
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* The home page lists the tables with their icons. */
.previs-entities li {
    display: flex;
    align-items: center;
    gap: 0.3333rem;
}

/* Search of tables in menu and home page */
.previs-nav-search {
    padding: 0.5rem;
}

.previs-search-field {
    width: 100%;
    max-width: 24rem;
}

.previs-nav-hint {
    padding: 0.5rem 1rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

.previs-nav-error {
    color: var(--rz-danger);
}

.previs-search-hint {
    color: var(--rz-text-secondary-color);
}

/* Pages without menu: sign-in and setup, white, the form in the middle */
.rz-layout.previs-plain-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #fff;
}

.previs-plain {
    width: 100%;
    max-width: 28rem;
    padding: 2rem 1.5rem;
}

.previs-plain-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.previs-plain-field .rz-textbox,
.previs-plain-field .rz-textarea {
    width: 100%;
}

/* The list of what a new password must not be: a compact bulleted list inside the alert. */
.previs-password-rules ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.previs-plain-hint {
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

/* The line under the general fields (name, icon) of the settings of an entity and of a board (plan 078): the lines of the tables. */
.previs-settings-separator {
    grid-column: 1 / -1;
    height: 0;
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid var(--rz-base-300);
}

/* A section of a settings dialog that folds (PrevisSection; plan 047 for the board, plan 078 for the entity): a title without a frame, a small triangle right behind it, below it the
   content. The content stays in the page while the section is closed (hidden). */
.previs-section {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

.previs-section-titlebar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Radzen's text brings a margin below (specific enough to win over it), so the title is centred with the triangle and the info icon. */
.previs-section .previs-section-title {
    margin: 0;
    font-weight: 600;
}

.previs-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.previs-section-body[hidden] {
    display: none;
}

/* Computed fields and count fields in the settings of an entity (two sections): one row per field, a line of name, template, insert and remove, below it the errors and the preview;
   the empty line at the end is the first input line. */
.previs-computed {
    grid-column: 1 / -1;
}

.previs-computed-remove-gap {
    visibility: hidden;
}

.previs-computed-row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.previs-computed-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.previs-computed-name {
    flex: 0 0 10rem;
}

.previs-computed-template {
    flex: 1 1 auto;
    min-width: 0;
}

/* The rules in the settings of a planning board (plan 065): a line per rule with kind, what it counts per, table and field, remove. */
.previs-board-rules {
    margin-top: 0.75rem;
}

.previs-board-rules-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.previs-board-rule-row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.375rem;
}

.previs-board-rule-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The fields of a line; with too little room they break among themselves, the icon stays at the end of the first line. */
.previs-board-rule-fields {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

/* The fields share the line by their need (plan 068): a placeholder is never cut off, a long table name is (with "..."); with too little room the line breaks. */
.previs-board-rule-kind {
    flex: 0 0 10rem;
}

.previs-board-rule-per {
    flex: 2 1 9rem;
    min-width: 9rem;
}

.previs-board-rule-via {
    flex: 1 1 8rem;
    min-width: 8rem;
}

.previs-board-rule-field {
    flex: 2 1 9rem;
    min-width: 9rem;
}

/* A need (plan 079) has two rows in its line: what the card needs, then "at the place" of which axis and what it "has"; the break starts the second row and the indent (as wide as the kind) moves it right, in line with the field above.
   Every field has room for a long name with the arrow and the clear icon. */
.previs-board-rule-break {
    flex: 0 0 100%;
    height: 0;
}

.previs-board-rule-indent {
    flex: 0 0 10rem;
}

.previs-board-rule-needs {
    flex: 1 1 10rem;
    min-width: 10rem;
}

/* The empty line has no icon to remove, but its space (the same icon, invisible), so the fields line up. */
.previs-board-rule-remove-gap {
    visibility: hidden;
}

.previs-board-rule-wish-table {
    flex: 1 1 18rem;
    min-width: 12rem;
}

.previs-board-rule-line .rz-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.previs-board-rule-label {
    flex: none;
}

/* A wish (plan 066): under its line one line per column of the table of wishes (name, role, meaning), then the columns of priority, avoid, active and text. */
.previs-board-wish {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.25rem 0 0.25rem 1rem;
}

.previs-board-wish-column {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.previs-board-wish-name {
    flex: 0 0 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previs-board-wish-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    column-gap: 0.75rem;
}

.previs-board-wish-columns .previs-field {
    grid-template-columns: 1fr;
}

.previs-computed-insert {
    flex: 0 0 9rem;
}

.previs-computed-error {
    color: var(--rz-danger);
    font-size: 0.75rem;
}

.previs-computed-count {
    flex: 1 1 0;
    min-width: 0;
}


/* Pinnable menus in the header (language, font size): drawn in px, so they keep their size when the font size changes. */
.previs-menu {
    display: inline-flex;
    align-items: center;
}

/* Above the backdrop, so the second click of a double-click hits the toggle again. */
.previs-menu .previs-menu-toggle {
    position: relative;
    z-index: 1002;
    color: inherit;
}

.previs-menu-pin {
    font-size: 14px;
    margin-left: 2px;
}

.previs-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.previs-menu-list {
    position: fixed;
    z-index: 1001;
    min-width: 160px;
    padding: 4px 0;
    background: var(--rz-base-background-color);
    border-radius: 4px;
    box-shadow: var(--rz-shadow-2);
    font-size: 14px;
    line-height: 20px;
}

.previs-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--rz-text-color);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.previs-menu-item:hover,
.previs-menu-item:focus-visible {
    background: var(--rz-base-200);
}

/* Same size with and without check mark, so the menu keeps its height whichever entry is checked. */
.previs-menu-check {
    display: inline-flex;
    flex: none;
    width: 24px;
    height: 20px;
    color: var(--rz-primary);
}

.previs-menu-check .rzi {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
}

.previs-menu-text {
    flex: 1;
}

.previs-menu-detail {
    color: var(--rz-text-secondary-color);
    font-size: 12px;
    white-space: nowrap;
}

.previs-font-sample {
    line-height: 1.2;
}

.previs-font-size .previs-menu-list {
    min-width: 260px;
}

/* Full screen of lists and planning boards (medaf.js enterFullscreen): the class on <html> takes menu and header of the app away so only
   the content stays; the browser's full screen goes with it where there is one. */
html.medaf-fullscreen .rz-header,
html.medaf-fullscreen .rz-sidebar {
    display: none;
}

/* Radzen's grid (header, sidebar, body, footer) shrinks to the body alone. Its own rules (.rz-layout:has(> .rz-sidebar…):has(> .rz-header))
   are more specific, so the class is named twice, as :root:root does for the colors. */
html.medaf-fullscreen .rz-layout.rz-layout {
    grid-template: "rz-body" 1fr / minmax(0, 1fr);
}

/* The settings dialog of a planning board: a table with one line per axis (plans 047, 081, 084), the name of the line on the left, then the field to choose. */
.previs-board-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: fit-content(16rem) minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.25rem;
    align-items: start;
    margin-top: 1rem;
}

.previs-board-section > *,
.previs-board-body {
    grid-column: 1 / -1;
}

.previs-board-body {
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 0.25rem;
    align-items: start;
}

.previs-board-body[hidden] {
    display: none;
}

.previs-board-body > * {
    grid-column: 1 / -1;
}

.previs-board-body > .previs-field {
    display: grid;
    grid-template-columns: subgrid;
}

.previs-section-head {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: start;
}

.previs-section-head:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* The triangle of a section (PrevisSection) has the colour and the size of the title (Radzen subtitle 2), a little larger so it is not narrower than the letters, right behind it. */
.previs-section-toggle {
    margin-inline-start: 0.125rem;
    color: var(--rz-text-subtitle2-color);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    /* The glyph is larger than its box (negative margins below); what is outside the box is empty, and must not make the fields scroll. */
    overflow: hidden;
}

.previs-section-toggle .rzi {
    font-size: calc(var(--rz-text-subtitle2-font-size) * 2.5);
    margin-block: -0.5rem;
    margin-inline: -0.5rem -0.25rem;
    position: relative;
    top: -0.125rem;
}

.previs-board-table {
    display: grid;
    grid-template-columns: fit-content(7rem) minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0;
}

.previs-board-table-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    border-bottom: 1px solid var(--rz-base-300);
}

.previs-board-table-row {
    padding-block: 0.125rem;
}

.previs-board-line-head {
    font-weight: 600;
}

.previs-board-cell {
    min-width: 0;
}

.previs-board-summary {
    font-weight: normal;
    opacity: 0.8;
}

/* The head of the board wraps in a narrow window (plan 080): the hints (figures, open wishes, conflicts) and the icons go to the next line, right-aligned, instead of leaving the window. */
.previs-board-head-group {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.25rem;
    min-width: 0;
}

/* The plans of a board (plan 081): the choice of the plan with new, rename and remove, or a hint and a button while there is no plan. It wraps with the head. */
.previs-board-plans {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-right: 0.75rem;
    min-width: 0;
}

.previs-board-plan-label,
.previs-board-plan-hint {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.previs-board-plan-select {
    width: 12rem;
    max-width: 100%;
}

/* A plan in the open list of the choice has its figures (plan 082) on a line of their own below the name, small and muted, so that the list stays as wide as the choice. */
.previs-board-plan-figures {
    display: block;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    white-space: normal;
}

/* The window "delete plans" (plan 119): the box for all above the list; the list gets a height limit and scrolls, so the box for all and the buttons stay in view with 50 plans. Sizes in rem. */
.previs-fboardplansdelete {
    min-width: 0;
}

.previs-board-plans-all,
.previs-board-plans-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    cursor: pointer;
}

.previs-board-plans-all {
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-300);
}

.previs-board-plans-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 18rem;
    overflow: auto;
}

.previs-board-plans-shown .previs-board-plans-name {
    font-weight: 600;
}

.previs-board-plans-figures {
    display: inline;
}

/* The dialog "calculate proposals" (plan 082): the entries, a bar and the text of the progress while it runs, the result after it. */
.previs-fboardsolve {
    min-width: 0;
}

.previs-board-solve-progress {
    width: 100%;
}

/* The dialog "copy for an AI" (plan 083): the plans to tick, the requirements, the fields that go along, the text as it is copied, and what the abbreviations stand for (folded). Sizes in rem. */
.previs-fboardai {
    min-width: 0;
}

/* The alerts and the list of the abbreviations fill the width of the dialog: in the grid of the fields (.previs-controls) a plain child would sit in the narrow column of the labels. */
.previs-board-ai-names-warning,
.previs-board-ai-status,
.previs-board-ai-problem,
.previs-board-ai-error,
.previs-board-ai-codes {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

.previs-board-ai-plans {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 12rem;
    overflow: auto;
}

.previs-board-ai-plan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
}

.previs-board-ai-figures {
    display: inline;
}

.previs-board-ai-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.previs-board-ai-field-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
}

.previs-board-ai-field-group-title {
    flex: 0 0 100%;
    font-weight: 600;
}

.previs-board-ai-field {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.previs-board-ai-field[data-text-off] {
    color: var(--rz-text-disabled-color);
}

.previs-board-ai-text {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    resize: vertical;
}

.previs-board-ai-count,
.previs-board-ai-requirements-count,
.previs-board-requirements-count {
    display: block;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    text-align: right;
}

.previs-board-ai-requirements-count.previs-error,
.previs-board-requirements-count.previs-error {
    color: var(--rz-danger);
}

.previs-board-ai-codes {
    font-size: 0.8125rem;
}

.previs-board-ai-codes > summary {
    cursor: pointer;
    font-weight: 600;
}

.previs-board-ai-code-group {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    max-height: 12rem;
    overflow: auto;
}

.previs-board-ai-code-title {
    font-weight: 600;
}

.previs-board-ai-code-table td {
    padding: 0 0.75rem 0 0;
}

.previs-board-ai-code {
    font-family: ui-monospace, Consolas, monospace;
}

/* Planning board (PrevisFBoard): a grid of the titles of the rows, one cell per column, the end of the row; below the foot of the columns and
   in the corner the main stack. Compact (plan 043): it always fits the width (equal columns without a minimum width, the titles of the rows
   as wide as needed up to 8rem), text wraps instead of being cut (hyphenated by the browser in the language of the page, anywhere only for a word
   that does not fit even so), cards have no frame and no distance, the lines of the board separate them.
   It scrolls only vertically, the header and the first column stay. Cells take one card (highlighted while a card is over them), the edges
   and the corner any number. */
.previs-board-page {
    flex: 1 1 auto;
    min-height: 0;
}

.previs-board {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.previs-board-grid {
    display: grid;
    grid-template-columns: fit-content(8rem) repeat(var(--previs-board-columns), minmax(0, 1fr)) minmax(0, 1fr);
    gap: 1px;
    background: var(--rz-base-300);
    border: 1px solid var(--rz-base-300);
    width: 100%;
}

.previs-board-head {
    background: var(--rz-base-200);
    padding: 0.25rem 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.previs-board-column-head,
.previs-board-end-head,
.previs-board-corner {
    position: sticky;
    top: 0;
    z-index: 2;
}

.previs-board-row-head,
.previs-board-foot-head,
.previs-board-corner {
    position: sticky;
    left: 0;
    z-index: 1;
}

.previs-board-corner {
    z-index: 3;
}

.previs-board-foot-head {
    grid-column: 1;
}

/* The free cell at the top left holds the switch of the axis of the columns (plan 047, only with several axes): small, in the width of the column of
   the titles of the rows. */
.previs-board-corner .previs-board-axes {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.previs-board-corner .previs-board-axes .rz-button {
    padding-inline: 0.375rem;
    text-transform: none;
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* What a card says about the axes of the columns that are not shown. */
.previs-board-card-extra {
    opacity: 0.7;
    font-size: 0.8125rem;
}

/* An empty cell is as high as the line of a card; the whole cell is the target of a drop. */
.previs-board-zone {
    min-height: 1.375rem;
    min-width: 0;
    padding: 0;
    background: var(--rz-base-background-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.previs-board-row-end,
.previs-board-column-end,
.previs-board-stack {
    background: var(--rz-base-100);
}

/* The place where a card can be dropped while it is dragged: on a board with rules every place carries a stage (fit classes below, they win by their order);
   on a board without rules no place is rated and every place is a good one, so Radzen's can-drop (it marks the place under the pointer that accepts the card) gets the green of a possible place (plan 131).
   A place that does not accept the card (an occupied cell) never has can-drop and stays white. */
.previs-board-zone.rz-can-drop {
    background: var(--previs-board-green);
}

/* The element Radzen puts around a card: it is the one that is dragged. A cell has one card and it fills the cell; the cards of an edge stand
   directly under each other, a fine line between them. */
.previs-board-zone .rz-dropzone-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.previs-board-cell .rz-dropzone-item {
    flex: 1 1 auto;
}

.previs-board-zone .rz-dropzone-item + .rz-dropzone-item {
    border-top: 1px solid var(--rz-base-300);
}

.previs-board-card {
    flex: 1 1 auto;
    padding: 0.125rem 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: grab;
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* A card that is dropped and being saved (plan 052): at its place, muted, a small circle at the left, not to be picked up. */
.previs-board-card-saving {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    opacity: 0.6;
    cursor: progress;
    pointer-events: none;
}

.previs-board-card-spinner {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

/* The hint above the page while a long action of the gear menu runs (plan 062): a flat info alert, a small spinning circle before the text. */
.previs-busy-hint {
    margin-bottom: 0.5rem;
}

.previs-busy-hint .rz-alert-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.previs-busy-spinner {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

/* The colours of the board (plan 128), one set for the cards at rest and the places while a card is dragged, so a place looks like the card would look there:
   a rule broken is red, a must wish a darker orange, a wish a muted yellow-orange, a good place muted green, a free place white, a card at rest light grey. */
.previs-board-grid {
    --previs-board-red: color-mix(in srgb, var(--rz-danger) 16%, var(--rz-base-background-color));
    --previs-board-red-up: color-mix(in srgb, var(--rz-danger) 26%, var(--rz-base-background-color));
    --previs-board-must: color-mix(in srgb, color-mix(in srgb, var(--rz-warning) 75%, var(--rz-danger)) 50%, var(--rz-base-background-color));
    --previs-board-must-up: color-mix(in srgb, color-mix(in srgb, var(--rz-warning) 75%, var(--rz-danger)) 62%, var(--rz-base-background-color));
    --previs-board-yellow: color-mix(in srgb, var(--rz-warning) 24%, var(--rz-base-background-color));
    --previs-board-yellow-up: color-mix(in srgb, var(--rz-warning) 36%, var(--rz-base-background-color));
    --previs-board-green: color-mix(in srgb, var(--rz-success) 16%, var(--rz-base-background-color));
    --previs-board-grey: color-mix(in srgb, var(--rz-base-300) 40%, var(--rz-base-background-color));
    --previs-board-grey-up: color-mix(in srgb, var(--rz-base-300) 70%, var(--rz-base-background-color));
}

/* A card at rest in a cell: light grey (plan 128); the tooltip names the reasons of the colours below. */
.previs-board-cell .previs-board-card {
    background: var(--previs-board-grey);
}

.previs-board-zone .rz-dropzone-item:hover > .previs-board-card-normal,
.previs-board-zone .rz-dropzone-item:active > .previs-board-card-normal {
    background: var(--previs-board-grey-up);
}

/* A card in conflict (plan 046): a rule it breaks, or a cell it shares: a muted red ground, no frame. */
.previs-board-card.previs-board-card-conflict {
    background: var(--previs-board-red);
}

.previs-board-zone .rz-dropzone-item:hover > .previs-board-card-conflict,
.previs-board-zone .rz-dropzone-item:active > .previs-board-card-conflict {
    background: var(--previs-board-red-up);
}

/* A card that breaks a must wish (plan 128): a darker orange. */
.previs-board-card.previs-board-card-mustwish {
    background: var(--previs-board-must);
}

.previs-board-zone .rz-dropzone-item:hover > .previs-board-card-mustwish,
.previs-board-zone .rz-dropzone-item:active > .previs-board-card-mustwish {
    background: var(--previs-board-must-up);
}

/* A card that only breaks wishes (plan 057): a muted yellow-orange ground. */
.previs-board-card.previs-board-card-wish {
    background: var(--previs-board-yellow);
}

.previs-board-zone .rz-dropzone-item:hover > .previs-board-card-wish,
.previs-board-zone .rz-dropzone-item:active > .previs-board-card-wish {
    background: var(--previs-board-yellow-up);
}

/* The places while a card is dragged (plan 128): possible muted green, a wish muted yellow-orange, a must wish darker orange, a rule broken red like the card there
   (a drop is still allowed, the reasons are in the tooltip). */
.previs-board-zone.previs-board-fit-possible {
    background: var(--previs-board-green);
}

.previs-board-zone.previs-board-fit-wish {
    background: color-mix(in srgb, var(--rz-warning) 22%, var(--rz-base-background-color));
}

.previs-board-zone.previs-board-fit-mustwish {
    background: var(--previs-board-must);
}

.previs-board-zone.previs-board-fit-rulebroken {
    background: var(--previs-board-red);
}

/* The head of the board: blocks in red, the key figures of the application muted. */
.previs-board-conflicts {
    color: var(--rz-danger-dark);
    font-size: 0.875rem;
}

.previs-board-summary {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
    margin-right: 0.75rem;
}

.previs-board-conflicts {
    margin-right: 0.5rem;
}

/* The sections of a tooltip (plans 057, 134): a title each in the colour of the cards (rule red, must wish darker orange, wish yellow-orange); a section after the first has space above. */
.previs-board-tip-title-rule {
    color: var(--previs-board-rule-text);
}

.previs-board-tip-title-must {
    color: var(--previs-board-must-text);
}

.previs-board-tip-title-wish {
    color: var(--previs-board-wish-text);
}

.previs-board-tip table + .previs-board-tip-title {
    margin-top: 0.375rem;
}

/* The tooltip of the board (medaf.js, watchBoard): the content inside the box of the tooltip mechanism (.previs-tip), over the mouse. */
.previs-board-tip {
    --previs-board-rule-text: var(--rz-danger-dark);
    --previs-board-must-text: color-mix(in srgb, color-mix(in srgb, var(--rz-warning-dark) 55%, var(--rz-danger-dark)) 82%, black);
    --previs-board-wish-text: var(--rz-warning-dark);
    line-height: 1.35;
}

/* A tooltip that is one text (a plan is needed, nothing possible). */
.previs-board-tip-plain {
    max-width: 26rem;
    white-space: pre-line;
}

/* Tooltips with rows (plan 050): a small table without lines; a long cell is cut off with an ellipsis, so the tooltip stays narrower than the window. */
.previs-board-tip-title {
    margin-bottom: 0.1875rem;
    font-weight: 600;
}

.previs-board-tip table {
    border-collapse: collapse;
}

.previs-board-tip th {
    padding: 0 0.875rem 0.125rem 0;
    color: var(--rz-text-secondary-color);
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.previs-board-tip td {
    max-width: 18rem;
    padding: 0.0625rem 0.875rem 0.0625rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A cell that sums up several values (plan 055): the text is cut off with an ellipsis, the number in brackets stays. */
.previs-board-tip-counted {
    display: flex;
    gap: 0.25rem;
    max-width: 18rem;
}

.previs-board-tip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.previs-board-tip-count {
    flex: none;
}

.previs-board-tip th:last-child,
.previs-board-tip td:last-child {
    padding-right: 0;
}

.previs-board-tip-more {
    margin-top: 0.1875rem;
    color: var(--rz-text-secondary-color);
}

/* The button with a text in a dialog ("Delete planning board"): outlined, white, red frame and text; the red of the
   window of the question (previs-confirm-danger) stays full. */
.rz-button.previs-text-button.rz-variant-outlined.rz-danger {
    background-color: var(--rz-base-background-color, #fff);
}

.rz-button.previs-text-button.rz-variant-outlined.rz-danger:hover:not(.rz-state-disabled) {
    background-color: color-mix(in srgb, var(--rz-danger) 10%, var(--rz-base-background-color, #fff));
}

.rz-button.previs-text-button.rz-variant-outlined.rz-danger:focus-visible {
    outline: 0.125rem solid var(--rz-danger);
    outline-offset: 0.125rem;
}

/* The page of a report (plan 085): the parameters in a column of a readable width. */
.previs-freport {
    max-width: 44rem;
}

.previs-freport .previs-report-create {
    min-width: 9rem;
}

.previs-report-open {
    margin-left: 0.5rem;
}

/* The grey one (plan 078; "Reset column layout"): the same form for what does no harm, dark grey from the theme. */
.rz-button.previs-text-button.previs-text-button-grey.rz-variant-outlined {
    --previs-grey: var(--rz-base-700, #495057);
    background-color: var(--rz-base-background-color, #fff);
    border-color: var(--previs-grey);
    color: var(--previs-grey);
}

.rz-button.previs-text-button.previs-text-button-grey.rz-variant-outlined:hover:not(.rz-state-disabled) {
    background-color: color-mix(in srgb, var(--previs-grey) 10%, var(--rz-base-background-color, #fff));
}

.rz-button.previs-text-button.previs-text-button-grey.rz-variant-outlined:focus-visible {
    outline: 0.125rem solid var(--previs-grey);
    outline-offset: 0.125rem;
}

/* The settings of a report (plan 086): a line per column, sort or parameter, with the empty line below; the fields share the line by their need and break among themselves when it is
   too narrow, the icons stay at its end. The empty line has the space of the icons but none of them, so the fields line up. */
.previs-report-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.375rem;
}

.previs-report-line-fields {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.previs-report-parameter {
    align-items: flex-start;
}

.previs-report-parameter .previs-report-line-fields {
    align-items: flex-end;
}

.previs-report-line-icons {
    display: flex;
    align-items: center;
    flex: none;
    gap: 0.125rem;
}

.previs-report-line-remove-gap {
    visibility: hidden;
}

.previs-report-line-error {
    flex: 1 0 100%;
}

.previs-report-line .rz-dropdown,
.previs-report-line .rz-textbox,
.previs-report-line .rz-numeric,
.previs-report-line .rz-datepicker {
    width: 100%;
}

.previs-report-line .rz-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.previs-report-column,
.previs-report-title {
    flex: 1 1 10rem;
    min-width: 9rem;
}

.previs-report-align {
    flex: 0 1 9rem;
    min-width: 7rem;
}

.previs-report-check {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 0.375rem;
}

/* A parameter has more fields than a line of columns: each with its name above it. */
.previs-report-cell {
    display: flex;
    flex: 1 1 9rem;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 8rem;
}

.previs-report-cell-column {
    flex-basis: 10rem;
}

.previs-report-cell-label {
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}