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;
}

/* Design system — CTA color correction (issue #580): Radzen's default Material primary
   (#4340D2 light / #bb86fc dark, both from the Radzen.Blazor package theme, not this repo)
   is replaced with the brand purple everywhere ButtonStyle="Primary" is used. Light/dark
   shades below are NOT calculated by Radzen from --rz-primary — the package hardcodes each
   one separately — so every shade actually used by the component library is overridden here.
   Light theme: Radzen's own values; the lighter button purple (#6966DB) comes from
   Shade.Light on the buttons (Variant.Flat + Shade.Light + border-radius-10). */
:root {
    --rz-primary: #4340D2;
    --rz-primary-light: #6966DB;
    --rz-primary-lighter: rgba(67, 64, 210, 0.12);
    --rz-primary-dark: #3633A8;
    --rz-primary-darker: #2E2C8F;
}

/* Dialogs and popups are rendered outside the layout that carries ".rz-material-dark":
   the brand shades also go on the body in dark mode, so they reach them too. */
.rz-material-dark,
body:has(.rz-layout.rz-material-dark) {
    --rz-primary: #616BEF;
    --rz-primary-light: #8C93F3;
    --rz-primary-lighter: rgba(97, 107, 239, 0.12);
    --rz-primary-dark: #4A52D1;
    --rz-primary-darker: #333CC8;
}

/* Thin, quiet scrollbars (sidebar, dialogs, popups). */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 140, 0.35) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 140, 0.35);
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(120, 120, 140, 0.55);
}

/* Dropdown popups: rounded panel and options, selection styled like the sidebar. */
.rz-dropdown-panel {
    border-radius: 12px !important;
    padding: 4px;
    overflow: hidden;
}

.rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    border-radius: 8px !important;
    margin: 2px 8px;
}

.rz-dropdown-panel .rz-dropdown-item:hover:not(.rz-state-highlight) {
    background-color: rgba(0, 0, 0, 0.05);
}

.rz-material-dark .rz-dropdown-panel .rz-dropdown-item:hover:not(.rz-state-highlight) {
    background-color: rgba(255, 255, 255, 0.08);
}

.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background-color: var(--rz-primary-lighter) !important;
    color: var(--rz-primary) !important;
}

/* Custom styles */
.border-radius-10 {
    border-radius: 10px !important;
}

.border-radius-15 {
    border-radius: 15px !important;
}

.border-radius-20 {
    border-radius: 20px !important;
}

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

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-transparent {
    background-color: transparent !important;
}

.filled-icon {
    font-variation-settings: 'FILL' 1 !important;
}

.custom-link {
    color: #039e95 !important;
    font-weight: bold !important;
    text-decoration: none;
}

    .custom-link:hover {
        color: #9e6ffa !important;
    }

/* Liste di entità (orchestratori, processi): il nome va a capo fino a due righe invece di
   troncarsi su una, così le righe con lo stesso prefisso si distinguono; oltre, il testo
   intero è nel tooltip (title). Le colonne numeriche e le azioni hanno larghezza fissa.
   Il selettore ricalca quello di Radzen (.rz-grid-table td .rz-cell-data, nowrap) per batterlo. */
.entity-list-grid .rz-grid-table td .rz-cell-data {
    white-space: normal;
}

.entity-list-grid .entity-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.entity-list-grid .entity-cell-muted {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.entity-list-grid .entity-actions {
    display: flex;
    justify-content: flex-end;
}

.custom-preview-badge {
    border-radius: 5px !important;
    text-transform: none !important;
    color: black !important;
    background-color: #E6A560 !important;
}

.rz-material-dark .custom-preview-badge {
    color: white !important;
    background-color: #A66100 !important;
}

.char-left-span {
    position: absolute;
    bottom: -1.5em;
    left: 0;
    font-size: 0.8em;
}

.char-span {
    position: absolute;
    bottom: -1.5em;
    right: 0;
    font-size: 0.8em;
}

.ddUpload {
    width: 100%;
    min-height: 150px;
    left: 0;
    --rz-upload-button-bar-background-color: transparent;
    --rz-upload-button-bar-padding: 0;
}

    .ddUpload .rz-fileupload-buttonbar {
        width: 100%;
    }

    .ddUpload .rz-fileupload-buttonbar .rz-fileupload-choose {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        text-transform: none;
        border: 2px solid #b793ed;
        box-shadow: none !important;
        border-radius: 10px;
    }

        .ddUpload .rz-fileupload-buttonbar .rz-fileupload-choose:hover {
            border: 2px dashed #b793ed !important;
        }

    .ddUpload .rz-fileupload-buttonbar .rz-fileupload-choose,
    .ddUpload .rz-fileupload-buttonbar .rz-fileupload-upload,
    .ddUpload .rz-fileupload-buttonbar .rz-fileupload-cancel,
    .ddUpload .rz-fileupload-files .rz-fileupload-file {
        height: 150px;
        border-radius: 10px;
        background-color: #f1ebfa !important;
    }

    /* Dark mode: the light lavender above stayed white on the uploaded-file rows
       inside dialogs. Cover both dark scopes — .rz-material-dark (main layout) and
       .dialog-dark (the class dialogs apply themselves, since dialog content escapes
       the .rz-material-dark scope) — and use the theme input background so the rows
       match the other inputs in dark. */
    .rz-material-dark .ddUpload .rz-fileupload-files .rz-fileupload-file,
    .dialog-dark .ddUpload .rz-fileupload-files .rz-fileupload-file {
        background-color: var(--rz-input-background-color, #2b2b33) !important;
    }

        .ddUpload .rz-fileupload-buttonbar .rz-fileupload-choose input[type=file] {
            width: 100%;
        }


        /* Image div */
        .ddUpload .rz-fileupload-row > div:nth-child(1) {
            width: 50px;
        }

    /* Filename div */
    .ddUpload .rz-fileupload-row > div:nth-child(2) {
        width: 250px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.separator {
    width: 90%;
    margin: 1rem;
    align-self: center;
    border: 1px solid lightgray;
}

/* Radzen elements */
.rz-layout {
    background-color: #F4F6FA !important;
}

.rz-layout .rz-header {
    background-color: var(--rz-white);
    box-shadow: none;
}

.rz-dialog-confirm {
    border-radius: 10px !important;
}

.rz-dialog-confirm-buttons .rz-button {
    box-shadow: inset 0 0 0 var(--rz-border-width);
    text-transform: none;
    border-radius: 10px;
}

    .confirm-delete-dialog .rz-dialog-confirm-buttons .rz-button.rz-danger,
    .confirm-delete-dialog .rz-dialog-confirm-buttons .rz-button:first-child:not(.rz-base) {
        background-color: #ef4444 !important;
    }

.rz-material-dark .more-vert i {
    color: white !important;
}

.rz-fileupload-choose {
    text-transform: none !important;
}

.rz-fileupload-buttonbar {
    width: fit-content;
}

.element-caption {
    color: #4B5057;
}

.rz-material-dark .element-caption {
    color: #CECECE;
}

.rz-splitbutton button {
    text-transform: none;
}

.rz-badge {
    text-transform: none !important;
}

.rz-tabview-panel {
    padding: 0;
}

.rz-tabview-title {
    text-transform: none;
    font-size: 1rem;
}

.rz-menu {
    padding: 0.5rem !important;
    border-radius: 15px !important;
}

.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover {
    background-color: #D4DFFF40 !important;
}

.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:active {
    background-color: #BACBFF !important;
}

.rz-button-text {
    text-transform: none;
}

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(8px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(8px) rotate(-360deg);
    }
}

.recognition-overlay {
    position: absolute;
    top: 30%; /* Center vertically */
    left: 30%; /* Center horizontally */
    width: 20px;
    height: 20px;
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    border-radius: 50%;
    z-index: 1;
    pointer-events: none; /* Ensure it doesn't block button clicks */
    /*transform-origin: -10px center;*/ /* Set the orbit radius */
    animation: orbit 2s linear infinite; /* Apply the orbit animation */
}

/* Responsiveness */
@media (min-width: 1920px) {
    .w-xl-32rem {
        width: 32rem;
    }
}

/* Upload Button Styles */
.primary-button-upload {
    display: inline-block;
}

.primary-button-upload .rz-fileupload-buttonbar {
    background: none !important;
    padding: 0 !important;
    padding-bottom: 0.5rem !important;
    border: none !important;
}

    .primary-button-upload .rz-fileupload-choose {
        background-color: var(--rz-primary-lighter) !important;
        color: var(--rz-on-primary-lighter) !important;
        border: 1px solid #CCCCCC !important;
        border-radius: 8px !important;
        padding: 10px 20px !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        text-transform: none !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

.primary-button-upload .rz-fileupload-choose:hover {
    border: 2px dashed #CCCCCC !important;
}

.primary-button-upload .rz-fileupload-choose:active {
    background-color: #E0E0E0 !important;
}

/* Global text field styles.
   Background/border are driven by theme variables (redefined on :root in dark mode)
   rather than a hardcoded light color, so inputs stay theme-correct even when Radzen
   renders them OUTSIDE the .rz-material-dark scope — e.g. inside dialogs, whose host
   (<RadzenComponents/>) is a sibling of <RadzenLayout> and so escapes that scope. A
   .rz-material-dark-scoped override never reaches that content; a :root variable does. */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-numeric input,
.rz-numeric,
input.rz-textbox,
textarea.rz-textarea,
.rz-multiselect {
    background-color: var(--rz-input-background-color, #f9fafb) !important;
    border: 1px solid var(--rz-base-300, #e5e7eb) !important;
    border-radius: 15px;
}

/* …but inside a RadzenFormField the border belongs to the FIELD, not to the control.
   Radzen already strips it from the inner control (.rz-form-field-content > * { border: none });
   the !important above was putting it back, so two nearly-coincident frames were painted
   with DIFFERENT radii — 15px the control, 4px (--rz-input-border-radius) the field — and
   they diverge exactly at the corners. That is the doubled stroke on Name/Description in the
   App Builder "New project" dialog.
   The radius and the idle border colour move onto the field, so these inputs stay identical
   to every other input in the webapp; hover/focus keep the theme's own emphasis, since the
   theme applies them with equal specificity from a stylesheet loaded after this one. */
.rz-form-field-content .rz-textbox,
.rz-form-field-content .rz-textarea,
.rz-form-field-content .rz-dropdown,
.rz-form-field-content .rz-numeric,
.rz-form-field-content .rz-numeric input,
.rz-form-field-content .rz-multiselect {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0;
}

.rz-form-field .rz-form-field-content {
    border: 1px solid var(--rz-base-300, #e5e7eb);
    border-radius: 15px;
}

/* Dropdown popup panel: Radzen appends it to <body> (Radzen.Blazor.js
   document.body.appendChild(popup)), so it escapes the .rz-material-dark
   ancestor scope and a .rz-material-dark-scoped override never reaches it.
   Drive its background from the theme variable — which the dark theme
   redefines on :root, so it follows light/dark even from the body. */
.rz-dropdown-panel {
    background-color: var(--rz-input-background-color, #f9fafb) !important;
    border: 1px solid var(--rz-border-color, #e5e7eb) !important;
    border-radius: 15px;
}

/* Header delete button — gray icon, red fill + bg on hover */
.header-delete-btn .rz-button-box .rzi {
    color: #6A7282 !important;
}

.header-delete-btn:hover {
    background-color: #F2E4E4 !important;
}

.header-delete-btn:hover .rz-button-box .rzi {
    color: #d65555 !important;
}