/* Shared dialog language
   ----------------------
   The design worked out on the request detail modal, lifted to every Radzen
   dialog in the app: the confirms, Add Member, Edit Site, Edit User, and Send
   for Doctor Review. Element-level on purpose — these rules restyle the markup
   those dialogs already emit, so none of them need rewriting to pick it up.

   The rules:
     flat white          — one surface; no grey bands, no nested cards
     tinted fill         — an input you can type in (white + blue ring on focus)
     hairline box        — a record you can read
     small-caps + track  — labels and states
     colour is meaning   — never decoration */

/* ===== Chrome ===== */

/* Radzen ships a grey title bar, which leaves it as the one tinted surface on
   an otherwise white dialog. White + one hairline, on a 2rem edge. */
.rz-dialog-titlebar {
    background: var(--surface-base);
    border-bottom: 1px solid var(--border-default);
    padding: 1rem 2rem;
}

.rz-dialog-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

/* Give the close glyph a real hit target instead of a bare icon. */
.rz-dialog-titlebar .rz-dialog-titlebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: background 0.12s ease, color 0.12s ease;
}

.rz-dialog-titlebar .rz-dialog-titlebar-close:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.rz-dialog-content {
    background: var(--surface-base);
    padding: 1.5rem 2rem 1.75rem;
}

/* ===== Scrollbars =====
   Radzen paints the thumb in the theme's primary blue, which makes the loudest
   thing on screen a piece of chrome. Thin, neutral, no stepper arrows.

   .thin-scroll is the same treatment as a class, for anything outside a dialog that scrolls
   inside its own box — the dashboard's cards being the first. One rule, so a scrollbar
   doesn't end up looking like two different decisions in two places. */
.rz-dialog,
.rz-dialog *,
.rz-dialog-content,
.thin-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.rz-dialog ::-webkit-scrollbar,
.rz-dialog-content::-webkit-scrollbar,
.thin-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.rz-dialog ::-webkit-scrollbar-track,
.rz-dialog-content::-webkit-scrollbar-track,
.rz-dialog ::-webkit-scrollbar-corner,
.rz-dialog-content::-webkit-scrollbar-corner,
.thin-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.rz-dialog ::-webkit-scrollbar-thumb,
.rz-dialog-content::-webkit-scrollbar-thumb,
.thin-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
}

.rz-dialog ::-webkit-scrollbar-thumb:hover,
.rz-dialog-content::-webkit-scrollbar-thumb:hover,
.thin-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-subtle);
}

.rz-dialog ::-webkit-scrollbar-button,
.rz-dialog-content::-webkit-scrollbar-button,
.thin-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* ===== Field labels =====
   The form dialogs label their fields with <RadzenText TextStyle="Subtitle2">.
   Restyling that class turns every one of them into the same micro-label used
   for STATUS / NOTE / SUBMITTED, with no markup change. */
.rz-dialog .rz-text-subtitle2 {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--text-subtle);
    line-height: 1.5;
}

/* ===== Inputs =====
   Tint is the signal for "you can type here". White fields on a white dialog
   have no edge at all, which is the exact problem this replaced. */
.rz-dialog .rz-textbox,
.rz-dialog .rz-textarea,
.rz-dialog input.rz-inputtext,
.rz-dialog textarea.rz-inputtext,
.rz-dialog .rz-dropdown,
.rz-dialog .rz-multiselect {
    background-color: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.rz-dialog .rz-textbox:focus,
.rz-dialog .rz-textarea:focus,
.rz-dialog input.rz-inputtext:focus,
.rz-dialog textarea.rz-inputtext:focus,
.rz-dialog .rz-dropdown.rz-state-focused,
.rz-dialog .rz-multiselect.rz-state-focused {
    outline: none;
    background-color: var(--surface-base);
    border-color: var(--liu-blue);
    box-shadow: 0 0 0 3px var(--liu-blue-light);
}

.rz-dialog .rz-dropdown:not(.rz-state-disabled):hover,
.rz-dialog .rz-multiselect:not(.rz-state-disabled):hover {
    background-color: var(--surface-base);
}

/* A disabled field is showing you a value, not offering one — flatten it so it
   reads as a fact rather than a control you can't use. */
.rz-dialog .rz-textbox[disabled],
.rz-dialog input.rz-inputtext[disabled],
.rz-dialog .rz-state-disabled .rz-inputtext {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    opacity: 1;
}

/* ===== Buttons =====
   Regular weight, icon slightly ahead of the label — the glyph carries the
   meaning and the word confirms it. */
.rz-dialog .rz-button,
.rz-dialog .rz-button .rz-button-text,
.rz-dialog .rz-button .rzi {
    font-weight: 400;
}

.rz-dialog .rz-button .rzi { font-size: 1.15rem; }
.rz-dialog .rz-button .rz-button-text { font-size: 0.85rem; }

/* Disabled should read as "waiting on you", not as a broken control. */
.rz-dialog .rz-button[disabled],
.rz-dialog .rz-button.rz-state-disabled {
    background-color: var(--surface-sunken) !important;
    border-color: var(--border-default) !important;
    color: var(--text-muted) !important;
    opacity: 1;
}

/* ===== Form layout =====
   Opt-in classes so a dialog can stop hand-rolling its layout in inline styles. */
.dlg-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

/* Two-up on wide dialogs, stacked on narrow. .dlg-field--full spans both. */
.dlg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    text-align: left;
}

.dlg-field--full { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .dlg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Plain textarea styled to match the Radzen inputs above — same tint, same ring. */
.dlg-textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    resize: vertical;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dlg-textarea::placeholder { color: var(--text-muted); }

.dlg-textarea:focus {
    outline: none;
    background: var(--surface-base);
    border-color: var(--liu-blue);
    box-shadow: 0 0 0 3px var(--liu-blue-light);
}

/* Actions sit on one right-aligned row, separated by a hairline. */
.dlg-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.dlg-actions--bare {
    border-top: none;
    padding-top: 0;
}

/* ---- the acknowledgement checkbox ----
   Radzen paints a checked box with --rz-primary, which this app pins to the brand blue —
   a saturated blue square inside an amber note, sitting a couple of pixels above the
   line it belongs to. Deeper ink so the tick has contrast against it, sized to the text
   it sits beside, and centred on the row rather than hung from its top. */
.dlg-note--check {
    align-items: center;
    cursor: pointer;
}

.dlg-note--check .rz-chkbox {
    flex: 0 0 auto;
    align-self: center;
}

.dlg-note--check .rz-chkbox-box {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background: #fff;
    box-shadow: none;
}

/* Checked is a mark, not a fill. The box stays the colour of the field it belongs to and
   the tick arrives inside it in ink — a filled square is a lot of colour for "yes", and
   in an amber note it was the loudest thing in the row.
   The hover half matters: Radzen has its own `.rz-state-active:hover` that would put the
   brand blue back the moment the pointer is over it. */
.dlg-note--check .rz-chkbox-box.rz-state-active,
.dlg-note--check .rz-chkbox-box.rz-state-active:hover {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
}

.dlg-note--check .rz-chkbox-box .rzi,
.dlg-note--check .rz-chkbox-box .notranslate {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-muted);
    background: none;
}

/* ---- the two tiers, inside a dialog ----
   A dialog's confirm is the action tier — the tinted fill with blue ink that Continue,
   Submit and the case page's next-step button all wear. It was a solid LIU-blue fill,
   which is a third treatment and, in a white dialog, the loudest thing on screen for
   something you already decided to do by opening the dialog.

   !important because the app-wide `.rz-button.rz-primary:not(...)` brand rule carries
   five classes and its own !important; matching it here is the only way through. */
.dlg-actions .rz-button.rz-primary,
.dlg-actions .rz-button.rz-primary:not(:disabled):not(.rz-state-disabled) {
    background-color: var(--liu-blue-light) !important;
    border: 1px solid #bcdcf1 !important;
    color: #1f5f8b !important;
    font-weight: var(--weight-semi);
    box-shadow: none !important;
}

.dlg-actions .rz-button.rz-primary:not(:disabled):not(.rz-state-disabled):hover {
    background-color: var(--liu-blue-light) !important;
    border-color: #bcdcf1 !important;
    color: #1f5f8b !important;
    filter: brightness(0.97);
    transform: translateY(-1px);
}

.dlg-actions .rz-button:disabled,
.dlg-actions .rz-button.rz-state-disabled {
    opacity: 0.55;
    box-shadow: none !important;
}

/* Destructive actions — Unassign, Delete — are tools, not the dialog's purpose. Outlined
   in the danger colour so they read as available without competing with the confirm. */
.dlg-actions .rz-button.rz-danger,
.dlg-actions .rz-button.rz-danger:not(:disabled):not(.rz-state-disabled) {
    background-color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--status-danger) 35%, #fff) !important;
    color: var(--status-danger) !important;
    box-shadow: none !important;
}

.dlg-actions .rz-button.rz-danger:not(:disabled):not(.rz-state-disabled):hover {
    background-color: var(--status-danger-bg) !important;
    border-color: var(--status-danger) !important;
    color: var(--status-danger) !important;
}

/* A dialog action keeps the app's 8px box like everything else. */
.dlg-actions .rz-button {
    border-radius: var(--r-button) !important;
    margin-right: 0 !important;
}

/* ===== Notes =====
   The inline status banners these dialogs used to hand-roll — each one carried
   its own hardcoded palette. One component, four tones, all from tokens.
   Tints are deliberately faint: a note is context, not an alarm. */
.dlg-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.dlg-note .rzi {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.25;
}

.dlg-note-title {
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.dlg-note-sub {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dlg-note--danger {
    background: color-mix(in srgb, var(--status-danger) 7%, #fff);
    border-color: color-mix(in srgb, var(--status-danger) 28%, transparent);
    color: var(--status-danger-text);
}
.dlg-note--danger .rzi { color: var(--status-danger); }

.dlg-note--success {
    background: color-mix(in srgb, var(--status-success) 7%, #fff);
    border-color: color-mix(in srgb, var(--status-success) 28%, transparent);
    color: var(--status-success-text);
}
.dlg-note--success .rzi { color: var(--status-success); }

.dlg-note--info {
    background: var(--liu-blue-light);
    border-color: color-mix(in srgb, var(--liu-blue) 45%, transparent);
    color: var(--status-info-text);
}
.dlg-note--info .rzi { color: var(--status-info-text); }

.dlg-note--warning {
    background: color-mix(in srgb, var(--status-warning) 12%, #fff);
    border-color: color-mix(in srgb, var(--status-warning) 40%, transparent);
    color: var(--status-warning-text);
}
.dlg-note--warning .rzi { color: var(--status-warning-text); }

/* A note you tick — same shell, made obviously clickable. */
.dlg-note--check {
    cursor: pointer;
    align-items: flex-start;
}

/* Inline progress line, e.g. "Checking…" while a lookup runs. */
.dlg-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

/* ===== Empty states =====
   Quiet, roomy, and always named — never a bare "No data". */
.rz-dialog .empty {
    padding: 2.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: var(--text-subtle);
}

/* A checkbox reading as one control with its label — the pair was being hand-assembled
   with inline flex wherever a dialog needed one. */
.dlg-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

/* Supporting line under a field. Says why the field exists, not what to type. */
.dlg-hint {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    color: var(--text-subtle);
    line-height: 1.45;
}

/* ===== Confirm and alert buttons =====
   These are Radzen's own markup, not ours, so nothing on the page had ever reached them:
   every confirm in the app was still wearing the stock solid blue and solid grey while
   the pages around it use a tinted fill and a hairline outline. One rule here fixes every
   confirm and every alert rather than each call site — the calls pass text, not styling.

   Position, not class, decides which is which: Radzen renders OK first and Cancel second,
   and its class names for the two have changed between versions where the order has not.

   `!important` throughout because Radzen's .rz-primary sets the same properties at the
   same specificity, and this sheet cannot rely on load order against a bundled theme. */
.rz-dialog-confirm-buttons .rz-button,
.rz-dialog-alert-buttons .rz-button {
    min-width: 7.5rem;
    padding: 0.45rem 1.1rem !important;
    border-radius: var(--r-button) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semi) !important;
    box-shadow: none !important;
    transition: filter 0.12s ease, border-color 0.15s ease, color 0.15s ease;
}

/* The action. Same tinted fill the submission form's own primary uses — a fill, not a
   flood: on a white dialog a saturated blue block is the loudest thing on screen, which
   is the wrong emphasis for a button whose partner is "Cancel". */
.rz-dialog-confirm-buttons .rz-button:first-child,
.rz-dialog-alert-buttons .rz-button {
    background-color: var(--liu-blue-light) !important;
    border: 1px solid #bcdcf1 !important;
    color: #1f5f8b !important;
}

.rz-dialog-confirm-buttons .rz-button:first-child:hover:not(:disabled),
.rz-dialog-alert-buttons .rz-button:hover:not(:disabled) {
    filter: brightness(0.97);
}

/* Cancel is a way out, not a second action — the neutral tier, same as .admin-button. */
.rz-dialog-confirm-buttons .rz-button:last-child:not(:first-child) {
    background-color: transparent !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-muted) !important;
}

.rz-dialog-confirm-buttons .rz-button:last-child:not(:first-child):hover:not(:disabled) {
    filter: none;
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

/* Clicking leaves a button focused, and Radzen's focus fill would otherwise sit there
   for as long as the dialog is open. The keyboard still gets a ring. */
.rz-dialog-confirm-buttons .rz-button:focus:not(:focus-visible),
.rz-dialog-alert-buttons .rz-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none !important;
}

.rz-dialog-confirm-buttons .rz-button:focus-visible,
.rz-dialog-alert-buttons .rz-button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--liu-blue-dark) 20%, transparent) !important;
}

/* The row itself: right-aligned like every other action row in the app, and with air
   above it rather than sitting on the message. */
.rz-dialog-confirm-buttons,
.rz-dialog-alert-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}