.standardsplash-logowithprogress-logo {
    height: 200px !important;
    margin-bottom: 150px !important;
}

.grid-text-success {
    font-weight: bold;
    color: rgba(11, 186, 131, 1) !important;
}

.grid-text-warning {
    font-weight: bold;
    color: rgba(255, 168, 0, 1) !important;
}

.grid-text-error {
    font-weight: bold;
    color: rgba(246, 78, 98, 1) !important;
}

.grid-text-disabled {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.25) !important;
}

.grid-text-bold {
    font-weight: bold;
}

.warning-background,
.warning-background td,
.warning-background td:hover,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.warning-background:hover .mud-table-cell.sticky-right,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.warning-background:hover .mud-table-cell.sticky-left {
    background-color: #FFFFDE !important;
}

.completed-background,
.completed-background td,
.completed-background td:hover,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.completed-background:hover .mud-table-cell.sticky-right,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.completed-background:hover .mud-table-cell.sticky-left {
    background-color: #E6FFEA !important;
}

.evaluation-pro {
    color: #424242 !important;
    background-color: #4caf503d !important;
}

.sc-labelfield .evaluation-pro .mud-input-slot {
    color: #424242 !important;
}

.evaluation-con {
    color: #424242 !important;
    background-color: #f99a9347 !important;
}

.sc-labelfield .evaluation-con .mud-input-slot {
    color: #424242 !important;
}

.evaluation-info {
    color: #424242 !important;
    background-color: #00000012 !important;
}

.sc-labelfield .evaluation-info .mud-input-slot {
    color: #424242 !important;
}

.span-child-flexitem-star > span {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    min-width: 0px;
    min-height: 0px;
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

.clickable-field,
.clickable-field * {
    cursor: pointer !important;
}

/* Our version of MudBlazor seems to emit style="min-width:160px;" for each mud-tab header. To patch this on
   JobApplication-Edit page where we desire to have two icon tabs with small width, the following two
   styles are introduced */
.mmit-ams-jobapplication-edit div.mud-tab:has(.mmit-ams-jobapplication-edit-mails-tab) {
    min-width: auto !important;
}
.mmit-ams-jobapplication-edit div.mud-tab:has(.mmit-ams-jobapplication-edit-attachments-tab) {
    min-width: auto !important;
}
/* The General info now lives in the first tab, shown only as an icon, on both the Employee-Edit and
   JobApplication-Edit pages, so that tab should be narrow like the other icon tabs. */
.mmit-ams-jobapplication-edit div.mud-tab:has(.mmit-ams-jobapplication-edit-general-tab),
.mmit-ams-employee-edit div.mud-tab:has(.mmit-ams-employee-edit-general-tab),
.mmit-ams-mag-edit div.mud-tab:has(.mmit-ams-mag-edit-general-tab) {
    min-width: auto !important;
}
/* Layout for the General tab on Employee-Edit, JobApplication-Edit and Mag-Edit: the entity information is
   shown as a responsive label/value grid and the edit action is pinned to the bottom-right corner (the
   actions row is the last child and fills the remaining vertical space via margin-top: auto). */
.mmit-ams-general-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Fill the tab panel's height (same as .flexitem-star, which is why the grids/forms fill) so the
       actions row below can be pushed to the very bottom rather than sitting under short content. */
    flex: 1 1 0px;
    min-height: 0;
}
.mmit-ams-general-tab-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}
.mmit-ams-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 32px;
    align-content: start;
}
.mmit-ams-info-section {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 4px;
    margin-top: 8px;
}
.mmit-ams-info-section:first-child {
    margin-top: 0;
}
.mmit-ams-info-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mmit-ams-info-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.mmit-ams-info-value {
    font-size: 14px;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    min-height: 20px;
}
/* if a mud-tab header contains a tooltip, make the triggering area fill up as much space as possible in that mud-tab header */
.mud-tab > .mud-tooltip-root {
    flex: 1 1 auto;
    place-content: center;
    height: stretch;
}

/* in the vertical side area with comment cards near the (right) end-border of display-space, make the triggering area fill up as much space as possible in the content part of the card */
.mmit-ams-comment-list-side-end .mud-tooltip-root {
    min-width: stretch;
    max-width: stretch;
    min-height: stretch;
    max-height: stretch;
    display: flex;
}
/* in the vertical side area with comment cards near the (right) end-border of display-space, create cards that can grow in height, but have a base height of 6 lines */
.mmit-ams-comment-list-side-end.mud-card {
    display: block;
}
/* for a comment card, separate the header from the content with a vertical line */
.mmit-ams-comment-list-side-end .mud-card-header {
    border-bottom-color: var(--mud-palette-divider);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: var(--mud-palette-table-striped);
}
/* for a comment card, display the header information as a single inline block so the user/date sit on one line */
.mmit-ams-comment-list-side-end .mmit-ams-comment-list-side-end-header {
    display: inline-block;
}
.mmit-ams-comment-list-side-end .mmit-ams-comment-list-side-end-header > * {
    display: inline!important;
    /*vertical-align: middle;*/
}
/* for a comment card, ensure the content is wrapped, but cannot overflow the height of the container. Basically we want an ellipsis, but that is not possible in CSS if you allow wrapping on multiple lines as we do, i. e. if you have white-space: pre-wrap */
.mmit-ams-comment-list-side-end .mmit-ams-comment-card-content {
    text-align: start;
    height: stretch;
    overflow-y: hidden;
    white-space: pre-wrap; /* display spaces and newlines as entered */
    overflow-wrap: break-word;
    text-wrap-mode: wrap;
    text-wrap-style: stable;
    text-overflow: ellipsis;
}

/* use class mmit-ams-pre-line-validation and expand this for other controls where you want validation messages to keep their line-breaks */
.mmit-ams-pre-line-validation.mud-input-control div.me-auto {
    white-space: pre-line;
}

.impersonation-active::before {
    content: '';
    position: fixed;
    inset: 0;
    border: 4px solid rgba(244, 67, 54, 1);
    pointer-events: none;
    z-index: 9999;
}

/* The full-screen error overlay rendered by StandardContainer sits at z-index
   10000 (see MMC.Swift.Blazor.Ui.Mud.css) and covers the whole MudBlazor chrome,
   trapping the user during an exception. We keep the overlay high (so ordinary
   dialogs stay covered by the error) and instead lift ONLY the chrome the user
   needs to recover above it:

     10000  error / wait overlay (unchanged)
     10001  app bar        -> profile menu button stays clickable
     10003  impersonation dialog only (see :has() rule below)
     10004  open popovers  -> menu dropdown + the impersonation user-picker
                              dropdown render above the error and the dialog

   The menu popover and the combobox popover both teleport to the global
   MudPopoverProvider, so they can't be scoped per-element; lifting all open
   popovers is harmless (they're transient and only openable from chrome that is
   itself reachable during the error). Ordinary page dialogs are NOT lifted -
   they stay at MudBlazor's default (~1400), below the error overlay. */
.mud-appbar {
    z-index: 10001 !important;
}

.mud-popover.mud-popover-open {
    z-index: 10004 !important;
}

/* Lift ONLY the impersonation dialog above the error overlay so the user can
   switch/end impersonation to recover. Scoped via a marker element rendered
   inside ImpersonationDialog (ImpersonationDialog.razor); every other dialog is
   left at the default dialog z-index and remains covered by the error. */
.mud-dialog-container:has(.ams-impersonation-dialog-marker) {
    z-index: 10003 !important;
}

.html-editor-full-size .mud-input-control-input-container,
.html-editor-full-size .mud-input,
.html-editor-full-size .mud-input-slot,
.html-editor-full-size .d-flex.flex-wrap.align-center.mud-width-full {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

.html-editor-full-size .rz-html-editor {
    flex: 1;
}

.mud-expand-panel-header {
    padding: 9px !important;
}

/* Grid-page toolbar (ScToolbarGridLayout): keep the same height whether or not an Add button
   is present. The bar height is driven by its first (caption) row; with a button that row is
   ~46px (a ~36px button + 5px margin each side), without one it collapses to the ~32px caption.
   Flooring the caption row to 46px (→ ~54px total with the 4px padding) keeps button-less grid
   pages (e.g. Skill Matrix and the report pages) the same height as the rest. min-height, so
   pages that add toolbar stripes can still grow. */
.sc-toolbar-grid-layout-toolbar > .flexcontainer-horizontal-centered:first-child {
    min-height: 46px;
}

/* Edit-screen page header: the hand-rolled <MudPaper> title bar above the tabs on the
   JobApplication and Employee edit screens (and any other page that opts in). These aren't
   MudToolBar/grid toolbars, so they need their own rule to match the unified ~54px bar.
   Drop the vertical padding (keep horizontal) and floor the content row to 54px; the row's
   existing align-items:center then vertically centers the title + actions. */
.ams-page-header {
    padding: 0 12px;
}

    .ams-page-header > .flexcontainer-horizontal-centered {
        min-height: 54px;
    }

/* Google-Forms-style questionnaire: a darker surface holding a vertical stack of
   white question cards. Colours come from the MudBlazor palette so the look adapts
   to light/dark themes (surface stays "the white box", background-grey is the
   darker canvas behind it). */
.mmit-ams-questionnaire-editor {
    display: flex;
    flex-direction: column;
    /* Center the cards as a fixed-width column (like Google Forms) while the darker
       background still spans the full width behind them. */
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--mud-palette-background-grey);
}

.mmit-ams-questionnaire-card {
    /* Default Google-Forms-style fixed column width (centred by .mmit-ams-questionnaire-editor), kept
       as a fallback for any context that doesn't opt into a wider layout. Falls back to the container
       width only on screens narrower than the column. The current consumers - the wide (Viewport75)
       fill-out dialog and the read-only MAG form viewer on the phase tabs - both override this to fill
       their container; see the width:100% rule below. */
    width: 770px;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px 24px;
    box-shadow: var(--mud-elevation-1);
    /* The shared left-alignment line that titles, captions, and every value's actual content line
       up on (see the "Horizontal alignment" block below). One knob for the whole questionnaire. */
    --questionnaire-align-indent: 14px;
}

/* In the wide (Viewport75) fill-out dialog the cards fill the dialog. The dialog itself is already a
   bounded 75vw, so filling it gives a wide-but-contained form rather than a narrow centred column. */
.scdialoglayout-viewport75 .mmit-ams-questionnaire-card {
    width: 100%;
}

/* Scroll pane for a questionnaire rendered inside a dialog (the MAG form fill-out dialog, the template
   preview). A dialog's content area (.flexed-mud-dialog .mud-dialog-content) is content-sized and clips
   its overflow, and ScDialogLayout's MudContainer only tries to scroll via height:100% - which has no
   definite parent height to resolve against and so falls back to auto. A questionnaire longer than a
   screenful therefore grows past the viewport-capped dialog and is simply cut off at the bottom, with no
   scrollbar and (in the fill-out dialog) unreachable inputs. Bound the questions and scroll inside that.

   The budget is what's left of the viewport once everything around the questions is paid for: the app bar
   the dialog has to stay below, the gap we want above and below it (2 x 80px), and the dialog's own title
   and actions rows (~142px together). max-height rather than height, so a short questionnaire still gets
   a dialog that fits it instead of a mostly-empty tall one - it just ends up with more than 80px of air.
   min-height:0 keeps the pane shrinkable when the dialog nests it in a flex column. */
.mmit-ams-questionnaire-dialog-pane {
    max-height: calc(100vh - var(--mud-appbar-height, 64px) - 160px - 142px);
    min-height: 0;
    overflow-y: auto;
}

/* MudBlazor centres a dialog in the WHOLE viewport, but the top of that viewport is the app bar - which is
   lifted to z-index 10001 for the error overlay (see the z-index block above), so it covers the dialog
   rather than being pushed aside. Centring therefore looks bottom-heavy: an even split of the leftover
   space reads as a large gap under the dialog and almost nothing between the bar and its title.

   Pay for the bar out of the top margin so the two visible gaps come out equal: the dialog's own margin
   (32px, matching MudBlazor's) at each end, plus the bar's height on top. The centring then splits only
   what's left, so whatever it gives one end it gives the other - which keeps the gaps balanced for a short
   questionnaire too, not just for one that hits the max-height above. Scoped by :has() to the questionnaire
   dialogs (same approach as the impersonation dialog's z-index rule); every other dialog stays centred. */
.flexed-mud-dialog:has(.mmit-ams-questionnaire-dialog-pane) {
    margin-top: calc(var(--mud-appbar-height, 64px) + 32px);
    margin-bottom: 32px;
}

/* On the read-only MAG form viewer (the phase tabs: Feedback / Performance Review) the container is
   the full page width, so filling it edge-to-edge reads too wide on large/fullscreen monitors. Hold
   the form to 75% of the container - .mmit-ams-questionnaire-editor centres it - so it keeps a bit of
   breathing room on each side, roughly matching the dialog's 75vw. Both rules override the fixed 770px
   column default and cover every card type (value, heading, questionnaire-group, and the footer card),
   since they all share .mmit-ams-questionnaire-card. */
.mmit-ams-mag-form-viewer .mmit-ams-questionnaire-card {
    width: 75%;
}

/* Follow-Up tab opts into full width (MagFormViewer FullWidth="true"): the viewer there already
   shares its row with the comments column (8-of-12 grid), so the form should fill its column rather
   than inset another 25%. Declared after the 75% rule so it wins on the element that carries both
   classes (equal specificity). */
.mmit-ams-mag-form-viewer-full .mmit-ams-questionnaire-card {
    width: 100%;
}

/* Heading question — its own box at the root level. */
.mmit-ams-heading-card {
    padding-top: 14px;
    padding-bottom: 14px;
}

.mmit-ams-question-title {
    margin-bottom: 4px;
    font-weight: 500;
}

.mmit-ams-question-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Heading question — a sub caption: a notch heavier than a question title, with no colour or
   underline (those mark the referenced-questionnaire group title). */
.mmit-ams-question-sub-title {
    font-weight: 600;
    margin-bottom: 4px;
}

/* Referenced-questionnaire group box: a single box whose questions render inline inside it,
   headed by the group's title. */
.mmit-ams-question-group-title {
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 8px;
    color: var(--mud-palette-primary);
    border-bottom: 2px solid var(--mud-palette-lines-inputs);
}

/* A single question rendered inline within a group box (no card of its own). Bottom-heavy
   padding puts a bit more space after the answer so adjacent questions stay distinct. */
.mmit-ams-question-row {
    padding: 6px 0 18px;
}

/* ── Horizontal alignment ─────────────────────────────────────────────────────────────────────
   MudBlazor parks each control's visible content at a different left inset (the checkbox's hit-area
   padding, the field's text padding inside its box, the chip margins …), so the value column reads
   ragged against the flush-left titles. We line everything up on one indent (--questionnaire-align-
   indent, on the card): titles/captions shift right to it, and each control's content is pinned to
   it. The input BOXES stay full-width at the card edge — only their content moves. MudBlazor exposes
   no custom property for these paddings, so the text field's natural text inset is the reference and
   --questionnaire-align-indent is set to match it (bump the var if the titles and the field text don't
   line up); the per-control nudges below re-apply the var, each with a small residual correction. */

/* Titles and captions: padding-left (not margin) so the group-title's underline keeps spanning the
   full card width while only its text indents to the line. */
.mmit-ams-question-title,
.mmit-ams-question-sub-title,
.mmit-ams-question-group-title {
    padding-left: var(--questionnaire-align-indent);
}

/* Text field: left untouched — its natural text inset IS the reference the var is matched to, so we
   don't shift its text inside its own box. (Title alignment comes from the var above, not the field.) */

/* Checkbox: zero the glyph button's own left padding, then shift the control to the line so the
   box's left edge meets the title. */
.mmit-ams-question-value .mud-checkbox {
    margin-left: calc(var(--questionnaire-align-indent) - 2px);   /* residual glyph inset after zeroing the button padding */
}
.mmit-ams-question-value .mud-checkbox .mud-button-root {
    padding-left: 0 !important;
}

/* Rating: zero the first star's left padding, then shift the row to the line (later stars keep
   their spacing). */
.mmit-ams-question-value .mud-rating-root {
    margin-left: calc(var(--questionnaire-align-indent) - 1px);   /* residual first-star inset */
}
.mmit-ams-question-value .mud-rating-item:first-child {
    padding-left: 0 !important;
}

/* MultiText: indent the whole control (tiles + add box) onto the shared alignment line. */
.mmit-ams-question-value .mmit-ams-multi-texts-field {
    padding-left: var(--questionnaire-align-indent);
}

/* Pros&Cons (ScLabelField): the chips are MudChips rendered INSIDE an input box (MudInputExtended,
   under .sc-labelfield).
   Each chip's own left margin pushes it right of the line; since chips are inline and WRAP, zero the
   left margin on EVERY chip (so the first chip on each wrapped line also lands on the line, not just
   the very first) and carry the inter-chip gap on the right margin instead (which in the "regular"
    case is instead 4px on either side). */
.mmit-ams-question-value .sc-labelfield .mud-chip {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* Multi-text answers: a two-column CSS grid (answer input | square button). Plain themed inputs/buttons
   are used instead of MudBlazor field internals so the fixed-height rows and the square button column
   always line up. --mmit-answer-h drives both the input height and the (square) button size. */
.mmit-ams-multi-texts-field {
    --mmit-answer-h: 40px;
}
.mmit-ams-multi-texts-label {
    display: block;
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
}
.mmit-ams-multi-texts-grid {
    display: grid;
    grid-template-columns: 1fr var(--mmit-answer-h);
    gap: 8px;
    align-items: start;   /* keep the square button at the top as the text area grows */
}
.mmit-ams-multi-texts-grid.mmit-ams-multi-texts-grid--readonly {
    grid-template-columns: 1fr;
}
/* Multi-line answer field: starts one line tall (matching the square button) and grows with content
   (field-sizing); where field-sizing is unsupported it stays at min-height and the user can drag the
   resize handle / scroll. */
.mmit-ams-multi-texts-field .mmit-ams-answer-input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--mmit-answer-h);
    max-height: 240px;
    margin: 0;
    padding: 8px 12px;
    font: inherit;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    resize: vertical;
    overflow-y: auto;
    field-sizing: content;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.mmit-ams-multi-texts-field .mmit-ams-answer-input::placeholder {
    color: var(--mud-palette-text-disabled);
}
.mmit-ams-multi-texts-field .mmit-ams-answer-input:hover:not(:read-only) {
    border-color: var(--mud-palette-text-secondary);
}
.mmit-ams-multi-texts-field .mmit-ams-answer-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary) inset;
}
.mmit-ams-multi-texts-field .mmit-ams-answer-input:read-only {
    background-color: transparent;
    cursor: default;
    resize: none;
}
/* Square button matching the input: same height as the row and an equal width, same border/radius. */
.mmit-ams-multi-texts-field .mmit-ams-answer-btn {
    box-sizing: border-box;
    width: var(--mmit-answer-h);
    height: var(--mmit-answer-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);   /* same colour for every button (x and +) */
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.mmit-ams-multi-texts-field .mmit-ams-answer-btn:hover {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-secondary);
}
.mmit-ams-multi-texts-empty {
    color: var(--mud-palette-text-secondary);
}

/* A dialog form (.sc-field-form, produced by ScDialogLayout) is a vertical flex column with a 400px
   min-height. Some field components default to flex-grow:1 (the combobox via .sc-codebeam-rawmudcombobox,
   and MudBlazor's input control), so when the dialog is taller than its content they balloon to fill the
   slack and scatter the remaining controls: a lone combobox stretches and leaves a gap above the next
   field, or a grown text field shoves everything below it to the bottom. Pin every direct control to its
   natural height so they stack one after another; the leftover space simply sits at the bottom.
   Scoped under .flexed-mud-dialog (and excluding fullscreen dialogs, which intentionally fill - e.g. the
   full-size HTML editor) so it outranks the per-component flex-grow defaults without touching those. */
.flexed-mud-dialog:not(.mud-dialog-fullscreen) .sc-field-form > * {
    flex-grow: 0;
}

/* The dialog paper is shrink-to-fit (ScDialogLayout opens it with only a MaxWidth, never FullWidth - see
   MudOverlaysManager), so it widens to whatever its content prefers. A ComboBox renders its selected value
   (long text, or a row of chips for a multi-select) inside the input, and that value's intrinsic width feeds
   straight back up into the paper - so every pick grows the dialog, and the same happens on any dialog whose
   form holds a combobox. Pin the form to its design width (its min-width; an explicit width:0 is simply
   clamped up to that min-width, which makes the width definite so the paper no longer tracks content) and let
   the grid columns shrink to their 50% basis, so a long value wraps inside its own column instead of pushing
   the dialog - or its neighbouring field - wider. Excludes fullscreen dialogs (they intentionally fill) and
   Viewport75 dialogs (they set their own width via .scdialoglayout-viewport75). */
.flexed-mud-dialog:not(.mud-dialog-fullscreen) .sc-field-form:not(.scdialoglayout-viewport75) {
    width: 0;
}

.flexed-mud-dialog:not(.mud-dialog-fullscreen) .sc-field-form .mud-grid-item {
    min-width: 0;
}

/* The expanded activity row in the job-application phase grid hosts an editable form (see PhaseTab /
   *Detail), not a clickable record. The data grid runs with Hover + Striped, and MudBlazor renders the
   expanded content as its own .mud-table-row, so hovering anywhere over the form lights the whole panel
   with the row-hover colour - which reads as a stray highlight on a form. Pin the detail row's cell to a
   flat surface in every state so the hover (and stripe) tint never shows there. Only the detail row is
   targeted (it carries .mmit-ams-activity-detail); the normal data rows keep their hover. */
.mud-table-row:has(.mmit-ams-activity-detail) > td {
    background-color: var(--mud-palette-surface) !important;
}

/* ── Questionnaire-template manager: right-pane tile lists ─────────────────────────────────────────
   The right pane lists every questionnaire template as a clickable tile instead of a data grid. Two
   independently scrolling sections stack vertically - top-level questionnaires above, sub-questionnaires
   below. Picking a tile shows that template's structure in the left (tree) pane and highlights the tile
   so it is clear which one is being edited. Colours come from the MudBlazor palette so it adapts to
   light/dark themes. */
.qt-tilelist-pane {
    /* The sections scroll, not the pane. */
    overflow: hidden;
    min-height: 0;
}

.qt-tile-section {
    display: flex;
    flex-direction: column;
    /* The two sections split the pane height evenly; each scrolls its own overflow. */
    flex: 1 1 0;
    min-height: 0;
}

.qt-tile-section + .qt-tile-section {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.qt-tile-section-header {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.qt-tile-list {
    flex: 1 1 0;
    min-height: 0;
    /* Vertical-only scrolling. overflow-x must be set explicitly: per the CSS overflow spec, leaving it
       at the initial `visible` while overflow-y is `auto` makes the browser compute overflow-x as `auto`
       too - so a stray pixel on hover (a button ripple, the tooltip wrapper) would pop a horizontal
       scrollbar, which steals height, pops the vertical scrollbar, reflows the tiles, and slides the
       hovered icon out from under the cursor: the tooltip flicker loop. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Reserve the vertical scrollbar's space so it appearing (long list) never shifts the tiles sideways. */
    scrollbar-gutter: stable;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qt-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    /* Reserve the accent width on every tile so selecting one doesn't shift its text. */
    border-left: 4px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    background-color: var(--mud-palette-surface);
    transition: background-color .15s, border-color .15s;
}

.qt-tile:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* The picked tile: tinted background + a primary left accent so it is obvious which template the
   left-pane tree belongs to. */
.qt-tile-selected,
.qt-tile-selected:hover {
    border-color: var(--mud-palette-primary);
    border-left-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.qt-tile-icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.qt-tile-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qt-tile-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.qt-tile-empty {
    padding: 12px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Comboboxes (Swift RawMudComboBox) collapse their value area to ~1.19em when empty but grow to a
   full chip's height once a multi-select renders chips, so the field visibly jumps taller. Give the
   value slot (.mud-input-slot, where the inline min-height is set) a constant floor equal to one
   Size.Small chip (24px) and zero the chip's default vertical margins so a single chip's footprint
   matches that floor. Result: empty and chip-filled comboboxes are the same height; extra chips still
   wrap and grow the field. Scoped to .sc-codebeam-rawmudcombobox so nothing outside comboboxes is hit.
   Done in client CSS (not the Swift framework) by overriding the framework's inline style with !important. */
.sc-codebeam-rawmudcombobox .mud-input-slot {
    min-height: 24px !important;
}

.sc-codebeam-rawmudcombobox .mud-chip {
    margin-top: 0;
    margin-bottom: 0;
}