html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-image: url('../images/LogoHorizontal.svg');
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 44px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Campo in attesa di approvazione ERP (ValidationFieldLock attivo) */
.field-pending-approval,
.field-pending-approval .form-control,
.field-pending-approval .dxbl-text-edit {
    background-color: var(--highlight-validation-color, #FFFFE0) !important;
}

/* ========================================================================
   DetailView: foreground nero forzato su campi con background di highlight
   Problema: in dark mode il testo bianco del tema diventa illeggibile
   sugli sfondi chiari applicati dai controller di highlight
   (DirtyFieldHighlightController, FieldValidationLockController,
   ErpChangedFieldsHighlightController).

   Causa radice: i componenti DevExpress Blazor (DxTextBox, DxComboBox, ecc.)
   usano variabili CSS interne (--dxbl-text-edit-color, --dxbl-input-color)
   per il colore del testo degli input. Il tema dark imposta queste variabili
   a bianco. format.FontColor = Color.Black (impostato dai controller Module)
   genera un inline style color:rgb(0,0,0) sul container, ma gli input
   interni leggono il colore dalla variabile CSS, ignorando l'ereditarieta.

   Soluzione a 3 livelli:
   1) Override variabili CSS DevExpress sui container con background inline
      -> gli input interni ereditano la variabile sovrascritta = nero
   2) Override diretto color + -webkit-text-fill-color con !important
      -> fallback per componenti che non usano variabili CSS
   3) Selettori multipli: [style*="background-color"] e [style*="background:"]
      -> copre sia la forma estesa che la shorthand background

   Nota: XAF Blazor puo applicare BackColor come "background-color: ..."
   oppure come "background: ..." (shorthand). Entrambe le varianti sono
   coperte dai selettori. Il selettore .dxbl-fl-ctrl limita lo scope
   ai soli form layout control delle DetailView.

   La classe .vp-highlight-bg e aggiunta dal companion controller Blazor
   (DetailViewHighlightCssBlazorController) come meccanismo aggiuntivo.
   ======================================================================== */

/* Livello 1: Override variabili CSS DevExpress su container con background */
.dxbl-fl-ctrl[style*="background-color"],
.dxbl-fl-ctrl[style*="background:"],
.dxbl-fl-ctrl [style*="background-color"],
.dxbl-fl-ctrl [style*="background:"],
.vp-highlight-bg,
.field-pending-approval,
.field-erp-changed {
    --dxbl-text-edit-color: #000000;
    --dxbl-text-edit-focus-color: #000000;
    --dxbl-input-color: #000000;
    --dxbl-checkbox-label-color: #000000;
}

/* Livello 2: Override diretto color su tutti gli elementi interni */
.vp-highlight-bg,
.vp-highlight-bg *,
.field-pending-approval input,
.field-pending-approval textarea,
.field-pending-approval .dxbl-text-edit-input,
.field-pending-approval .dxbl-text,
.field-pending-approval select,
.field-erp-changed input,
.field-erp-changed textarea,
.field-erp-changed .dxbl-text-edit-input,
.field-erp-changed .dxbl-text,
.field-erp-changed select,
.dxbl-fl-ctrl[style*="background-color"] input,
.dxbl-fl-ctrl[style*="background-color"] textarea,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-input,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-text,
.dxbl-fl-ctrl[style*="background-color"] select,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled *,
.dxbl-fl-ctrl[style*="background:"] input,
.dxbl-fl-ctrl[style*="background:"] textarea,
.dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-input,
.dxbl-fl-ctrl[style*="background:"] .dxbl-text,
.dxbl-fl-ctrl[style*="background:"] select,
.dxbl-fl-ctrl[style*="background:"] .dxbl-disabled,
.dxbl-fl-ctrl[style*="background:"] .dxbl-disabled *,
.dxbl-fl-ctrl [style*="background-color"] input,
.dxbl-fl-ctrl [style*="background-color"] textarea,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-input,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-text,
.dxbl-fl-ctrl [style*="background-color"] select,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled *,
.dxbl-fl-ctrl [style*="background:"] input,
.dxbl-fl-ctrl [style*="background:"] textarea,
.dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-input,
.dxbl-fl-ctrl [style*="background:"] .dxbl-text,
.dxbl-fl-ctrl [style*="background:"] select,
.dxbl-fl-ctrl [style*="background:"] .dxbl-disabled,
.dxbl-fl-ctrl [style*="background:"] .dxbl-disabled * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Livello 2b: Stato :focus — i componenti DevExpress possono applicare
   regole di colore specifiche per lo stato focused che sovrascrivono
   le regole precedenti. Copriamo esplicitamente gli input in focus. */
.dxbl-fl-ctrl[style*="background-color"] input:focus,
.dxbl-fl-ctrl[style*="background:"] input:focus,
.dxbl-fl-ctrl [style*="background-color"] input:focus,
.dxbl-fl-ctrl [style*="background:"] input:focus,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-input:focus,
.dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-input:focus,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-input:focus,
.dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-input:focus,
.vp-highlight-bg input:focus,
.vp-highlight-bg .dxbl-text-edit-input:focus {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000;
}

/* User Fields: forza la colonna etichette (caption) dei campi UF
   alla stessa larghezza dei property editor standard XAF.
   --uf-caption-width (default 200px) e regolabile per singola vista
   con un selettore padre. Esempio:
     .my-detail-view { --uf-caption-width: 250px; }
   !important garantisce priorita sulle regole del tema DevExpress.
   flex-shrink: 0 impedisce il restringimento in contesti flexbox. */
.uf-fields-layout .dxbl-fl-cpt {
    min-width: var(--uf-caption-width, 235px) !important;
    flex-shrink: 0;
}

/* ========================================================================
   ListView: semantica colori stato record — palette unificata
   Controller: RecordStateHighlightBlazorController (Blazor.Server)
   Dati: DirtyRecordHighlightController + ErpNewChangesHighlightController (Module)
   Logica: RecordVisualStateResolver (Module/Helpers)

   Ogni riga ha un solo colore di sfondo dominante, determinato dalla
   matrice di precedenza (dal piu critico al meno critico):
   1. record-state-mixed           — 2+ stati attivi (arancione tenue)
   2. record-state-dirty           — modifiche locali non convalidate (rosso tenue)
   3. record-state-validation      — convalida ERP in corso (giallo tenue)
   4. record-state-erp-new-changes — nuove modifiche ERP ricevute (verde tenue)

   Palette: Material Design 50-weight per massimo contrasto testo e
   accessibilita. Nessun bordo riga come segnale principale.
   Gli stati secondari sono visibili tramite badge nella colonna "Stato"
   con dot colorati + label testuale.

   Le variabili CSS custom (--record-state-*-bg) consentono override
   da appsettings.json o da selettore padre senza modificare questo file.
   ======================================================================== */

/* Modifiche locali non convalidate: rosso tenue */
.record-state-dirty > td {
    background-color: var(--record-state-dirty-bg, #FFEBEE) !important;
}

/* Convalida ERP in corso: giallo tenue */
.record-state-validation > td {
    background-color: var(--record-state-validation-bg, #FFF8E1) !important;
}

/* Stato misto (2+ stati attivi contemporaneamente): arancione tenue */
.record-state-mixed > td {
    background-color: var(--record-state-mixed-bg, #FFF3E0) !important;
}

/* Nuove modifiche ERP ricevute: verde tenue */
.record-state-erp-new-changes > td {
    background-color: var(--record-state-erp-new-changes-bg, #E8F5E9) !important;
}

/* Cancellazione in attesa di approvazione ERP: rosso piu marcato */
.record-state-pending-delete > td {
    background-color: var(--record-state-pending-delete-bg, #FFCDD2) !important;
}

/* Inserimento in attesa di approvazione ERP: viola tenue */
.record-state-pending-insert > td {
    background-color: var(--record-state-pending-insert-bg, #E1BEE7) !important;
}

/* Inserito su portale, convalida non ancora avviata: teal tenue */
.record-state-insert-draft > td {
    background-color: var(--record-state-insert-draft-bg, #E0F7FA) !important;
}

/* ========================================================================
   ListView: foreground nero forzato su righe evidenziate (record-state-*)

   Problema: con tema DevExpress Fluent Dark, il testo delle celle eredita
   il colore bianco del tema. Le righe evidenziate usano background chiari
   (Material Design 50-weight), quindi il testo bianco risulta illeggibile.

   Soluzione: forzare color #000000 su td e su tutti gli elementi figli
   delle sole righe con classe record-state-*. L'override e limitato
   esclusivamente a queste righe; le righe non evidenziate continuano
   ad usare il colore testo del tema corrente (Light o Dark).

   !important e necessario per vincere la specificita delle regole
   del tema DevExpress Fluent che applicano color via selettori interni
   del componente DxGrid (.dxbl-grid td, .dxbl-grid a, ecc.).

   I badge della colonna Stato (status-badge-icon img SVG) non sono
   impattati: le icone sono immagini inline base64 senza proprieta color.
   Il separatore badge (.status-badge-separator) e nascosto (display: none)
   in quanto il layout verticale rende ridondante il dot separatore.
   ======================================================================== */

.record-state-dirty > td,
.record-state-dirty > td *,
.record-state-validation > td,
.record-state-validation > td *,
.record-state-mixed > td,
.record-state-mixed > td *,
.record-state-erp-new-changes > td,
.record-state-erp-new-changes > td *,
.record-state-pending-delete > td,
.record-state-pending-delete > td *,
.record-state-pending-insert > td,
.record-state-pending-insert > td *,
.record-state-insert-draft > td,
.record-state-insert-draft > td * {
    color: #000000 !important;
}

/* ========================================================================
   Colonna Stato: badge tipizzati con icona XAF SVG + label
   Renderizzati da RecordStateHighlightBlazorController.RenderTypedBadges
   tramite DataColumnCellDisplayTemplate.
   La scelta di quale badge mostrare e determinata dall'enum
   RecordVisualBadgeKind (tipizzato), non da parsing di stringhe.
   Le icone sono risolte a runtime via ImageLoader.Instance
   (pattern demo CS/MainDemo: enum con [ImageName] + ImageLoader).

   Struttura HTML generata:
    <span class="status-badges-container">
      <span class="status-badge">
        <img src="data:image/svg+xml;base64,..." class="status-badge-icon" /> Pending
      </span>
      <span class="status-badge-separator"> . </span>
      <span class="status-badge">
        <img src="data:image/svg+xml;base64,..." class="status-badge-icon" /> Waiting ERP
      </span>
    </span>

    Layout verticale: i badge sono impilati uno sotto l'altro per evitare
    che la colonna Stato tronchi il contenuto quando sono presenti piu stati.
    Il separatore " . " viene nascosto perche ridondante in layout verticale.
    ======================================================================== */

.status-badges-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.status-badge-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 2px;
}

/* Separatore nascosto: in layout verticale i badge sono gia separati
   visivamente dalla disposizione a colonna, il dot non serve. */
.status-badge-separator {
    display: none;
}

/* ========================================================================
   Dynamic Lookup: stile per editor runtime ComboBox
   Applicato dal DynamicLookupPropertyEditor per le proprieta configurate
   come lookup dinamici in LookupDefinition.
   Solo presentazionale: nessun impatto funzionale.
   ======================================================================== */

/* ========================================================================
   DetailView: evidenziazione editor campi modificati dall'ERP (NewChanges)
   Bordo verde sugli editor delle property presenti nei dettagli ack aperto.
   Gestito da ErpChangedFieldsHighlightController (Module)
   ======================================================================== */

.field-erp-changed,
.field-erp-changed .form-control,
.field-erp-changed .dxbl-text-edit {
    border-color: var(--highlight-erp-new-changes-color, #4CAF50) !important;
    border-width: 2px !important;
    border-style: solid !important;
}

.vp-runtime-lookup {
    border-color: var(--vp-lookup-border-color, #B0C4DE) !important;
}

/* ========================================================================
   Campi non editabili (read-only / disabled): aspetto uniforme
   Tutti i campi in sola lettura devono avere lo stesso aspetto dei
   campi editabili. L'unica differenza: il contenuto non puo essere
   modificato. Nessun colore grigio, nessuna opacita ridotta,
   nessuno sfondo diverso.

   Origine read-only:
   - ImportFieldRule.IsEditable = false (ImportFieldEditableController)
   - XAF AllowEdit = false su PropertyEditor
   - Appearance rules con Enabled = false
   - IdoLookupDisplayPropertyEditor (read-only by design)

   I selettori coprono TUTTI i componenti DevExpress Blazor:
   DxTextBox, DxComboBox, DxSpinEdit, DxDateEdit, DxMemo, DxCheckBox.
   ======================================================================== */

/* --- Componenti DevExpress Blazor in stato disabled --- */
.dxbl-disabled,
.dxbl-disabled *,
.dxbl-text-edit.dxbl-disabled,
.dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input-area,
.dxbl-combobox.dxbl-disabled,
.dxbl-combobox.dxbl-disabled .dxbl-text-edit-input,
.dxbl-spin-edit.dxbl-disabled,
.dxbl-spin-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-date-edit.dxbl-disabled,
.dxbl-date-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-memo.dxbl-disabled,
.dxbl-memo.dxbl-disabled textarea,
.dxbl-checkbox.dxbl-disabled,
.dxbl-checkbox.dxbl-disabled .dxbl-checkbox-label,
.dxbl-checkbox.dxbl-disabled .dxbl-checkbox-check-element {
    opacity: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* --- Componenti DevExpress Blazor in stato readonly --- */
.dxbl-text-edit-readonly,
.dxbl-text-edit-readonly .dxbl-text-edit-input,
.dxbl-text-edit-readonly .dxbl-text-edit-input-area {
    opacity: 1 !important;
    color: inherit !important;
    background-color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ========================================================================
   Override foreground nero per campi disabled/readonly con highlight attivo.
   Le regole disabled/readonly sopra usano "color: inherit !important"
   che in dark mode eredita il bianco del tema. Questo blocco viene DOPO
   e forza esplicitamente #000000 solo per i campi con highlight.
   Copertura: CSS variable override + direct color override su tutti i
   possibili container con background inline (background-color e background).
   ======================================================================== */

/* Override variabili CSS anche su elementi disabled/readonly dentro highlight */
.dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled,
.dxbl-fl-ctrl[style*="background:"] .dxbl-disabled,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled,
.dxbl-fl-ctrl [style*="background:"] .dxbl-disabled,
.vp-highlight-bg .dxbl-disabled,
.vp-highlight-bg.dxbl-disabled {
    --dxbl-text-edit-color: #000000;
    --dxbl-input-color: #000000;
}

.vp-highlight-bg.dxbl-disabled,
.vp-highlight-bg.dxbl-disabled *,
.vp-highlight-bg .dxbl-disabled,
.vp-highlight-bg .dxbl-disabled *,
.vp-highlight-bg.dxbl-text-edit-readonly,
.vp-highlight-bg.dxbl-text-edit-readonly .dxbl-text-edit-input,
.vp-highlight-bg.dxbl-text-edit-readonly .dxbl-text-edit-input-area,
.vp-highlight-bg input[readonly],
.vp-highlight-bg input:disabled,
.vp-highlight-bg textarea[readonly],
.vp-highlight-bg textarea:disabled,
.vp-highlight-bg select:disabled,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled *,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-readonly,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input,
.dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area,
.dxbl-fl-ctrl[style*="background-color"] input[readonly],
.dxbl-fl-ctrl[style*="background-color"] input:disabled,
.dxbl-fl-ctrl[style*="background-color"] textarea[readonly],
.dxbl-fl-ctrl[style*="background-color"] textarea:disabled,
.dxbl-fl-ctrl[style*="background-color"] select:disabled,
.dxbl-fl-ctrl[style*="background:"] .dxbl-disabled,
.dxbl-fl-ctrl[style*="background:"] .dxbl-disabled *,
.dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-readonly,
.dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input,
.dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area,
.dxbl-fl-ctrl[style*="background:"] input[readonly],
.dxbl-fl-ctrl[style*="background:"] input:disabled,
.dxbl-fl-ctrl[style*="background:"] textarea[readonly],
.dxbl-fl-ctrl[style*="background:"] textarea:disabled,
.dxbl-fl-ctrl[style*="background:"] select:disabled,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled *,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-readonly,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input,
.dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area,
.dxbl-fl-ctrl [style*="background-color"] input[readonly],
.dxbl-fl-ctrl [style*="background-color"] input:disabled,
.dxbl-fl-ctrl [style*="background-color"] textarea[readonly],
.dxbl-fl-ctrl [style*="background-color"] textarea:disabled,
.dxbl-fl-ctrl [style*="background-color"] select:disabled,
.dxbl-fl-ctrl [style*="background:"] .dxbl-disabled,
.dxbl-fl-ctrl [style*="background:"] .dxbl-disabled *,
.dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-readonly,
.dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input,
.dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area,
.dxbl-fl-ctrl [style*="background:"] input[readonly],
.dxbl-fl-ctrl [style*="background:"] input:disabled,
.dxbl-fl-ctrl [style*="background:"] textarea[readonly],
.dxbl-fl-ctrl [style*="background:"] textarea:disabled,
.dxbl-fl-ctrl [style*="background:"] select:disabled {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* --- Input HTML nativi: readonly e disabled --- */
input[readonly],
input:disabled,
textarea[readonly],
textarea:disabled,
select:disabled {
    opacity: 1 !important;
    color: inherit !important;
    background-color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* --- Editor IDO lookup display --- */
.vp-ido-display,
.vp-ido-display.dxbl-text-edit,
.vp-ido-display .dxbl-text-edit-input {
    opacity: 1 !important;
    color: inherit !important;
    background-color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ========================================================================
   Notification Sidebar
   Pannello laterale destro per la lista notifiche.
   Componente: NotificationSidebar.razor
   Controller: NotificationSidebarBlazorController

   Struttura:
   - Overlay semi-trasparente (click-outside chiude)
   - Pannello fixed destro con slide-in da destra
   - Header con titolo e pulsante chiudi
   - Body scrollabile con lista notifiche
   ======================================================================== */

/* Overlay backdrop */
.notification-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

/* Pannello sidebar */
.notification-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background-color: var(--notification-sidebar-bg, #ffffff);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: notification-sidebar-slide-in 0.25s ease-out;
}

@keyframes notification-sidebar-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Header */
.notification-sidebar-header {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border-bottom: 1px solid var(--notification-sidebar-border, #EDEBE9);
    flex-shrink: 0;
    gap: 10px;
}

/* Riga superiore: titolo + pulsante chiudi */
.notification-sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-sidebar-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--notification-sidebar-title-color, #323130);
}

/* Riga inferiore: azioni di selezione */
.notification-sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-sidebar-select-all,
.notification-sidebar-mark-selected-read {
    background: none;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.notification-sidebar-select-all {
    color: var(--notification-sidebar-select-all-color, #323130);
    border-color: var(--notification-sidebar-select-all-border, #8A8886);
}

.notification-sidebar-select-all:hover {
    background-color: var(--notification-sidebar-select-all-hover-bg, #FAF9F8);
    color: var(--notification-sidebar-select-all-hover-color, #323130);
    border-color: var(--notification-sidebar-select-all-hover-border, #323130);
}

.notification-sidebar-mark-selected-read {
    background-color: var(--notification-sidebar-mark-selected-bg, #0078D4);
    color: var(--notification-sidebar-mark-selected-color, #FFFFFF);
    border-color: var(--notification-sidebar-mark-selected-border, #0078D4);
}

.notification-sidebar-mark-selected-read:hover {
    background-color: var(--notification-sidebar-mark-selected-hover-bg, #106EBE);
    color: var(--notification-sidebar-mark-selected-hover-color, #FFFFFF);
    border-color: var(--notification-sidebar-mark-selected-hover-border, #106EBE);
}

.notification-sidebar-close {
    background: none;
    border: 1px solid transparent;
    font-size: 20px;
    cursor: pointer;
    color: var(--notification-sidebar-close-color, #605E5C);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notification-sidebar-close:hover {
    background-color: var(--notification-sidebar-close-hover-bg, #FAF9F8);
    color: var(--notification-sidebar-close-hover, #323130);
}

/* Body scrollabile */
.notification-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Stato vuoto */
.notification-sidebar-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--notification-sidebar-empty-color, #A19F9D);
    font-size: 14px;
}

/* Singolo item notifica */
.notification-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--notification-sidebar-border, #EDEBE9);
    transition: background-color 0.15s ease;
}

.notification-sidebar-item:hover {
    background-color: var(--notification-sidebar-item-hover, #FAF9F8);
}

/* Area checkbox (sinistra, non propagante il click) */
.notification-sidebar-item-checkbox-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 4px 14px 12px;
    flex-shrink: 0;
    cursor: default;
}

.notification-sidebar-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--notification-sidebar-checkbox-accent, #0078D4);
    flex-shrink: 0;
}

/* Area contenuto (destra, clickabile) */
.notification-sidebar-item-content {
    flex: 1;
    padding: 12px 20px 12px 8px;
    cursor: pointer;
    min-width: 0;
}

/* Item non letto: indicatore visivo */
.notification-sidebar-item-unread {
    background-color: var(--notification-sidebar-item-unread-bg, #DEECF9);
    border-left: 3px solid var(--notification-sidebar-item-unread-border, #0078D4);
}

.notification-sidebar-item-unread:hover {
    background-color: var(--notification-sidebar-item-unread-hover, #C7E0F4);
}

/* Item selezionato */
.notification-sidebar-item-selected {
    background-color: var(--notification-sidebar-item-selected-bg, #DEECF9);
}

.notification-sidebar-item-selected:hover {
    background-color: var(--notification-sidebar-item-selected-hover, #C7E0F4);
}

.notification-sidebar-item-selected.notification-sidebar-item-unread {
    background-color: var(--notification-sidebar-item-selected-unread-bg, #B3D7F2);
}

/* Header item: tipo + data */
.notification-sidebar-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.notification-sidebar-item-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 4px;
}

.notification-sidebar-item-date {
    font-size: 11px;
    color: var(--notification-sidebar-date-color, #A19F9D);
    flex-shrink: 0;
}

/* Colori per tipo notifica */
.notification-type-ok {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.notification-type-ko {
    background-color: #FFEBEE;
    color: #C62828;
}

.notification-type-erp-change {
    background-color: #FFF3E0;
    color: #E65100;
}

.notification-type-idm {
    background-color: #E3F2FD;
    color: #1565C0;
}

.notification-type-email {
    background-color: #F3E5F5;
    color: #6A1B9A;
}

.notification-type-validation {
    background-color: #ECEFF1;
    color: #455A64;
}

/* Subject */
.notification-sidebar-item-subject {
    font-size: 13px;
    font-weight: 500;
    color: var(--notification-sidebar-subject-color, #323130);
    margin-bottom: 2px;
    line-height: 1.3;
}

/* Body preview */
.notification-sidebar-item-body {
    font-size: 12px;
    color: var(--notification-sidebar-body-color, #605E5C);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Indicatore caricamento */
.notification-sidebar-loading {
    padding: 16px 20px;
    text-align: center;
    color: var(--notification-sidebar-empty-color, #A19F9D);
    font-size: 13px;
}

/* ========================================================================
   Notification Toast
   Notifiche toast in stile Windows che compaiono in basso a destra
   quando arriva una nuova notifica. Auto-dismiss dopo N secondi.
   Componente: NotificationToast.razor
   ======================================================================== */

/* Container fisso in basso a destra */
.notification-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10002;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 380px;
    pointer-events: none;
}

/* Singolo toast */
.notification-toast {
    background-color: var(--notification-toast-bg, #ffffff);
    border: 1px solid var(--notification-toast-border, #e0e0e0);
    border-left: 4px solid var(--notification-toast-accent, #0078D4);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    padding: 12px 16px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification-toast:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);
}

/* Animazione entrata: slide-in da destra */
.notification-toast-enter {
    animation: toast-slide-in 0.35s ease-out;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animazione uscita: fade-out verso destra */
.notification-toast-exit {
    animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Header toast: tipo + dismiss */
.notification-toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.notification-toast-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 4px;
}

.notification-toast-dismiss {
    background: none;
    border: 1px solid transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--notification-toast-dismiss-color, #605E5C);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notification-toast-dismiss:hover {
    background-color: var(--notification-toast-dismiss-hover-bg, #FAF9F8);
    color: var(--notification-toast-dismiss-hover, #323130);
}

/* Subject */
.notification-toast-subject {
    font-size: 13px;
    font-weight: 600;
    color: var(--notification-toast-subject-color, #323130);
    margin-bottom: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body preview */
.notification-toast-body {
    font-size: 12px;
    color: var(--notification-toast-body-color, #605E5C);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ========================================================================
   Drillback Link
   Link inline nelle notifiche che navigano al DetailView di un BO.
   Componente: DrillbackText.razor
   Parser: DrillbackParser.cs
   ======================================================================== */

.drillback-link {
    color: var(--drillback-link-color, #0078D4);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.drillback-link:hover {
    color: var(--drillback-link-hover, #005A9E);
    text-decoration: underline;
}

/* ========================================================================
   Action Badge: contatore numerico sopra le icone delle azioni toolbar.
   Gestito da action-badges.js tramite MutationObserver.
   Si attiva su qualunque SimpleAction la cui caption contenga "(N)".
   Target principali: ShowSpecificNotes, LoadIdmDocuments.
   ======================================================================== */

/* Portal container: non interagisce con il mouse.
   Parte nascosto (opacity 0) per evitare flash durante il caricamento.
   La classe "ready" viene aggiunta dal JS quando la view e completamente caricata. */
#action-badges-portal {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#action-badges-portal.action-badges-ready {
    opacity: 1;
}

/* Stato dimmed: quando un popup/modal e aperto, i badge si nascondono
   per non sovrapporsi al contenuto del popup */
#action-badges-portal.action-badges-dimmed {
    opacity: 0;
}

.action-badge-count {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    color: var(--action-badge-color, #605E5C) !important;
    background-color: var(--action-badge-bg, #FAF9F8);
    border: 1px solid var(--action-badge-border, #8A8886);
    border-radius: 8px;
    pointer-events: none;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ========================================================================
   Logon Page: link recupero password e username
   Iniettati da logon-recovery-links.js sotto il pulsante "Log In"
   della pagina di login XAF Blazor.
   Container: .logon-main .card-body (struttura XAF standard)
   ======================================================================== */

.vp-logon-recovery-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    font-size: 13px;
}

.vp-logon-link {
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.vp-logon-link:hover {
    color: #23527c;
    text-decoration: underline;
}

.vp-logon-link-separator {
    color: #999;
    font-size: 12px;
    user-select: none;
}

/* ========================================================================
   Toggle Switch - Modalita accesso nella pagina di logon
   Renderizzato dal componente ToggleSwitchEditor.razor con DxCheckBox Switch.
   La caption XAF "Modalita accesso" viene nascosta dal LogonFormLayoutController;
   il toggle con etichette laterali e testo descrittivo e autosufficiente.
   ======================================================================== */

.vp-toggle-switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 10px 0;
}

.vp-toggle-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vp-toggle-label {
    font-size: 13px;
    color: #999;
    transition: color 0.25s ease, font-weight 0.25s ease;
    user-select: none;
    cursor: default;
}

.vp-toggle-label--active {
    font-weight: 600;
    color: #333;
}

.vp-toggle-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: #888;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

/* ========================================================================
   ListView: nasconde i pulsanti spin (frecce su/giu) sui campi numerici
   nelle griglie DevExpress Blazor (DxSpinEdit inline editing).
   ======================================================================== */
.dxbl-grid .dxbl-spin-edit .dxbl-btn-group {
    display: none !important;
}

/* ========================================================================
   DetailView: highlight whole-record per stati Pending Delete/Insert
   tramite classe CSS sul <body> gestita via JS interop.

   Problema originale: AppearanceController.Refresh() non genera
   CustomApplyAppearance per i campi con AllowEdit=false impostato da
   ImportFieldEditableController. Inoltre, XAF Blazor non renderizza
   IAppearanceFormat.BackColor come inline style per editor disabled.
   Il ComponentModel.CssClass via riflessione non ha effetto perche
   il rendering usa il View Component (read-only), non l'Edit Component.

   Soluzione: classe CSS sul <body> (non gestito da Blazor) che attiva
   regole CSS discendenti su .dxbl-text-edit (editor component), coprendo
   TUTTI i campi inclusi quelli disabled. Le variabili CSS custom consentono
   override. Il selettore :not(.dxbl-fl-ctrl-nc) esclude i wrapper delle
   nested ListView/frame evitando di colorare toolbar e griglie annidate.
   Il child combinator > .dxbl-text-edit applica il background direttamente
   sull'editor DevExpress preservando i bordi arrotondati nativi.

   Controller: DetailViewHighlightCssBlazorController (Blazor.Server)
   JS: pending-state-highlight.js
   ======================================================================== */

/* Cancellazione in attesa: rosso tenue su tutti i campi */
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit {
    background-color: var(--record-state-pending-delete-bg, #FFCDD2) !important;
}

/* Inserimento in attesa: viola tenue su tutti i campi */
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit {
    background-color: var(--record-state-pending-insert-bg, #E1BEE7) !important;
}

/* Insert draft (Inserted): teal tenue su tutti i campi */
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit {
    background-color: var(--record-state-insert-draft-bg, #E0F7FA) !important;
}

/* Override variabili CSS DevExpress per testo nero dentro pending state */
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit {
    --dxbl-text-edit-color: #000000;
    --dxbl-text-edit-focus-color: #000000;
    --dxbl-input-color: #000000;
    --dxbl-checkbox-label-color: #000000;
}

/* Foreground nero forzato su tutti gli elementi interni dei campi pending */
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit,
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit *,
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input,
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit textarea,
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit select,
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit *,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit textarea,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit select,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit *,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit textarea,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit select,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Focus state dentro pending: garantisce testo nero anche in focus */
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input:focus,
body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input:focus,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input:focus,
body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input:focus,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input:focus,
body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input:focus {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000;
}

/* ============================================================ */
/* Global Search Box (topbar)                                    */
/* ============================================================ */

.global-search-box {
    position: fixed;
    top: 8px;
    right: 220px;
    width: 340px;
    /* Sotto lo z-index dei dropdown Bootstrap (.dropdown-menu = 1000):
       garantisce che account-menu, theme-settings, popup modali e ogni
       altro overlay/finestra apribile stia sempre sopra la search box.
       Valore sufficiente a sovrastare il ribbon XAF standard. */
    z-index: 900;
    font-family: inherit;
    /* Posizione definitiva calcolata a runtime da js/global-search.js
       sopra il .dxbl-tabs-container del ribbon. Nascosto finche' il JS
       non allinea il box: evita flash in posizione di fallback. */
    visibility: hidden;
}

.global-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding-right: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.global-search-box-open .global-search-input-wrapper {
    border-color: #0078d4;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

.global-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 8px 0 0;
    font-size: 13px;
    color: #111827;
    min-width: 0;
    height: 100%;
}

.global-search-input-left {
    padding-left: 16px;
}

.global-search-input::placeholder {
    color: #9ca3af;
}

.global-search-clear {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    padding: 0 10px;
    cursor: pointer;
}

.global-search-clear:hover {
    color: #111827;
}

.global-search-submit {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: #0078d4;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.global-search-submit:hover:not(:disabled) {
    background: #106ebe;
}

.global-search-submit:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.global-search-submit img {
    width: 14px;
    height: 14px;
    display: block;
    filter: brightness(0) invert(1);
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 460px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* Coerente con .global-search-box: resta sotto dropdown/popup XAF. */
    z-index: 901;
}

.global-search-loading,
.global-search-empty {
    padding: 14px;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.global-search-group {
    border-bottom: 1px solid #f1f5f9;
}

.global-search-group:last-child {
    border-bottom: none;
}

.global-search-group-title {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f9fafb;
}

.global-search-item {
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}

.global-search-item:hover {
    background: #f3f4f6;
    border-left-color: #0078d4;
}

.global-search-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-item-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .global-search-box {
        width: 260px;
    }
}

@media (max-width: 900px) {
    .global-search-box {
        width: 200px;
    }
}

/* ========================================================================
   Column Chooser: nasconde globalmente il bottone Customize.
   La rimozione per-label degli item di sistema (Id, Row Pointer, Record
   Date, New Changes, Pending Changes, ...) e gestita da
   wwwroot/js/column-chooser-cleanup.js tramite MutationObserver.
   ======================================================================== */
.column-chooser-actions-container {
    display: none !important;
}

/* ========================================================================
   Tenant Provisioning Progress Popup
   Popup modale mostrato dopo "Create Tenant": progress bar a step, log
   live, pulsanti Annulla/Chiudi. Renderizzato dal componente
   TenantProvisioningProgressPopup.razor, ospitato in _Host.cshtml.
   ======================================================================== */
.tenant-provisioning-progress {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: Segoe UI, Tahoma, sans-serif;
    font-size: 13px;
    color: #1f2937;
}

.tpp-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 6px;
    column-gap: 12px;
    padding: 10px 14px;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.tpp-summary-row {
    display: contents;
}

.tpp-summary-label {
    font-weight: 600;
    color: #4b5563;
}

.tpp-summary-value {
    color: #111827;
}

.tpp-current-step {
    color: #6b7280;
    font-style: italic;
}

.tpp-status-running   { color: #0078d4; font-weight: 600; }
.tpp-status-completed { color: #16a34a; font-weight: 600; }
.tpp-status-failed    { color: #dc2626; font-weight: 600; }
.tpp-status-cancelled { color: #b45309; font-weight: 600; }
.tpp-status-idle      { color: #6b7280; }

.tpp-progress-bar {
    position: relative;
    height: 22px;
    background: #e5e7eb;
    border-radius: 11px;
    overflow: hidden;
}

.tpp-progress-fill {
    height: 100%;
    transition: width 250ms ease-out;
}

.tpp-progress-running   { background: linear-gradient(90deg, #0078d4, #50a5e0); }
.tpp-progress-completed { background: #16a34a; }
.tpp-progress-failed    { background: #dc2626; }
.tpp-progress-cancelled { background: #b45309; }
.tpp-progress-idle      { background: #9ca3af; }

.tpp-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.tpp-log {
    height: 260px;
    overflow-y: auto;
    padding: 10px 12px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    font-family: Consolas, Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
}

.tpp-log-entry {
    display: grid;
    grid-template-columns: 64px 84px 1fr;
    column-gap: 10px;
    align-items: baseline;
    padding: 1px 0;
}

.tpp-log-time  { color: #94a3b8; }
.tpp-log-level { font-weight: 600; }
.tpp-log-message {
    white-space: pre-wrap;
    word-break: break-word;
}

.tpp-log-info    .tpp-log-level { color: #93c5fd; }
.tpp-log-success .tpp-log-level { color: #86efac; }
.tpp-log-warning .tpp-log-level { color: #fcd34d; }
.tpp-log-error   .tpp-log-level { color: #fca5a5; }

.tpp-log-success .tpp-log-message { color: #bbf7d0; }
.tpp-log-warning .tpp-log-message { color: #fde68a; }
.tpp-log-error   .tpp-log-message { color: #fecaca; }

.tpp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
   Pannello guida post-creazione tenant
   Visibile dopo click su "Avanti" al termine del provisioning.
   Contiene istruzioni per l'export del file ION API Suite XML e
   la successiva importazione in Infor ION API Gateway.
   ============================================================ */
.tpp-post-guide .tpp-guide-intro {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 14px;
}

.tpp-post-guide .tpp-guide-section {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background-color: #fafafa;
}

.tpp-post-guide .tpp-guide-section-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #111827;
}

.tpp-post-guide .tpp-guide-section-body {
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 10px;
}

.tpp-post-guide .tpp-guide-steps {
    margin: 6px 0 0 18px;
    padding: 0;
}

.tpp-post-guide .tpp-guide-steps li {
    margin-bottom: 4px;
}

.tpp-post-guide .tpp-guide-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpp-post-guide .tpp-guide-inline-status {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

.tpp-post-guide .tpp-guide-message {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.tpp-post-guide .tpp-guide-message-success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.tpp-post-guide .tpp-guide-message-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ============================================================
   Wizard a step nella guida post-creazione tenant
   Indicatore "Step X di N" con pallini numerati e connettori,
   contenitore step con altezza minima e barra azioni allineata
   per i bottoni Indietro/Avanti/Chiudi.
   ============================================================ */
.tpp-wizard .tpp-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px 0;
    padding: 8px 4px;
    gap: 4px;
}

.tpp-wizard .tpp-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 110px;
}

.tpp-wizard .tpp-wizard-step-bullet {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    border: 2px solid #d1d5db;
    background-color: #ffffff;
    color: #6b7280;
}

.tpp-wizard .tpp-wizard-step-label {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.tpp-wizard .tpp-wizard-step-current .tpp-wizard-step-bullet {
    border-color: #0078d4;
    background-color: #0078d4;
    color: #ffffff;
}

.tpp-wizard .tpp-wizard-step-current .tpp-wizard-step-label {
    color: #0078d4;
    font-weight: 600;
}

.tpp-wizard .tpp-wizard-step-done .tpp-wizard-step-bullet {
    border-color: #16a34a;
    background-color: #16a34a;
    color: #ffffff;
}

.tpp-wizard .tpp-wizard-step-done .tpp-wizard-step-label {
    color: #16a34a;
}

.tpp-wizard .tpp-wizard-step-connector {
    flex: 1 1 auto;
    height: 2px;
    background-color: #d1d5db;
    margin: 0 4px;
    align-self: flex-start;
    margin-top: 13px;
}

.tpp-wizard .tpp-wizard-step-connector-done {
    background-color: #16a34a;
}

.tpp-wizard .tpp-wizard-body {
    min-height: 260px;
    margin-bottom: 12px;
}

.tpp-wizard .tpp-wizard-actions {
    justify-content: space-between;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

/* ========================================================================
   Busy Overlay Popup
   Popup modale globale (BusyOverlayPopup.razor, ospitato in _Host.cshtml)
   mostrato durante azioni admin bloccanti (delete tenant, export file,
   test connessioni). Impedisce navigazione finche' l'operazione non e'
   completata.
   ======================================================================== */
.busy-overlay-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 8px;
    font-family: Segoe UI, Tahoma, sans-serif;
    color: #1f2937;
    text-align: center;
}

.busy-overlay-caption {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.busy-overlay-description {
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
    max-width: 380px;
}

.busy-overlay-hint {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* ============================================================
   Link "Manuale utente" nell'header XAF
   Iniettato via manual-header-link.js fra .account-container
   (icona utente) e .theme-settings (icona settings). Eredita
   dimensioni/spaziature/hover dai bottoni XAF dell'header grazie
   alle classi dxbl-btn dxbl-btn-standalone btn-secondary btn-header
   applicate al tag <a>. L'icona interna e' un <div class="xaf-image">
   stilato con mask-image + currentColor, come gli altri bottoni header.
   La protezione del manuale tecnico avviene server-side in
   ManualAccessGuardMiddleware.
   ============================================================ */
.manual-header-link,
.manual-header-link:hover,
.manual-header-link:focus,
.manual-header-link:visited {
    text-decoration: none;
}