@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ============================================================
   VARIABILI FALLBACK :root
   Sostituite a runtime da AppConfigService.GetThemeCssVariables()
   iniettato inline in App.razor. Modificare app-config.json,
   non questi valori.
   ============================================================ */
:root {
    --dn-primary:         #2D6A4F;
    --dn-secondary:       #B7C9A8;
    --dn-accent:          #F0F7EE;
    --dn-primary-hover:   #245a41;
    --dn-primary-text:    #ffffff;
    --dn-sidebar-bg:      #1e4d38;
    --dn-sidebar-text:    #d4e8d1;
    --dn-sidebar-active:  #2D6A4F;

    --dn-surface:         #ffffff;
    --dn-bg:              #f8f9fa;
    --dn-border:          #e5e7eb;
    --dn-border-light:    #f3f4f6;

    --dn-text-primary:    #111827;
    --dn-text-secondary:  #6b7280;
    --dn-text-disabled:   #9ca3af;

    --dn-topbar-height:   56px;
    --dn-topbar-bg:       #ffffff;
    --dn-topbar-border:   #e5e7eb;

    --dn-sidebar-width:               220px;
    --dn-sidebar-surface:             #ffffff;
    --dn-sidebar-border:              #e5e7eb;
    --dn-sidebar-item-text:           #374151;
    --dn-sidebar-section-text:        #9ca3af;
    --dn-sidebar-item-hover-bg:       #f3f4f6;
    --dn-sidebar-item-active-bg:      #f0fdf4;
    --dn-sidebar-item-active-text:    #166534;
    --dn-sidebar-item-active-border:  #2D6A4F;
    --dn-sidebar-footer-text:         #374151;
    --dn-sidebar-footer-subtext:      #6b7280;

    --dn-content-padding:   1.5rem;
    --dn-border-radius:     8px;
    --dn-border-radius-lg:  12px;
    --dn-shadow-sm:         0 1px 4px rgba(0,0,0,0.08);
    --dn-shadow-md:         0 4px 12px rgba(0,0,0,0.10);

    --dn-font-family:        'Helvetica Neue', Helvetica, Arial, sans-serif;
    --dn-font-size-base:     0.9rem;
    --dn-font-weight-normal: 400;
    --dn-font-weight-bold:   600;

    --dn-badge-buyer-bg:      #dcfce7;
    --dn-badge-buyer-text:    #166534;
    --dn-badge-seller-bg:     #ede9fe;
    --dn-badge-seller-text:   #5b21b6;
    --dn-badge-landlord-bg:   #fef9c3;
    --dn-badge-landlord-text: #854d0e;
    --dn-badge-tenant-bg:     #dbeafe;
    --dn-badge-tenant-text:   #1e40af;
    --dn-badge-danger-bg:     #fee2e2;
    --dn-badge-danger-text:   #991b1b;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
    font-family: var(--dn-font-family);
    font-size:   1rem;
    height: 100%;
    color: var(--dn-text-primary);
}

.button-link { text-decoration: unset; }

/* ============================================================
   LAYOUT PRINCIPALE
   .page = root del MainLayout — gestisce overflow globale.
   Sfondo grigio (var(--dn-bg)) impostato qui come fallback: se
   un figlio (es. .dn-main-area) per qualche ragione non riempie
   il 100% di altezza disponibile, il grigio del .page evita
   che si veda il bianco del body sotto la lista. v4.74.3
   ============================================================ */
.page {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--dn-bg);
}

/* DrawerTarget genera un wrapper con classe .content — lo rendiamo
   flex colonna per staccare topbar e area contenuto. */
::deep .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.dn-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--dn-topbar-height);
    background-color: var(--dn-surface);
    border-bottom: 1px solid var(--dn-border);
    padding: 0 1.25rem;
    flex-shrink: 0;
    z-index: 10;
}

.dn-topbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: var(--dn-border-radius);
    color: var(--dn-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dn-topbar-toggle:hover {
    background-color: var(--dn-border-light);
    color: var(--dn-text-primary);
}

.dn-topbar-toggle svg { width: 1.1rem; height: 1.1rem; }

/* Spacer — spinge la campanella a destra */
.dn-topbar-spacer { flex: 1; }

.dn-topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    border-radius: var(--dn-border-radius);
    color: var(--dn-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dn-topbar-icon-btn:hover {
    background-color: var(--dn-border-light);
    color: var(--dn-text-primary);
}

.dn-topbar-icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* ============================================================
   AREA CONTENUTO PRINCIPALE
   ============================================================ */
.dn-main-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background-color: var(--dn-bg);
    padding: var(--dn-content-padding);
    display: flex;
    flex-direction: column;
}

/* ============================================================
   SIDEBAR — override DevExpress drawer panel
   Doppio livello: CSS variabile interna DX + background-color.
   Necessario perché DevExpress applica il colore tramite
   --dxbl-drawer-panel-bg che ha precedenza su background-color
   standard. Questo selettore globale ad alta specificità
   garantisce che il colore venga applicato correttamente
   anche quando il CSS scoped del Drawer non basta.
   ============================================================ */
.drawer-container .dxbl-drawer-panel {
    --dxbl-drawer-panel-bg: var(--dn-sidebar-surface) !important;
    background-color: var(--dn-sidebar-surface) !important;
    background-image: none !important;
    border-right: 1px solid var(--dn-sidebar-border) !important;
}

.drawer-container .dxbl-drawer-header {
    background-color: transparent !important;
    background: none !important;
}

.drawer-container .dxbl-drawer-footer {
    background-color: transparent !important;
    background: none !important;
    --dxbl-drawer-panel-footer-justify-content: flex-start !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    border-top: none !important;
}

/* ============================================================
   SIDEBAR — stile light (default)
   Il DxDrawer genera #sidebar come wrapper del NavMenu.
   ============================================================ */
#sidebar {
    height: 100%;
    background-color: var(--dn-sidebar-surface);
    border-right: 1px solid var(--dn-sidebar-border);
}

/* Header sidebar — logo */
.dn-sidebar-header {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--dn-border-light);
    min-height: var(--dn-topbar-height);
}

.dn-sidebar-logo-img {
    max-height: 36px;
    width: auto;
    object-fit: contain;
}

.dn-sidebar-logo-text {
    font-size: 1rem;
    font-weight: var(--dn-font-weight-bold);
    color: var(--dn-primary);
    letter-spacing: 0.01em;
}

/* Lista voci */
.dn-nav-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Voce menu */
.dn-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--dn-border-radius);
    color: var(--dn-sidebar-item-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: var(--dn-font-weight-normal);
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.dn-nav-item:hover {
    background-color: var(--dn-sidebar-item-hover-bg);
    color: var(--dn-text-primary);
    text-decoration: none;
}

.dn-nav-item.active {
    background-color: var(--dn-sidebar-item-active-bg);
    color: var(--dn-sidebar-item-active-text);
    font-weight: var(--dn-font-weight-bold);
    border-left-color: var(--dn-sidebar-item-active-border);
}

.dn-nav-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
}

.dn-nav-item:hover .dn-nav-icon,
.dn-nav-item.active .dn-nav-icon {
    opacity: 1;
}

.dn-nav-icon svg { width: 1rem; height: 1rem; }

.dn-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer sidebar — avatar utente */
.dn-sidebar-footer {
    width: 100%;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--dn-border-light);
    box-sizing: border-box;
}

.dn-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.25rem;
}

.dn-sidebar-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--dn-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dn-primary);
}

.dn-sidebar-user-avatar svg { width: 1rem; height: 1rem; }

.dn-sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dn-sidebar-user-name {
    font-size: 0.825rem;
    font-weight: var(--dn-font-weight-bold);
    color: var(--dn-sidebar-footer-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dn-sidebar-user-role {
    font-size: 0.72rem;
    color: var(--dn-sidebar-footer-subtext);
}

/* Voce Esci — stesso look delle voci menu, reset stili <button> */
.dn-sidebar-logout-item {
    width: 100%;
    background: none;
    border: none;
    font-family: var(--dn-font-family);
    text-align: left;
    margin-bottom: 0.25rem;
}

/* DevExpress Drawer — forza larghezza sidebar */
::deep .dxbl-drawer-panel {
    width: var(--dn-sidebar-width) !important;
    min-width: var(--dn-sidebar-width) !important;
    background-color: var(--dn-sidebar-surface) !important;
    border-right: 1px solid var(--dn-sidebar-border) !important;
}

/* ============================================================
   PAGINE INTERNE — struttura comune a tutti i moduli
   ============================================================ */
.dn-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 1.5rem;
}

/* Header pagina: titolo a sinistra, azioni a destra */
.dn-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Riga titolo con freccia ← integrata (mockup) */
.dn-page-title-row {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
}

/* Bottone freccia back — cerchio sottile, non riempito */
.dn-page-back-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    margin-top:      0.35rem;  /* allineamento ottico col titolo */
    border:          1.5px solid var(--dn-border);
    border-radius:   50%;
    background:      transparent;
    color:           var(--dn-text-secondary);
    cursor:          pointer;
    flex-shrink:     0;
    transition:      border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    padding:         0;
}

.dn-page-back-btn:hover {
    border-color:     var(--dn-primary);
    color:            var(--dn-primary);
    background-color: color-mix(in srgb, var(--dn-primary) 6%, transparent);
}

.dn-page-title {
    font-size: 1.6rem;
    font-weight: var(--dn-font-weight-bold);
    color: var(--dn-text-primary);
    margin: 0 0 0.2rem;
    line-height: 1.2;
}

/* FocusOnNavigate (App.razor, Selector="h1") sposta programmaticamente il
   focus sull'<h1> dopo ogni navigazione di routing per accessibilità (gli
   screen reader leggono il titolo della nuova pagina). Il browser però
   disegna il suo outline di default, esteticamente fastidioso e percepito
   come bug visivo (rettangolo nero attorno al titolo, intermittente).
   Sopprimiamo l'outline su tutti gli <h1> di pagina del progetto: il focus
   programmatico resta attivo — utile alle tecnologie assistive — ma ai
   sighted user la pagina appare pulita. L'<h1> non è in tab-order
   (FocusOnNavigate usa tabindex=-1), quindi non perdiamo navigazione
   tastiera reale.

   Classi coperte:
   - .dn-page-title       — pagine interne del back-office (v4.79.3)
   - .dn-login-form-title — schermata di login              (v4.79.4)

   Quando si introduce una nuova classe per <h1>, ricordarsi di aggiungerla
   qui per non far ricomparire l'outline del browser. */
.dn-page-title:focus,
.dn-page-title:focus-visible,
.dn-login-form-title:focus,
.dn-login-form-title:focus-visible {
    outline: none;
}

.dn-page-subtitle {
    font-size: 0.85rem;
    color: var(--dn-text-secondary);
    margin: 0;
}

/* ============================================================
   TOOLBAR RICERCA — barra sopra la griglia
   ============================================================ */
.dn-list-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dn-list-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.dn-list-search-icon {
    position: absolute;
    left: 0.75rem;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--dn-text-disabled);
    pointer-events: none;
    z-index: 1;
}

/* ── Search input nativo HTML ────────────────────────────────
   Input HTML puro: nessun wrapper DevExpress, pieno controllo stile. */
.dn-list-search-native {
    flex: 1;
    width: 100%;
    height: 2.375rem;
    padding: 0 0.75rem 0 2.2rem;
    font-family: var(--dn-font-family);
    font-size: 0.875rem;
    color: var(--dn-text-primary);
    background-color: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.dn-list-search-native::placeholder {
    color: var(--dn-text-disabled);
}

.dn-list-search-native:hover {
    border-color: var(--dn-text-disabled);
}

.dn-list-search-native:focus {
    border-color: var(--dn-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dn-primary) 15%, transparent);
}

/* Pulsante filtri */
.dn-btn-filter.dxbl-btn {
    background-color: var(--dn-surface) !important;
    border: 1px solid var(--dn-border) !important;
    color: var(--dn-text-secondary) !important;
    border-radius: var(--dn-border-radius) !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
}

.dn-btn-filter.dxbl-btn:hover:not(:disabled) {
    background-color: var(--dn-border-light) !important;
    color: var(--dn-text-primary) !important;
}

/* ============================================================
   PANNELLO FILTRI AVANZATI — collassabile
   ============================================================ */
.dn-filter-panel {
    background-color: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    padding: 1rem 1.25rem 0.5rem;
}

.dn-filter-form { margin: 0; }

/* ============================================================
   GRIGLIA DxGrid — override per look mockup
   ============================================================ */
.dn-grid-wrapper {
    min-height: 0;
    background-color: var(--dn-surface);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--dn-shadow-sm);
}

/* Rimuove bordo esterno DevExpress */
.dn-grid.dxbl-grid {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Header colonne */
.dn-grid.dxbl-grid .dxbl-grid-header-row th,
.dn-grid.dxbl-grid .dxbl-grid-header-cell {
    background-color: var(--dn-bg) !important;
    color: var(--dn-text-secondary) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--dn-border) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    padding: 0.75rem 0.75rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Forza border-separate per permettere border-bottom sulle celle */
.dn-grid.dxbl-grid table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Righe dati
   DevExpress (v25.2) NON aggiunge classi alle <tr> dati — usa data-visible-index.
   Il selettore corretto è tr[data-visible-index] dentro il wrapper .dn-grid. */
.dn-grid.dxbl-grid tr[data-visible-index] td {
    border-bottom: 1px solid var(--dn-border) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    padding: 1.1rem 0.75rem !important;
    vertical-align: middle !important;
    font-size: var(--dn-font-size-base) !important;
    color: var(--dn-text-primary) !important;
    background-color: var(--dn-surface) !important;
    transition: background-color 0.15s ease !important;
}

/* Separatore riga — box-shadow come fallback se border-bottom non funziona */
.dn-grid.dxbl-grid tr[data-visible-index] {
    box-shadow: inset 0 -1px 0 var(--dn-border) !important;
}

/* Ultima riga — rimuove separatore in fondo */
.dn-grid.dxbl-grid tr[data-visible-index]:last-child td {
    border-bottom: none !important;
}

/* Row hover — sfondo tinta primario tenue + barra accent a sinistra */
.dn-grid.dxbl-grid tr[data-visible-index]:hover td {
    background-color: color-mix(in srgb, var(--dn-primary) 6%, var(--dn-surface)) !important;
    cursor: pointer !important;
}

.dn-grid.dxbl-grid tr[data-visible-index]:hover {
    box-shadow: inset 0 -1px 0 var(--dn-border), inset 3px 0 0 var(--dn-primary) !important;
}

/* Rimuove qualsiasi altro bordo interno DX */
.dn-grid.dxbl-grid table,
.dn-grid.dxbl-grid colgroup col {
    border: none !important;
}

/* Pager */
.dn-grid .dxbl-pager {
    border-top: 1px solid var(--dn-border) !important;
    background-color: transparent !important;
    padding: 0.5rem 0.75rem !important;
}

/* ============================================================
   CELLE GRIGLIA — componenti interni CellDisplayTemplate
   ============================================================ */

/* Nome contatto in grassetto */
.dn-cell-name {
    font-weight: var(--dn-font-weight-bold);
    color: var(--dn-text-primary);
    font-size: 0.875rem;
}

/* Colonna Contatti — email + telefono */
.dn-cell-contact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dn-cell-contact-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--dn-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dn-cell-contact-secondary {
    color: var(--dn-text-disabled);
}

.dn-cell-contact-icon {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Colonna Località */
.dn-cell-locality {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--dn-text-secondary);
}

/* Celle con icona inline (Email, Telefono, Località) */
.dn-cell-inline-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--dn-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Data relativa — colonna Ultimo Contatto */
.dn-cell-date {
    font-size: 0.82rem;
    color: var(--dn-text-secondary);
    white-space: nowrap;
}

/* Nome contatto cliccabile — navigazione a pagina dettaglio */
.dn-cell-name--link {
    font-weight: var(--dn-font-weight-bold);
    font-size: 0.875rem;
    color: var(--dn-text-primary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.dn-cell-name--link:hover {
    color: var(--dn-primary);
    text-decoration: underline;
}

/* Griglia con righe cliccabili */
.dn-grid-clickable .dxbl-grid-data-row {
    cursor: pointer !important;
}

/* ============================================================
   BADGE / PILL
   ============================================================ */
.dn-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
}

.dn-badge--buyer    { background: #f0fdf4; color: var(--dn-badge-buyer-text);    border: 1px solid #86efac; }
.dn-badge--seller   { background: #faf5ff; color: var(--dn-badge-seller-text);   border: 1px solid #c4b5fd; }
.dn-badge--landlord { background: #fefce8; color: var(--dn-badge-landlord-text); border: 1px solid #fde047; }
.dn-badge--tenant   { background: #eff6ff; color: var(--dn-badge-tenant-text);   border: 1px solid #93c5fd; }
.dn-badge--danger   { background: var(--dn-badge-danger-bg);   color: var(--dn-badge-danger-text);   border: 1px solid #fca5a5; }
.dn-badge--secondary{ background: var(--dn-border-light);      color: var(--dn-text-secondary);       border: 1px solid var(--dn-border); }

/* Badge tipi wrapper */
.dn-type-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* Backward compat — StatusBadge usa ancora questi */
.dn-badge-success  { background-color: #d4edda; color: #155724; }
.dn-badge-info     { background-color: #d1ecf1; color: #0c5460; }
.dn-badge-warning  { background-color: #fff3cd; color: #856404; }
.dn-badge-danger   { background-color: #f8d7da; color: #721c24; }
.dn-badge-secondary{ background-color: #e2e3e5; color: #383d41; }
.dn-badge-primary  { background-color: var(--dn-accent); color: var(--dn-sidebar-bg); }

/* ============================================================
   BOTTONI GLOBALI
   ============================================================ */

/* Pulsante "+ Aggiungi X" — verde pieno, in alto a destra dell'header pagina */
.dn-btn-add.dxbl-btn {
    background-color: var(--dn-primary) !important;
    border-color:     var(--dn-primary) !important;
    color:            var(--dn-primary-text) !important;
    border-radius:    var(--dn-border-radius) !important;
    font-weight:      var(--dn-font-weight-bold) !important;
    font-size:        0.875rem !important;
    padding:          0.5rem 1rem !important;
    white-space:      nowrap !important;
}

.dn-btn-add.dxbl-btn:hover:not(:disabled) {
    background-color: var(--dn-primary-hover) !important;
    border-color:     var(--dn-primary-hover) !important;
}

/* Pulsanti riga griglia — outline small */
.dn-btn-row.dxbl-btn {
    border-radius: var(--dn-border-radius) !important;
    font-size:     0.78rem !important;
}

/* Pulsante primario generico */
.dn-btn-primary.dxbl-btn {
    background-color: var(--dn-primary) !important;
    border-color:     var(--dn-primary) !important;
    color:            var(--dn-primary-text) !important;
    border-radius:    var(--dn-border-radius) !important;
}

.dn-btn-primary.dxbl-btn:hover:not(:disabled) {
    background-color: var(--dn-primary-hover) !important;
    border-color:     var(--dn-primary-hover) !important;
}

/* Ghost / link */
.dn-btn-ghost.dxbl-btn {
    background-color: transparent !important;
    border-color:     transparent !important;
    color:            var(--dn-text-secondary) !important;
    box-shadow:       none !important;
    padding-left:     0.5rem !important;
    padding-right:    0.5rem !important;
    font-weight:      var(--dn-font-weight-normal) !important;
}

.dn-btn-ghost.dxbl-btn:hover:not(:disabled) {
    background-color: transparent !important;
    color:            var(--dn-text-primary) !important;
    text-decoration:  underline !important;
}

/* Converti — outline verde */
.dn-btn-convert.dxbl-btn {
    background-color: transparent !important;
    border-color:     #198754 !important;
    color:            #198754 !important;
    font-weight:      var(--dn-font-weight-bold) !important;
    border-radius:    var(--dn-border-radius) !important;
}

.dn-btn-convert.dxbl-btn:hover:not(:disabled) {
    background-color: #198754 !important;
    color:            #ffffff !important;
}

/* Azioni rapide dashboard */
.dn-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.4rem;
    border-radius: var(--dn-border-radius);
    font-size: 0.875rem;
    font-weight: var(--dn-font-weight-bold);
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    border: 1.5px solid transparent;
    line-height: 1.4;
    box-shadow: var(--dn-shadow-sm);
}

.dn-action-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.dn-action-btn--primary {
    background-color: var(--dn-primary);
    border-color:     var(--dn-primary);
    color:            #ffffff !important;
}

.dn-action-btn--primary:hover {
    background-color: var(--dn-primary-hover);
    border-color:     var(--dn-primary-hover);
    transform:        translateY(-1px);
}

.dn-action-btn--secondary {
    background-color: var(--dn-surface);
    border-color:     var(--dn-border);
    color:            var(--dn-primary) !important;
}

.dn-action-btn--secondary:hover {
    background-color: var(--dn-accent);
    border-color:     var(--dn-secondary);
    transform:        translateY(-1px);
}

/* ============================================================
   AZIONI GRIGLIA
   ============================================================ */
.dn-grid-actions {
    display: flex;
    gap:     0.35rem;
    align-items: center;
}

/* ============================================================
   STATO GRIGLIA VUOTA / LOADING
   ============================================================ */
.dn-empty-grid {
    padding: 2.5rem;
    text-align: center;
    color: var(--dn-text-secondary);
    font-size: 0.875rem;
}

.dn-loading {
    padding: 2.5rem;
    text-align: center;
    color: var(--dn-primary);
    font-size: 0.875rem;
}

/* ============================================================
   POPUP — .dn-popup-fullscreen
   ============================================================ */
.dn-popup-fullscreen .dxbl-popup {
    border-radius: var(--dn-border-radius-lg) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: var(--dn-shadow-md) !important;
}

.dn-popup-fullscreen .dxbl-popup-header { flex-shrink: 0 !important; }

.dn-popup-fullscreen .dxbl-popup-body {
    flex: 1 1 0 !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

.dn-popup-fullscreen .dxbl-popup-body-content {
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.dn-popup-panel-host {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* ============================================================
   PANNELLO DETTAGLIO — .dn-lead-panel / .dn-contact-panel
   ============================================================ */
.dn-lead-panel,
.dn-contact-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.dn-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--dn-border);
    background-color: var(--dn-surface);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    gap: 0.75rem;
}

.dn-panel-footer-left  { display: flex; align-items: center; gap: 0.5rem; }
.dn-panel-footer-right { display: flex; align-items: center; gap: 0.75rem; }

.dn-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: var(--dn-font-weight-bold);
    background-color: var(--dn-accent);
    color: var(--dn-sidebar-bg);
    border: 1px solid var(--dn-secondary);
}

.dn-footer-status--danger {
    background-color: var(--dn-badge-danger-bg);
    border-color:     var(--dn-badge-danger-bg);
    color:            var(--dn-badge-danger-text);
}

.dn-footer-divider {
    width: 1px;
    height: 1.5rem;
    background-color: var(--dn-border);
    flex-shrink: 0;
}

.dn-panel-error {
    padding: 0.6rem 1.5rem;
    background-color: var(--dn-badge-danger-bg);
    color: var(--dn-badge-danger-text);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--dn-border);
    flex-shrink: 0;
}

.dn-panel-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background-color: #d4edda;
    color: #155724;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid #c3e6cb;
    flex-shrink: 0;
    animation: dn-fadeInDown 0.2s ease;
}

.dn-panel-success svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.dn-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.dn-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--dn-primary);
    font-size: 0.9rem;
}

/* ============================================================
   SUBLIST — righe inline ContactInformation / ContactPlace
   ============================================================ */
.dn-sublist-toolbar { padding: 0.75rem 0; }

.dn-sublist-empty {
    padding: 1.5rem 0;
    color: var(--dn-text-secondary);
    font-size: 0.875rem;
}

.dn-sublist-row {
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    padding: 0.75rem 1rem 0.25rem;
    margin-bottom: 0.75rem;
    background-color: var(--dn-bg);
}

.dn-sublist-form { margin: 0; }

/* ============================================================
   CHECKBOX GROUP
   ============================================================ */
.dn-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.25rem 0;
}

.dn-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}

/* ============================================================
   PROFILO VENDITORE / ACQUIRENTE
   ============================================================ */
.dn-profile-empty {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    color: var(--dn-text-secondary);
    font-size: 0.9rem;
}

.dn-profile-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--dn-border);
}

.dn-profile-date {
    font-size: 0.8rem;
    color: var(--dn-text-secondary);
    flex: 1;
}

/* ============================================================
   STORICO
   ============================================================ */
.dn-history-list { padding-top: 0.5rem; }

/* ============================================================
   LOGIN
   ============================================================ */
@keyframes dn-fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dn-fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dn-login-bg-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dn-login-page {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sfondo derivato dal colore primario configurato — molto opaco/scuro.
       color-mix mescola --dn-primary con nero per ottenere una tinta
       scura e desaturata che non compete con la card. */
    background-color: color-mix(in srgb, var(--dn-primary) 18%, #0f1a14);
    padding: 1.5rem;
    overflow: hidden;
}

.dn-login-wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    z-index: 1;
}

/* Pulsante submit login — <button> HTML nativo, non DxButton
   In site.css (globale) per coerenza e per evitare FOUC */
.dn-login-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 2.875rem;
    margin-top: 0.25rem;
    background-color: var(--dn-primary);
    border: none;
    border-radius: var(--dn-border-radius);
    color: var(--dn-primary-text);
    font-family: var(--dn-font-family);
    font-size: 0.95rem;
    font-weight: var(--dn-font-weight-bold);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dn-primary) 35%, transparent);
}

.dn-login-submit-btn:hover {
    background-color: var(--dn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--dn-primary) 40%, transparent);
}

.dn-login-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.dn-login-btn.dxbl-btn {
    background-color: var(--dn-primary) !important;
    border-color:     var(--dn-primary) !important;
    color:            var(--dn-primary-text) !important;
    padding:          0.7rem 1rem !important;
    font-size:        0.95rem !important;
    font-weight:      var(--dn-font-weight-bold) !important;
    border-radius:    var(--dn-border-radius) !important;
    width:            100% !important;
    transition:       background-color 0.2s ease, transform 0.15s ease !important;
}

.dn-login-btn.dxbl-btn:hover:not(:disabled) {
    background-color: var(--dn-primary-hover) !important;
    border-color:     var(--dn-primary-hover) !important;
    transform:        translateY(-1px) !important;
}

.dn-login-btn.dxbl-btn:disabled {
    opacity: 0.65 !important;
    cursor:  wait !important;
}

/* ============================================================
   ERRORI BLAZOR
   ============================================================ */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================
   VALIDAZIONE BLAZOR
   ============================================================ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid                              { outline: 1px solid red; }
.validation-message                   { color: red; }

/* ============================================================
   DASHBOARD — LISTE INFERIORI
   ============================================================ */

/* ── NOTA ARCHITETTURALE ──────────────────────────────────────────────
   Le classi .dn-sk* (skeleton) e le dimensioni SVG delle KPI card
   sono in site.css (globale) e NON in DashboardPage.razor.css (scoped).
   Motivo: in Blazor Server il CSS scoped (è dentro Administrator.styles.css)
   viene scaricato dal browser DOPO il primo render server-side, causando
   un flash di contenuto non stilizzato (FOUC). site.css è inline in App.razor
   tramite <link> e è disponibile prima del primo paint.
   ──────────────────────────────────────────────────────────────────── */
.dn-dashboard-lists-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.25rem;
}

@media (max-width: 1024px) {
    .dn-dashboard-lists-row { grid-template-columns: 1fr; }
}

.dn-dashboard-list-card {
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius-large);
    padding:       2rem;
    box-shadow:    var(--dn-card-shadow);
}

.dn-dashboard-empty {
    color:     var(--dn-text-muted);
    font-size: 0.875rem;
    margin:    1rem 0 0;
}

/* ── Lista Nuovi Lead ──────────────────────────────────────── */
.dn-recent-leads-list {
    list-style: none;
    margin:     0.75rem 0 0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.dn-recent-lead-item {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     0.75rem 0;
    border-bottom: 1px solid var(--dn-border);
}

.dn-recent-lead-item:last-child { border-bottom: none; }

.dn-recent-lead-avatar {
    flex-shrink:     0;
    width:           2.25rem;
    height:          2.25rem;
    border-radius:   50%;
    background:      color-mix(in srgb, var(--dn-primary) 12%, transparent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--dn-primary);
}

.dn-recent-lead-avatar svg {
    width:  1rem;
    height: 1rem;
}

.dn-recent-lead-body {
    flex:        1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         0.2rem;
}

.dn-recent-lead-name {
    font-size:   0.9rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.dn-recent-lead-badges {
    display: flex;
    gap:     0.4rem;
    flex-wrap: wrap;
}

.dn-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.15rem 0.5rem;
    border-radius: 999px;
    font-size:     0.72rem;
    font-weight:   var(--dn-font-weight-bold);
    line-height:   1.4;
}

.dn-badge--interest {
    background: color-mix(in srgb, var(--dn-primary) 12%, transparent);
    color:      var(--dn-primary);
}

.dn-badge--source {
    background: color-mix(in srgb, var(--dn-text-muted) 12%, transparent);
    color:      var(--dn-text-muted);
}

.dn-recent-lead-time {
    flex-shrink: 0;
    font-size:   0.78rem;
    color:       var(--dn-text-muted);
    white-space: nowrap;
}

/* ── Lista Incarichi in Scadenza ───────────────────────────── */
.dn-expiring-list {
    list-style: none;
    margin:     0.75rem 0 0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0.75rem;
}

.dn-expiring-item {
    padding:       0.875rem 1rem;
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    display:       flex;
    flex-direction: column;
    gap:           0.3rem;
    background:    var(--dn-bg);
}

.dn-expiring-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             0.5rem;
}

.dn-expiring-address {
    font-size:   0.9rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text);
    line-height: 1.3;
}

.dn-expiring-icon {
    flex-shrink: 0;
    width:       1.1rem;
    height:      1.1rem;
    color:       #f59e0b; /* ambra — coerente col KPI arancione */
    margin-top:  0.1rem;
}

.dn-expiring-owner {
    font-size: 0.8rem;
    color:     var(--dn-text-muted);
}

.dn-expiring-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      0.2rem;
}

.dn-expiring-date {
    font-size: 0.78rem;
    color:     var(--dn-text-muted);
}

.dn-expiring-days {
    font-size:   0.8rem;
    font-weight: var(--dn-font-weight-bold);
    color:       #f59e0b;
}

.dn-expiring-days--urgent {
    color: var(--dn-danger, #ef4444);
}

/* ============================================================
   DASHBOARD — SKELETON LOADING
   (in site.css globale — non in scoped — vedi nota architetturale)
   ============================================================ */

@keyframes dn-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.dn-sk {
    display: block;
    background: linear-gradient(
        90deg,
        var(--dn-border) 25%,
        var(--dn-surface) 50%,
        var(--dn-border) 75%
    );
    background-size: 1200px 100%;
    animation: dn-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

.dn-sk--icon {
    width:         2.75rem;
    height:        2.75rem;
    border-radius: 50%;
    margin-bottom: 0.75rem;
    flex-shrink:   0;
}

.dn-sk--value  { width: 4.5rem; height: 2rem; }
.dn-sk--label  { width: 70%;    height: 0.9rem;  margin-top: 0.1rem; }
.dn-sk--sub    { width: 50%;    height: 0.75rem; }
.dn-sk--title  { width: 55%;    height: 1rem;    margin-bottom: 1.75rem; }

.dn-sk--chart {
    width:         100%;
    height:        160px;
    border-radius: 6px;
}

.dn-sk-row {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--dn-border);
}

.dn-sk-row:last-child { border-bottom: none; }

.dn-sk--avatar {
    flex-shrink:   0;
    width:         2.25rem;
    height:        2.25rem;
    border-radius: 50%;
}

.dn-sk-row-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.dn-sk--line-long  { width: 65%; height: 0.85rem; }
.dn-sk--line-short { width: 40%; height: 0.72rem; }

/* ============================================================
   FIX SVG GLOBALE (anti-FOUC)
   Gli SVG inline senza width/height espliciti nel DOM si espandono
   al default browser (300x150) prima che il CSS scoped venga caricato.
   Queste regole in site.css (caricato inline in App.razor) stabilizzano
   le dimensioni di TUTTI gli SVG dell'applicazione prima del primo paint.
   ============================================================ */

/* Reset base — nessun SVG deve mai espandersi oltre il proprio contesto */
svg {
    display:    block;
    flex-shrink: 0;
    overflow:   visible;
}

/* Icone sidebar nav */
.dn-nav-icon svg {
    width:  1rem;
    height: 1rem;
}

/* Icone topbar (toggle + campanella) */
.dn-topbar-toggle svg,
.dn-topbar-icon-btn svg {
    width:  1.1rem;
    height: 1.1rem;
}

/* Icona search nella toolbar liste */
.dn-list-search-icon {
    width:  0.9rem;
    height: 0.9rem;
}

/* Icone inline nelle celle griglia (email, telefono, località) */
.dn-cell-contact-icon {
    width:  0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Avatar sidebar footer */
.dn-sidebar-user-avatar svg {
    width:  1rem;
    height: 1rem;
}

/* KPI card dashboard */
.dn-kpi-icon {
    width:           2.75rem;
    height:          2.75rem;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.dn-kpi-icon svg {
    width:  1.25rem;
    height: 1.25rem;
}

/* Icone nei pulsanti DxButton con ContentTemplate */
.dn-btn-filter svg {
    width:  0.9rem;
    height: 0.9rem;
    vertical-align: middle;
}

/* ============================================================
   FORM — STILI GLOBALI
   Usati in ContactDetailPanel, LeadDetailPanel e qualsiasi
   futuro form del progetto. Tutto in site.css (globale) perché
   ContactDetailPanel è renderizzato dentro RenderFragment di
   ContactNewPage e il CSS scoped non attraversa quel boundary.
   ============================================================ */

/* ── Wrapper pagina dettaglio ───────────────────────────────── */
.dn-detail-wrapper {
    flex-direction: column;
    flex:           1;
    min-height:     0;
    max-width:      960px;
}

/* Variante "wide": rimuove il cap di 960px per i layout split (form
   + sidebar storico) dove il main avrebbe spazio insufficiente.
   Applicata dal LeadDetailPanel in modalità modifica (`!IsNew`)
   da v4.74.8. */
.dn-detail-wrapper--wide {
    max-width: none;
}

/* Barra azioni nell'header pagina del LeadDetailPage (Modifica/Salva/
   Annulla/Converti/Vai al Contatto). È disegnata accanto al titolo
   grazie al `justify-content: space-between` del .dn-page-header.
   v4.74.9 */
.dn-detail-page-actions {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
    flex-shrink: 0;
    margin-top:  0.25rem; /* allineamento ottico col titolo */
}

/* ── Sezione card ───────────────────────────────────────────── */
.dn-form-section {
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    padding:       1.5rem 1.75rem;
    margin-bottom: 0.75rem;
}

.dn-form-section--actions {
    background: transparent;
    border:     none;
    padding:    0.5rem 0 1rem;
    margin-bottom: 0;
}

/* Header sezione: icona + titolo */
.dn-form-section-header {
    display:     flex;
    align-items: center;
    gap:         0.65rem;
    margin-bottom: 1.25rem;
}

.dn-form-section-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           1.5rem;
    height:          1.5rem;
    /* Nessun cerchio di sfondo — icona colorata diretta, come nel mockup */
    background:      transparent;
    color:           var(--dn-primary);
    flex-shrink:     0;
}

.dn-form-section-icon svg    { width: 1.25rem; height: 1.25rem; }

/* Varianti icona per ruoli */
.dn-form-section-icon--seller {
    color: var(--dn-primary);
}
.dn-form-section-icon--buyer {
    color: var(--dn-badge-tenant-text);
}

.dn-form-section-title {
    font-size:   1.05rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
    margin:      0;
    line-height: 1.2;
}

.dn-form-section-desc {
    font-size:    0.875rem;
    color:        var(--dn-text-secondary);
    margin:       -0.5rem 0 1rem;
    line-height:  1.5;
}

/* ── Griglia campi ──────────────────────────────────────────── */
.dn-form-grid {
    display: grid;
    gap:     1rem;
}

.dn-form-grid--1 { grid-template-columns: 1fr; }
.dn-form-grid--2 { grid-template-columns: 1fr 1fr; }
.dn-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.dn-form-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 640px) {
    .dn-form-grid--2,
    .dn-form-grid--3,
    .dn-form-grid--4 { grid-template-columns: 1fr; }
}

/* ── Campo singolo ──────────────────────────────────────────── */
.dn-form-field {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}

/* Gruppo con label sopra e griglia sotto */
.dn-form-field-group {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-top:     0.75rem;
}

.dn-form-label {
    font-size:      0.75rem;
    font-weight:    var(--dn-font-weight-bold);
    color:          var(--dn-text-secondary);
    line-height:    1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dn-form-required {
    color: #ef4444;
    margin-left: 0.1rem;
}

.dn-form-hint {
    font-size: 0.78rem;
    color:     var(--dn-text-secondary);
    line-height: 1.4;
}

/* ── Input HTML nativo nei form (.dn-form-input) ────────────────
   DxTextBox sostituito con <input> nativi — stesso pattern già
   adottato per search bar (v4.61.6) e login (v4.63.0).
   DevExpress v25.2 applica lo stile "underline" tramite classi
   interne non sovrascrivibili via CSS esterno.
   ---------------------------------------------------------------- */
.dn-form-input {
    width:         100%;
    height:        2.625rem;
    padding:       0 0.875rem;
    font-family:   var(--dn-font-family);
    font-size:     0.9rem;
    color:         var(--dn-text-primary);
    background:    var(--dn-surface);
    border:        1.5px solid #d1d5db;
    border-radius: var(--dn-border-radius);
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.dn-form-input::placeholder {
    color:      var(--dn-text-disabled);
    font-style: normal;
}

.dn-form-input:hover  { border-color: #9ca3af; }

.dn-form-input:focus {
    border-color: var(--dn-primary);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--dn-primary) 12%, transparent);
}

/* Override residui per DxDateEdit e DxComboBox che restano
   componenti DevExpress (nessuna alternativa nativa equivalente) */
.dn-form-field .dxbl-edit,
.dn-form-field .dxbl-date-edit-picker {
    --dxbl-textbox-bg:                   var(--dn-surface) !important;
    --dxbl-textbox-border-color:         #d1d5db !important;
    --dxbl-textbox-border-radius:        var(--dn-border-radius) !important;
    --dxbl-textbox-hover-border-color:   #9ca3af !important;
    --dxbl-textbox-focused-border-color: var(--dn-primary) !important;
    border:        1.5px solid #d1d5db !important;
    border-radius: var(--dn-border-radius) !important;
    background:    var(--dn-surface) !important;
    min-height:    2.625rem !important;
    box-shadow:    none !important;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dn-form-field .dxbl-edit:hover,
.dn-form-field .dxbl-date-edit-picker:hover {
    border-color: #9ca3af !important;
}

.dn-form-field .dxbl-edit:focus-within,
.dn-form-field .dxbl-date-edit-picker:focus-within {
    border-color: var(--dn-primary) !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--dn-primary) 12%, transparent) !important;
}

/* Input nativo (textarea) */
.dn-input--memo {
    width:         100%;
    padding:       0.6rem 0.75rem;
    font-family:   var(--dn-font-family);
    font-size:     0.875rem;
    color:         var(--dn-text-primary);
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    resize:        vertical;
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
    line-height:   1.5;
}

.dn-input--memo::placeholder { color: var(--dn-text-disabled); }

.dn-input--memo:focus {
    border-color: var(--dn-primary);
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--dn-primary) 15%, transparent);
}

/* ── Checkbox card ──────────────────────────────────────────── */
/* Usata per: ruoli, caratteristiche, privacy, zone interesse    */
.dn-check-card {
    display:       flex;
    align-items:   center;
    gap:           0.65rem;
    padding:       0.75rem 1rem;
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    background:    var(--dn-bg);
    cursor:        pointer;
    transition:    border-color 0.15s ease, background-color 0.15s ease;
    user-select:   none;
}

.dn-check-card:hover {
    background:   color-mix(in srgb, var(--dn-primary) 4%, var(--dn-surface));
    border-color: var(--dn-text-disabled);
}

.dn-check-card--checked {
    background:   color-mix(in srgb, var(--dn-primary) 8%, var(--dn-surface));
    border-color: var(--dn-primary);
}

.dn-check-card-input {
    flex-shrink: 0;
    pointer-events: none; /* il click gestito dalla <label> */
}

.dn-check-card-body {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
    min-width:      0;
}

.dn-check-card-label {
    font-size:   0.875rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
    line-height: 1.3;
}

.dn-check-card-desc {
    font-size:  0.78rem;
    color:      var(--dn-text-secondary);
    line-height: 1.4;
}

/* Grid per le card checkbox */
.dn-check-card-grid {
    display: grid;
    gap:     0.65rem;
    grid-template-columns: 1fr 1fr;   /* default: 2 colonne (Ruoli) */
}

.dn-check-card-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.dn-check-card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
    .dn-check-card-grid,
    .dn-check-card-grid--3,
    .dn-check-card-grid--4 { grid-template-columns: 1fr 1fr; }
}

/* ── Azioni form (pulsanti salva / annulla) ─────────────────── */
.dn-form-actions {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

/* Pulsante Salva — con icona e testo */
.dn-btn-save.dxbl-btn {
    display:          inline-flex !important;
    align-items:      center !important;
    gap:              0.5rem !important;
    background-color: var(--dn-primary) !important;
    border-color:     var(--dn-primary) !important;
    color:            var(--dn-primary-text) !important;
    border-radius:    var(--dn-border-radius) !important;
    font-weight:      var(--dn-font-weight-bold) !important;
    font-size:        0.9rem !important;
    padding:          0.6rem 1.25rem !important;
}

.dn-btn-save.dxbl-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.dn-btn-save.dxbl-btn:hover:not(:disabled) {
    background-color: var(--dn-primary-hover) !important;
    border-color:     var(--dn-primary-hover) !important;
}

/* ── Banner informativo in fondo al form ────────────────────── */
.dn-form-info-banner {
    display:       flex;
    align-items:   flex-start;
    gap:           0.65rem;
    padding:       0.875rem 1rem;
    border:        1px solid #bfdbfe;
    border-radius: var(--dn-border-radius);
    background:    #eff6ff;
    color:         #1e40af;
    font-size:     0.82rem;
    line-height:   1.5;
    margin-bottom: 1rem;
}

.dn-form-info-banner svg {
    width:      1rem;
    height:     1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color:      #3b82f6;
}

/* ============================================================
   SELECT NATIVO — .dn-native-select
   Usato al posto di DxComboBox per avere pieno controllo visivo.
   Il wrapper posiziona una freccia SVG custom sopra il <select>.
   ============================================================ */
.dn-native-select-wrapper {
    position: relative;
    display:  block;
}

/* Freccia SVG custom sovrapposta — generata tramite background-image
   inline SVG, non tocca il DOM e funziona su tutti i browser. */
.dn-native-select-wrapper::after {
    content:       '';
    position:      absolute;
    right:         0.75rem;
    top:           50%;
    transform:     translateY(-50%);
    width:         1rem;
    height:        1rem;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     1rem;
}

.dn-native-select {
    display:     block;
    width:       100%;
    height:      2.625rem;
    padding:     0 2.5rem 0 0.875rem;  /* spazio a destra per la freccia */
    font-family: var(--dn-font-family);
    font-size:   0.9rem;
    color:       var(--dn-text-primary);
    background:  var(--dn-surface);
    border:      1.5px solid #d1d5db;
    border-radius: var(--dn-border-radius);
    outline:     none;
    cursor:      pointer;
    box-sizing:  border-box;
    /* Rimuove la freccia nativa del browser */
    appearance:         none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dn-native-select:hover {
    border-color: #9ca3af;
}

.dn-native-select:focus {
    border-color: var(--dn-primary);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--dn-primary) 12%, transparent);
}

/* Freccia verde al focus */
.dn-native-select:focus + .dn-native-select-wrapper::after,
.dn-native-select-wrapper:focus-within::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%2316A34A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Placeholder (option vuota) */
.dn-native-select option[value=""] {
    color: var(--dn-text-disabled);
}

/* ============================================================
   BOTTONI AZIONI FORM — .dn-form-btn-save / .dn-form-btn-cancel
   Bottoni HTML nativi: pieno controllo visivo, zero override DX.
   Salva: verde pieno con icona checkmark + feedback loading.
   Annulla: outline grigio neutro, peso visivo secondario.
   ============================================================ */

@keyframes dn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.dn-form-btn-save {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    height:          2.75rem;
    padding:         0 1.5rem;
    background:      var(--dn-primary);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--dn-border-radius);
    font-family:     var(--dn-font-family);
    font-size:       0.9rem;
    font-weight:     var(--dn-font-weight-bold);
    cursor:          pointer;
    box-shadow:      0 2px 8px color-mix(in srgb, var(--dn-primary) 30%, transparent);
    transition:      background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.dn-form-btn-save:hover:not(:disabled) {
    background:  var(--dn-primary-hover);
    transform:   translateY(-1px);
    box-shadow:  0 4px 12px color-mix(in srgb, var(--dn-primary) 35%, transparent);
}

.dn-form-btn-save:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: none;
}

.dn-form-btn-save:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

.dn-form-btn-cancel {
    display:       inline-flex;
    align-items:   center;
    height:        2.75rem;
    padding:       0 1.25rem;
    background:    transparent;
    color:         var(--dn-text-secondary);
    border:        1.5px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    font-family:   var(--dn-font-family);
    font-size:     0.9rem;
    font-weight:   var(--dn-font-weight-normal);
    cursor:        pointer;
    transition:    border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.dn-form-btn-cancel:hover:not(:disabled) {
    border-color:     var(--dn-text-disabled);
    color:            var(--dn-text-primary);
    background-color: var(--dn-bg);
}

.dn-form-btn-cancel:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* ============================================================
   DETTAGLIO CONTATTO — layout a due colonne
   ============================================================ */

/* Riga titolo con badge ruoli inline */
.dn-contact-detail-title-row {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
}

/* Bottone "Modifica Contatto" — verde outline */
.dn-contact-detail-edit-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.5rem;
    height:        2.5rem;
    padding:       0 1.25rem;
    background:    var(--dn-primary);
    color:         #ffffff;
    border:        none;
    border-radius: var(--dn-border-radius);
    font-family:   var(--dn-font-family);
    font-size:     0.875rem;
    font-weight:   var(--dn-font-weight-bold);
    cursor:        pointer;
    white-space:   nowrap;
    flex-shrink:   0;
    box-shadow:    0 2px 8px color-mix(in srgb, var(--dn-primary) 30%, transparent);
    transition:    background-color 0.15s ease, transform 0.12s ease;
}

.dn-contact-detail-edit-btn:hover {
    background: var(--dn-primary-hover);
    transform:  translateY(-1px);
}

/* Layout split: main 2/3, sidebar 1/3 */
.dn-contact-detail-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap:     1.25rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .dn-contact-detail-layout {
        grid-template-columns: 1fr;
    }
}

.dn-contact-detail-main    { display: flex; flex-direction: column; gap: 0.75rem; }
.dn-contact-detail-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }

/* Card generica del dettaglio */
.dn-contact-detail-card {
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    padding:       1.5rem 1.75rem;
}

.dn-contact-detail-card-title {
    font-size:     1rem;
    font-weight:   var(--dn-font-weight-bold);
    color:         var(--dn-text-primary);
    margin:        0 0 1.25rem;
    line-height:   1.2;
}

/* Griglia informazioni personali: 2 colonne */
.dn-contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
}

@media (max-width: 640px) {
    .dn-contact-info-grid { grid-template-columns: 1fr; }
}

/* Singola voce info: icona + label + valore */
.dn-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.dn-contact-info-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    border-radius:   50%;
    flex-shrink:     0;
    margin-top:      0.1rem;
}

.dn-contact-info-icon--email   { background: #eff6ff; color: #3b82f6; }
.dn-contact-info-icon--phone   { background: #f0fdf4; color: var(--dn-primary); }
.dn-contact-info-icon--address { background: #fef3c7; color: #d97706; }
.dn-contact-info-icon--privacy { background: #fdf4ff; color: #9333ea; }

.dn-contact-info-label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    var(--dn-font-weight-bold);
    color:          var(--dn-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom:  0.2rem;
}

.dn-contact-info-value {
    display:     block;
    font-size:   0.9rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
    line-height: 1.4;
}

/* Input inline in modalità edit — stesso stile di .dn-form-input ma più compatto */
.dn-form-input--inline {
    width:         100%;
    height:        2.25rem;
    padding:       0 0.75rem;
    font-family:   var(--dn-font-family);
    font-size:     0.9rem;
    font-weight:   var(--dn-font-weight-bold);
    color:         var(--dn-text-primary);
    background:    var(--dn-bg);
    border:        1.5px solid #d1d5db;
    border-radius: var(--dn-border-radius);
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.dn-form-input--inline:focus {
    border-color:     var(--dn-primary);
    box-shadow:       0 0 0 3px color-mix(in srgb, var(--dn-primary) 12%, transparent);
    background-color: var(--dn-surface);
}

/* Griglia profilo acquirente/venditore: 2 colonne */
.dn-contact-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

.dn-contact-profile-field { display: flex; flex-direction: column; gap: 0.2rem; }
.dn-contact-profile-field--full { grid-column: 1 / -1; }

.dn-contact-profile-value {
    font-size:   0.9rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
    line-height: 1.4;
}

/* Zone preferite */
.dn-contact-profile-zones-wrapper { margin-top: 1rem; }

.dn-contact-zone-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.4rem;
}

.dn-contact-zone-tag {
    display:       inline-flex;
    align-items:   center;
    padding:       0.25rem 0.75rem;
    border:        1px solid var(--dn-border);
    border-radius: 999px;
    font-size:     0.8rem;
    color:         var(--dn-text-secondary);
    background:    var(--dn-bg);
}

/* Caratteristiche richieste */
.dn-contact-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

.dn-contact-feature-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.dn-contact-feature-check {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           1.1rem;
    height:          1.1rem;
    border:          1.5px solid var(--dn-border);
    border-radius:   3px;
    flex-shrink:     0;
    background:      var(--dn-surface);
}

.dn-contact-feature-check--on {
    background:   var(--dn-primary);
    border-color: var(--dn-primary);
}

.dn-contact-feature-label {
    font-size: 0.875rem;
    color:     var(--dn-text-primary);
}

/* Fonte lead sidebar */
.dn-contact-source-field { display: flex; flex-direction: column; gap: 0.2rem; }

/* Footer pannello lead — sticky in fondo */
.dn-lead-form-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.5rem;
    border-top:      1px solid var(--dn-border);
    background:      var(--dn-surface);
    box-shadow:      0 -4px 12px rgba(0,0,0,0.06);
    flex-shrink:     0;
    gap:             0.75rem;
}

.dn-lead-form-footer-left  { display: flex; align-items: center; gap: 0.5rem; }
.dn-lead-form-footer-right { display: flex; align-items: center; gap: 0.75rem; }

/* Input con icona inline (telefono, email, zona, budget) */
.dn-form-input-icon-wrapper {
    position: relative;
    display:  flex;
    align-items: center;
}

.dn-form-input-icon {
    position:       absolute;
    left:           0.75rem;
    width:          1rem;
    height:         1rem;
    color:          var(--dn-primary);
    pointer-events: none;
    flex-shrink:    0;
    opacity:        0.7;
}

.dn-form-input--with-icon {
    padding-left: 2.5rem !important;
    width: 100%;
}

/* ============================================================
   LEADS LIST — KPI cards + badge status/interesse + fonte tag
   ============================================================ */

/* Riga 4 card KPI */
.dn-lead-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .dn-lead-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.dn-lead-kpi-card {
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    padding:       1.25rem 1.5rem;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
}

.dn-lead-kpi-left {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.dn-lead-kpi-value {
    font-size:   2rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
    line-height: 1;
}

.dn-lead-kpi-label {
    font-size: 0.8rem;
    color:     var(--dn-text-secondary);
}

.dn-lead-kpi-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.5rem;
    height:          2.5rem;
    border-radius:   50%;
    flex-shrink:     0;
}

.dn-lead-kpi-icon--blue   { background: #eff6ff; color: #3b82f6; }
.dn-lead-kpi-icon--orange { background: #fff7ed; color: #f59e0b; }
.dn-lead-kpi-icon--green  { background: #f0fdf4; color: var(--dn-primary); }

/* Tag fonte (Sito web, Immobiliare.it, ecc.) */
.dn-lead-source-tag {
    display:       inline-flex;
    align-items:   center;
    padding:       0.2rem 0.65rem;
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    font-size:     0.8rem;
    color:         var(--dn-text-secondary);
    background:    var(--dn-surface);
    white-space:   nowrap;
}

/* Badge stato lead */
.dn-lead-status-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.2rem 0.65rem;
    border-radius: 999px;
    font-size:     0.78rem;
    font-weight:   var(--dn-font-weight-bold);
    white-space:   nowrap;
}

.dn-lead-status-badge--new        { background: #dbeafe; color: #1e40af; }
.dn-lead-status-badge--contacted  { background: #ede9fe; color: #5b21b6; }
.dn-lead-status-badge--qualified  { background: #fef9c3; color: #854d0e; }
.dn-lead-status-badge--converted  { background: #dcfce7; color: #166534; }
.dn-lead-status-badge--lost       { background: #fee2e2; color: #991b1b; }
.dn-lead-status-badge--inprogress { background: #fff7ed; color: #c2410c; }

/* Badge tipo interesse */
.dn-lead-interest-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.2rem 0.65rem;
    border-radius: 999px;
    font-size:     0.78rem;
    font-weight:   var(--dn-font-weight-bold);
    white-space:   nowrap;
}

.dn-lead-interest-badge--purchase { background: #f0fdf4; color: #166534; }
.dn-lead-interest-badge--sale     { background: #eff6ff; color: #1e40af; }
.dn-lead-interest-badge--rental   { background: #fff7ed; color: #c2410c; }

/* Bottoni icona nella colonna Azioni */
.dn-grid-icon-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    border:          1px solid var(--dn-border);
    border-radius:   var(--dn-border-radius);
    background:      transparent;
    color:           var(--dn-text-secondary);
    cursor:          pointer;
    transition:      border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    padding:         0;
    flex-shrink:     0;
}

.dn-grid-icon-btn:hover {
    border-color:     var(--dn-primary);
    color:            var(--dn-primary);
    background-color: color-mix(in srgb, var(--dn-primary) 6%, transparent);
}

/* ============================================================
   OVERRIDE DxComboBox (Select) dentro .dn-form-field
   ============================================================ */
.dn-form-field .dxbl-combo-box {
    --dxbl-combobox-bg:                   var(--dn-surface) !important;
    --dxbl-combobox-border-color:         #d1d5db !important;
    --dxbl-combobox-border-radius:        var(--dn-border-radius) !important;
    --dxbl-combobox-hover-border-color:   #9ca3af !important;
    --dxbl-combobox-focused-border-color: var(--dn-primary) !important;
    border:        1px solid #d1d5db !important;
    border-radius: var(--dn-border-radius) !important;
    background:    var(--dn-surface) !important;
    min-height:    2.625rem !important;
    box-shadow:    none !important;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dn-form-field .dxbl-combo-box:hover {
    border-color: #9ca3af !important;
}

.dn-form-field .dxbl-combo-box:focus-within {
    border-color: var(--dn-primary) !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--dn-primary) 12%, transparent) !important;
}

/* Input interno del combo */
.dn-form-field .dxbl-combo-box input,
.dn-form-field .dxbl-combo-box .dxbl-input-editor-input {
    font-family:  var(--dn-font-family) !important;
    font-size:    0.9rem !important;
    color:        var(--dn-text-primary) !important;
    background:   transparent !important;
    padding-left: 0.875rem !important;
}

.dn-form-field .dxbl-combo-box input::placeholder,
.dn-form-field .dxbl-combo-box .dxbl-input-editor-input::placeholder {
    color:      var(--dn-text-disabled) !important;
    font-style: normal !important;
}

/* Freccia dropdown — colore coerente */
.dn-form-field .dxbl-combo-box .dxbl-input-editor-dropdown-button {
    color:         var(--dn-text-secondary) !important;
    background:    transparent !important;
    border-left:   none !important;
    padding-right: 0.625rem !important;
}

.dn-form-field .dxbl-combo-box:focus-within .dxbl-input-editor-dropdown-button {
    color: var(--dn-primary) !important;
}

/* ── Dropdown popup list — font + bordo + shadow coerenti ──── */
.dxbl-combo-box-dropdown .dxbl-listbox,
.dxbl-listbox {
    font-family:   var(--dn-font-family) !important;
    font-size:     0.9rem !important;
    border:        1px solid #d1d5db !important;
    border-radius: var(--dn-border-radius) !important;
    box-shadow:    var(--dn-shadow-md) !important;
    background:    var(--dn-surface) !important;
}

/* Voce lista */
.dxbl-combo-box-dropdown .dxbl-listbox-item,
.dxbl-listbox-item {
    font-size:   0.9rem !important;
    color:       var(--dn-text-primary) !important;
    padding:     0.5rem 0.875rem !important;
    background:  transparent !important;
    transition:  background-color 0.12s ease !important;
}

/* Voce hover */
.dxbl-combo-box-dropdown .dxbl-listbox-item:hover,
.dxbl-listbox-item:hover {
    background: color-mix(in srgb, var(--dn-primary) 8%, var(--dn-surface)) !important;
    color:      var(--dn-text-primary) !important;
}

/* Voce selezionata */
.dxbl-combo-box-dropdown .dxbl-listbox-item.dxbl-listbox-item-selected,
.dxbl-listbox-item.dxbl-listbox-item-selected {
    background:  color-mix(in srgb, var(--dn-primary) 14%, var(--dn-surface)) !important;
    color:       var(--dn-primary) !important;
    font-weight: var(--dn-font-weight-bold) !important;
}

/* ================================================================
   CONTACT DETAIL PAGE — Ruoli e Caratteristiche
   ================================================================ */

/* Griglia selezione ruoli in edit mode */
.dn-roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .dn-roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dn-role-card {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0.6rem 0.5rem;
    border:          2px solid var(--dn-border);
    border-radius:   var(--dn-border-radius);
    cursor:          pointer;
    background:      var(--dn-surface);
    transition:      border-color 0.15s ease, background 0.15s ease;
    user-select:     none;
}

.dn-role-card:hover {
    border-color: var(--dn-primary);
    background:   color-mix(in srgb, var(--dn-primary) 5%, var(--dn-surface));
}

.dn-role-card--selected {
    border-color: var(--dn-primary);
    background:   color-mix(in srgb, var(--dn-primary) 8%, var(--dn-surface));
}

/* Griglia caratteristiche acquirente */
.dn-features-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.5rem 1rem;
}

@media (max-width: 640px) {
    .dn-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dn-feature-item {
    display:     flex;
    align-items: center;
}

/* Profilo — campo full-width */
.dn-contact-profile-field--full {
    grid-column: 1 / -1;
}

/* ============================================================
   STORICO — sezione collassabile in stile timeline
   Usata nel dettaglio Lead (e futura in Contact) per visualizzare
   le modifiche registrate in LELeadHistory / LEContactHistory.
   ============================================================ */

/* Header cliccabile della sezione collassabile */
.dn-history-section-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
    width:           100%;
    padding:         1rem 1.25rem;
    background:      var(--dn-surface);
    border:          1px solid var(--dn-border);
    border-radius:   var(--dn-border-radius);
    cursor:          pointer;
    font-family:     var(--dn-font-family);
    text-align:      left;
    transition:      border-color 0.15s ease, background-color 0.15s ease;
}

.dn-history-section-header:hover {
    background-color: var(--dn-bg);
    border-color:     var(--dn-text-disabled);
}

.dn-history-section-header--open {
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
    border-bottom-color:        transparent;
}

.dn-history-section-header-title {
    display:     flex;
    align-items: center;
    gap:         0.65rem;
}

.dn-history-section-header-title svg {
    width:       1.1rem;
    height:      1.1rem;
    color:       var(--dn-primary);
    flex-shrink: 0;
}

.dn-history-section-header-label {
    font-size:   0.95rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
}

.dn-history-section-header-count {
    display:       inline-flex;
    align-items:   center;
    padding:       0.15rem 0.5rem;
    border-radius: 999px;
    background:    var(--dn-accent);
    color:         var(--dn-primary);
    font-size:     0.72rem;
    font-weight:   var(--dn-font-weight-bold);
    margin-left:   0.2rem;
}

/* Chevron apertura/chiusura */
.dn-history-chevron {
    width:       1rem;
    height:      1rem;
    color:       var(--dn-text-secondary);
    transition:  transform 0.2s ease;
    flex-shrink: 0;
}

.dn-history-chevron--open {
    transform: rotate(180deg);
}

/* Corpo della sezione (aperto) */
.dn-history-section-body {
    background:                 var(--dn-surface);
    border:                     1px solid var(--dn-border);
    border-top:                 none;
    border-bottom-left-radius:  var(--dn-border-radius);
    border-bottom-right-radius: var(--dn-border-radius);
    padding:                    1.25rem 1.5rem 1.5rem;
}

/* Lista timeline */
.dn-history-timeline {
    list-style: none;
    margin:     0;
    padding:    0;
    position:   relative;
}

/* Linea verticale continua della timeline */
.dn-history-timeline::before {
    content:    '';
    position:   absolute;
    left:       0.5rem;
    top:        0.2rem;
    bottom:     0.2rem;
    width:      2px;
    background: var(--dn-border);
}

.dn-history-item {
    position:       relative;
    padding-left:   1.75rem;
    padding-bottom: 1.25rem;
}

.dn-history-item:last-child { padding-bottom: 0; }

/* Pallino sulla timeline */
.dn-history-item::before {
    content:       '';
    position:      absolute;
    left:          0.125rem;
    top:           0.35rem;
    width:         0.75rem;
    height:        0.75rem;
    border-radius: 50%;
    background:    var(--dn-surface);
    border:        2px solid var(--dn-primary);
    box-sizing:    border-box;
    z-index:       1;
}

.dn-history-item-header {
    display:       flex;
    align-items:   baseline;
    gap:           0.5rem;
    flex-wrap:     wrap;
    margin-bottom: 0.35rem;
}

.dn-history-item-field {
    font-size:   0.875rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
}

.dn-history-item-meta {
    font-size: 0.78rem;
    color:     var(--dn-text-secondary);
}

.dn-history-item-meta-sep {
    margin: 0 0.35rem;
    color:  var(--dn-text-disabled);
}

.dn-history-item-change {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
    font-size:   0.85rem;
    line-height: 1.5;
}

.dn-history-item-old {
    color:                 var(--dn-text-secondary);
    text-decoration:       line-through;
    text-decoration-color: color-mix(in srgb, var(--dn-text-secondary) 50%, transparent);
}

.dn-history-item-arrow {
    color:       var(--dn-text-disabled);
    font-weight: var(--dn-font-weight-bold);
}

.dn-history-item-new {
    color:       var(--dn-primary);
    font-weight: var(--dn-font-weight-bold);
}

.dn-history-empty {
    padding:    1.5rem 0;
    text-align: center;
    color:      var(--dn-text-secondary);
    font-size:  0.875rem;
}

/* ============================================================
   STORICO — variante COMPATTA per sidebar dettaglio contatto
   La card padre è stretta (~280px), quindi vecchio/nuovo non
   ci stanno affiancati: vanno impilati. Riduciamo anche
   padding e font per non far esondare la sidebar.
   ============================================================ */
.dn-history-timeline--compact {
    padding-left: 0.1rem;
}

.dn-history-timeline--compact .dn-history-item {
    padding-left:   1.5rem;
    padding-bottom: 1rem;
}

/* ============================================================
   STORICO — variante SCROLLABILE
   Cap di altezza per evitare che la timeline esondi quando lo
   storico cresce. Mostra ~3 item tipici e scrolla per il resto.
   max-height è espresso in rem per scalare con le preferenze
   del browser; è esposto come custom property per agevolare
   eventuali override puntuali (es. su modali più alti).

   La linea verticale .dn-history-timeline::before è position:absolute
   rispetto al <ul>: con overflow-y:auto scorre col contenuto,
   coprendo correttamente tutti i pallini anche oltre il fold.
   ============================================================ */
.dn-history-timeline--scrollable {
    --dn-history-max-height: 24rem;
    max-height:        var(--dn-history-max-height);
    overflow-y:        auto;
    padding-right:     0.4rem;        /* respiro per la scrollbar */
    scrollbar-gutter:  stable;        /* niente layout shift quando appare la barra */
    scrollbar-width:   thin;          /* Firefox */
    scrollbar-color:   var(--dn-border) transparent;
}

/* Scrollbar Webkit — stile slim coerente con il design */
.dn-history-timeline--scrollable::-webkit-scrollbar        { width: 6px; }
.dn-history-timeline--scrollable::-webkit-scrollbar-track  { background: transparent; }
.dn-history-timeline--scrollable::-webkit-scrollbar-thumb  {
    background:    var(--dn-border);
    border-radius: 999px;
}
.dn-history-timeline--scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--dn-text-disabled);
}

/* Vecchio sopra, freccia sotto, nuovo in fondo — niente flex-wrap orizzontale */
.dn-history-item-change--stacked {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
    font-size:      0.82rem;
    line-height:    1.4;
    word-break:     break-word;
}

.dn-history-item-change--stacked .dn-history-item-arrow {
    display: none; /* la freccia inline non serve nel layout impilato */
}

/* Footer item: data + autore con icona calendario */
.dn-history-item-footer {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    margin-top:  0.35rem;
    font-size:   0.75rem;
    color:       var(--dn-text-secondary);
}

.dn-history-item-footer svg {
    width:       0.85rem;
    height:      0.85rem;
    color:       var(--dn-text-secondary);
    flex-shrink: 0;
}

.dn-history-item-footer-author {
    color:       var(--dn-text-secondary);
    font-weight: var(--dn-font-weight-bold);
}

/* Link "Vai al Lead originale" nella card Fonte Lead */
.dn-source-lead-link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    margin-top:      1rem;
    padding:         0.5rem 0.75rem;
    background:      color-mix(in srgb, var(--dn-primary) 8%, var(--dn-surface));
    border:          1px solid color-mix(in srgb, var(--dn-primary) 25%, var(--dn-border));
    border-radius:   var(--dn-border-radius);
    color:           var(--dn-primary);
    font-size:       0.82rem;
    font-weight:     var(--dn-font-weight-bold);
    text-decoration: none;
    transition:      background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.dn-source-lead-link:hover {
    background:   color-mix(in srgb, var(--dn-primary) 14%, var(--dn-surface));
    border-color: var(--dn-primary);
    transform:    translateY(-1px);
    text-decoration: none;
}

.dn-source-lead-link svg {
    width:       0.85rem;
    height:      0.85rem;
    flex-shrink: 0;
}

/* ============================================================
   PRODUCTS LIST — card immobile
   v4.75.0 — Layout a card per la pagina /immobili.
   Globale (non scoped) per coerenza con il resto del progetto e
   per consentire futuro riuso (es. dashboard "ultimi immobili",
   ricerca cross-modulo). Nessun colore hardcoded — tutte le
   tinte usano var(--dn-*) o color-mix sulla primaria.
   ============================================================ */

/* Wrapper della lista card — flex column con gap */
.dn-product-list {
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
    min-height:     0;
}

/* Card singola — 4 zone in flex row: cover, body, mid-info, price */
.dn-product-card {
    display:         grid;
    grid-template-columns: 220px 1fr 200px;
    gap:             0;
    background:      var(--dn-surface);
    border:          1px solid var(--dn-border);
    border-radius:   var(--dn-border-radius-lg);
    overflow:        hidden;
    box-shadow:      var(--dn-shadow-sm);
    transition:      border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    cursor:          pointer;
}

.dn-product-card:hover {
    border-color: var(--dn-primary);
    box-shadow:   var(--dn-shadow-md);
    transform:    translateY(-1px);
}

@media (max-width: 900px) {
    .dn-product-card {
        grid-template-columns: 1fr;
    }
}

/* ── Zona 1: cover ─────────────────────────────────────────── */
.dn-product-card-cover {
    position:       relative;
    background:     var(--dn-bg);
    aspect-ratio:   4 / 3;
    overflow:       hidden;
}

.dn-product-card-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Placeholder cover assente — icona casa centrata */
.dn-product-card-cover-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--dn-text-disabled);
    background:      color-mix(in srgb, var(--dn-primary) 4%, var(--dn-bg));
}

.dn-product-card-cover-placeholder svg {
    width:  3rem;
    height: 3rem;
    opacity: 0.55;
}

/* ── Zona 2: body centrale (titolo + indirizzo + badge + meta + footer) ─ */
.dn-product-card-body {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    padding:        1.25rem 1.5rem;
    min-width:      0;
}

.dn-product-card-title {
    font-size:    1.15rem;
    font-weight:  var(--dn-font-weight-bold);
    color:        var(--dn-text-primary);
    margin:       0;
    line-height:  1.3;
    /* tronca su una sola riga con ellipsis se troppo lungo */
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.dn-product-card-address {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.85rem;
    color:       var(--dn-text-secondary);
}

.dn-product-card-address svg {
    width:       0.9rem;
    height:      0.9rem;
    flex-shrink: 0;
    color:       var(--dn-primary);
    opacity:     0.8;
}

/* Riga badge (Stato + Tipologia) */
.dn-product-card-badges {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.4rem;
    margin-top: 0.15rem;
}

/* Badge generico immobile — pill con sfondo tenue */
.dn-product-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.22rem 0.7rem;
    border-radius: 999px;
    font-size:     0.78rem;
    font-weight:   var(--dn-font-weight-bold);
    white-space:   nowrap;
    line-height:   1.4;
}

/* Badge Stato — un colore per ciascun ProductStatusVO */
.dn-product-badge--underacquisition { background: #fff7ed; color: #c2410c; }
.dn-product-badge--activemandate    { background: #dcfce7; color: #166534; }
.dn-product-badge--offerinprogress  { background: #fef9c3; color: #854d0e; }
.dn-product-badge--sold             { background: #dbeafe; color: #1e40af; }
.dn-product-badge--rented           { background: #dbeafe; color: #1e40af; }
.dn-product-badge--archived         { background: var(--dn-border-light); color: var(--dn-text-secondary); }

/* Badge Tipologia — toni neutri/tenui blu */
.dn-product-badge--type {
    background: #eff6ff;
    color:      #1e40af;
}

/* Riga meta: m² · locali · piano */
.dn-product-card-meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         1.25rem;
    margin-top:  0.35rem;
    font-size:   0.85rem;
    color:       var(--dn-text-secondary);
}

.dn-product-card-meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
}

.dn-product-card-meta-item svg {
    width:       0.95rem;
    height:      0.95rem;
    flex-shrink: 0;
    color:       var(--dn-text-disabled);
}

.dn-product-card-meta-value {
    color:       var(--dn-text-primary);
    font-weight: var(--dn-font-weight-bold);
}

/* ── Footer della card body — 3 colonne info: proprietario / conservazione / incarico ── */
.dn-product-card-footer {
    display:        grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:            1rem;
    margin-top:     0.75rem;
    padding-top:    0.75rem;
    border-top:     1px solid var(--dn-border);
}

@media (max-width: 640px) {
    .dn-product-card-footer {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

.dn-product-card-footer-col {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    min-width:      0;
}

.dn-product-card-footer-label {
    font-size:      0.7rem;
    font-weight:    var(--dn-font-weight-bold);
    color:          var(--dn-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dn-product-card-footer-value {
    font-size:   0.85rem;
    color:       var(--dn-text-primary);
    line-height: 1.35;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.dn-product-card-footer-value--muted {
    color: var(--dn-text-secondary);
    font-style: italic;
}

.dn-product-card-footer-sub {
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   0.78rem;
    color:       var(--dn-text-secondary);
}

.dn-product-card-footer-sub svg {
    width:       0.8rem;
    height:      0.8rem;
    flex-shrink: 0;
    opacity:     0.7;
}

/* ── Zona 3: prezzo + bottone modifica ──────────────────────── */
.dn-product-card-price-col {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    justify-content: space-between;
    padding:         1.25rem 1.5rem;
    border-left:     1px solid var(--dn-border);
    background:      color-mix(in srgb, var(--dn-primary) 2%, var(--dn-surface));
    text-align:      right;
    gap:             0.75rem;
}

@media (max-width: 900px) {
    .dn-product-card-price-col {
        border-left:     none;
        border-top:      1px solid var(--dn-border);
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
        text-align:      left;
    }
}

.dn-product-card-price {
    font-size:    1.5rem;
    font-weight:  var(--dn-font-weight-bold);
    color:        var(--dn-primary);
    line-height:  1.1;
    white-space:  nowrap;
}

.dn-product-card-price--muted {
    color:       var(--dn-text-disabled);
    font-size:   1.1rem;
    font-weight: var(--dn-font-weight-bold);
}

.dn-product-card-price-label {
    font-size:  0.78rem;
    color:      var(--dn-text-secondary);
    margin-top: 0.15rem;
}

/* Bottone Modifica nella card — verde pieno, simile a dn-contact-detail-edit-btn */
.dn-product-card-edit-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    height:          2.25rem;
    padding:         0 1rem;
    background:      var(--dn-primary);
    color:           var(--dn-primary-text);
    border:          none;
    border-radius:   var(--dn-border-radius);
    font-family:     var(--dn-font-family);
    font-size:       0.825rem;
    font-weight:     var(--dn-font-weight-bold);
    cursor:          pointer;
    white-space:     nowrap;
    flex-shrink:     0;
    box-shadow:      0 2px 6px color-mix(in srgb, var(--dn-primary) 25%, transparent);
    transition:      background-color 0.15s ease, transform 0.12s ease;
}

.dn-product-card-edit-btn:hover {
    background: var(--dn-primary-hover);
    transform:  translateY(-1px);
}

.dn-product-card-edit-btn svg {
    width:       0.95rem;
    height:      0.95rem;
    flex-shrink: 0;
}

/* ── Stato vuoto della lista immobili ───────────────────────── */
.dn-product-list-empty {
    padding:         3rem 1.5rem;
    text-align:      center;
    color:           var(--dn-text-secondary);
    font-size:       0.9rem;
    background:      var(--dn-surface);
    border:          1px dashed var(--dn-border);
    border-radius:   var(--dn-border-radius-lg);
}

/* ============================================================
   PRODUCT NEW PAGE — Upload zone foto e documenti
   v4.75.2 — Pagina /immobili/new.
   Globale (non scoped) per coerenza con il resto del progetto.
   Le zone di upload sono <label> cliccabili che contengono un
   <InputFile> nascosto: tutto il box è cliccabile e apre il file
   picker. Le miniature usano data: URL inline (nessun JS interop,
   nessun URL.createObjectURL).
   ============================================================ */

.dn-product-upload-zone {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.4rem;
    padding:         2rem 1.5rem;
    border:          2px dashed var(--dn-border);
    border-radius:   var(--dn-border-radius);
    background:      var(--dn-bg);
    color:           var(--dn-text-secondary);
    text-align:      center;
    cursor:          pointer;
    transition:      border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.dn-product-upload-zone:hover {
    border-color:     var(--dn-primary);
    background-color: color-mix(in srgb, var(--dn-primary) 4%, var(--dn-surface));
    color:            var(--dn-text-primary);
}

.dn-product-upload-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.5rem;
    height:          2.5rem;
    border-radius:   50%;
    background:      color-mix(in srgb, var(--dn-primary) 10%, var(--dn-surface));
    color:           var(--dn-primary);
}

.dn-product-upload-icon svg {
    width:  1.25rem;
    height: 1.25rem;
}

.dn-product-upload-text {
    font-size:   0.9rem;
    font-weight: var(--dn-font-weight-bold);
    color:       var(--dn-text-primary);
}

.dn-product-upload-hint {
    font-size: 0.78rem;
    color:     var(--dn-text-secondary);
}

/* Anteprima foto — griglia di miniature responsive */
.dn-product-upload-preview {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:                   0.75rem;
    margin-top:            1rem;
}

.dn-product-upload-thumb {
    position:        relative;
    background:      var(--dn-bg);
    border:          1px solid var(--dn-border);
    border-radius:   var(--dn-border-radius);
    overflow:        hidden;
    display:         flex;            /* v4.89.9 — layout colonna per ospitare il selettore categoria sotto l'immagine */
    flex-direction:  column;
}

.dn-product-upload-thumb img {
    width:        100%;
    aspect-ratio: 4 / 3;               /* v4.89.9 — spostato qui da .dn-product-upload-thumb */
    object-fit:   cover;
    display:      block;
}

.dn-product-upload-thumb-cover {
    position:      absolute;
    top:           0.4rem;
    left:          0.4rem;
    padding:       0.18rem 0.55rem;
    background:    var(--dn-primary);
    color:         var(--dn-primary-text);
    border-radius: 999px;
    font-size:     0.7rem;
    font-weight:   var(--dn-font-weight-bold);
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
}

.dn-product-upload-thumb-remove {
    position:        absolute;
    top:             0.4rem;
    right:           0.4rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           1.5rem;
    height:          1.5rem;
    border:          none;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.55);
    color:           #ffffff;
    cursor:          pointer;
    transition:      background-color 0.15s ease, transform 0.12s ease;
}

.dn-product-upload-thumb-remove:hover {
    background: rgba(220, 38, 38, 0.85);
    transform:  scale(1.1);
}

.dn-product-upload-thumb-name {
    position:      absolute;
    bottom:        0;
    left:          0;
    right:         0;
    padding:       0.35rem 0.5rem;
    background:    linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
    color:         #ffffff;
    font-size:     0.72rem;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* v4.89.9 — Selettore di categoria sotto ogni thumb foto in ProductNewPage.
   Posizionato fuori dall'area immagine (flusso normale, sotto). */
.dn-product-upload-thumb-category {
    padding:    0.4rem;
    border-top: 1px solid var(--dn-border);
    background: var(--dn-surface);
}

.dn-product-upload-thumb-category .dn-native-select {
    font-size:      0.75rem;
    padding-top:    0.3rem;
    padding-bottom: 0.3rem;
    height:         auto;
}

/* Riposiziono il nome file sopra l'immagine (overlay in alto a destra)
   per non collidere visivamente con il selettore in basso.
   Nota: solo quando esiste .dn-product-upload-thumb-category come fratello. */
.dn-product-upload-thumb:has(.dn-product-upload-thumb-category) .dn-product-upload-thumb-name {
    bottom:     auto;
    top:        0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

/* v4.89.10 — Selettore categoria foto nell'overlay dell'hero in
   ProductDetailPage. Si integra con .dn-product-hero-edit-overlay
   (flex-direction: column): appare come quarto elemento sotto
   badge/bottoni, con stile coerente (sfondo bianco semitrasparente). */
.dn-product-hero-category-select {
    min-width:        180px;
    background:       rgba(255, 255, 255, 0.95);
    border-radius:    6px;
    box-shadow:       0 2px 6px rgba(0, 0, 0, 0.15);
    backdrop-filter:  blur(4px);
}

.dn-product-hero-category-select .dn-native-select {
    font-size:      0.8rem;
    padding-top:    0.4rem;
    padding-bottom: 0.4rem;
    background:     transparent;
    border:         none;
    height:         auto;
}

/* Lista documenti — righe inline */
.dn-product-upload-doc-list {
    list-style:     none;
    margin:         1rem 0 0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.dn-product-upload-doc-item {
    display:       flex;
    align-items:   center;
    gap:           0.65rem;
    padding:       0.55rem 0.85rem;
    background:    var(--dn-bg);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
}

.dn-product-upload-doc-name {
    flex:          1;
    font-size:     0.875rem;
    color:         var(--dn-text-primary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    min-width:     0;
}

.dn-product-upload-doc-size {
    font-size:   0.78rem;
    color:       var(--dn-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────
   v4.89.12 — Tre dropzone affiancate (Foto / Planimetrie / Documenti)
   Grid responsive 3 colonne su desktop, stack su mobile.
   Le singole dropzone (.dn-product-upload-zone) sono già stilate sopra;
   qui aggiungiamo solo il wrapper e i titoli colonna/preview.
   ────────────────────────────────────────────────────────────────── */

.dn-product-upload-zones {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    margin-top:            0.75rem;
}

@media (max-width: 768px) {
    .dn-product-upload-zones {
        grid-template-columns: 1fr;
    }
}

.dn-product-upload-zone-col {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    min-width:      0;            /* permette il truncate del titolo se serve */
}

.dn-product-upload-zone-col .dn-product-upload-zone {
    /* Le dropzone interne riempiono la colonna in altezza */
    flex:    1 1 auto;
    padding: 1.5rem 1rem;          /* leggermente più compatte rispetto al default full-width */
}

.dn-product-upload-zone-title {
    font-size:     0.85rem;
    font-weight:   600;
    color:         var(--dn-text-primary);
    margin:        0;
    padding:       0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Titolo sopra ogni gruppo di preview ("Foto caricate (3)", ecc.) */
.dn-product-upload-preview-title {
    font-size:     0.9rem;
    font-weight:   600;
    color:         var(--dn-text-primary);
    margin:        1.25rem 0 0.5rem 0;
    padding:       0;
}

/* Wrapper compatto del selettore FileType nella riga documento */
.dn-product-upload-doc-type {
    flex-shrink: 0;
    min-width:   160px;
    max-width:   200px;
}

.dn-product-upload-doc-type .dn-native-select {
    height:      32px;
    font-size:   0.8rem;
    padding:     0 1.75rem 0 0.6rem;   /* lascia spazio alla freccia del wrapper */
}

@media (max-width: 768px) {
    /* Su mobile la riga documento si trasforma a wrap: il picker va a capo
       sotto il nome file e occupa la full width. */
    .dn-product-upload-doc-type {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Placeholder per planimetrie PDF (non visualizzabili come <img>) */
.dn-product-upload-thumb-pdf {
    width:            100%;
    aspect-ratio:     4 / 3;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       var(--dn-bg);
    color:            var(--dn-text-secondary);
    border-radius:    var(--dn-border-radius);
}

.dn-product-upload-thumb-pdf svg {
    width:  48px;
    height: 48px;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — /immobili/{oid}
   v4.75.3
   Layout: hero foto + grid 2 colonne (info-cards | sidebar)
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO FOTO ────────────────────────────────────────────────────── */
.dn-product-hero {
    position:      relative;
    width:         100%;
    aspect-ratio:  16 / 9;
    max-height:    520px;
    background:    var(--dn-bg);
    border-radius: var(--dn-border-radius);
    overflow:      hidden;
    margin-bottom: 1.5rem;
}

.dn-product-hero-img {
    width:        100%;
    height:       100%;
    object-fit:   cover;
    display:      block;
}

.dn-product-hero-empty {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    color:           var(--dn-text-secondary);
    background:      var(--dn-bg);
}

.dn-product-hero-empty svg {
    width:  64px;
    height: 64px;
    color:  var(--dn-text-tertiary);
}

.dn-product-hero-empty span {
    font-size: 0.95rem;
}

/* ── BADGE STATO IN ALTO A DESTRA ─────────────────────────────────── */
.dn-product-hero-badge {
    position:    absolute;
    top:         1rem;
    right:       1rem;
    padding:     0.35rem 0.85rem;
    border-radius: 999px;
    font-size:   0.82rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index:     2;
}

/* ── FRECCE CAROSELLO ─────────────────────────────────────────────── */
.dn-product-hero-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           40px;
    height:          40px;
    border:          none;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.85);
    color:           var(--dn-text-primary);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 8px rgba(0, 0, 0, 0.15);
    transition:      background 0.15s ease, transform 0.15s ease;
    z-index:         2;
}

.dn-product-hero-arrow:hover {
    background: rgba(255, 255, 255, 1);
    transform:  translateY(-50%) scale(1.05);
}

.dn-product-hero-arrow--prev {
    left: 1rem;
}

.dn-product-hero-arrow--next {
    right: 1rem;
}

/* ── INDICATORI A PUNTINI ────────────────────────────────────────── */
.dn-product-hero-dots {
    position:        absolute;
    bottom:          1rem;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    gap:             0.4rem;
    align-items:     center;
    z-index:         2;
    background:      rgba(0, 0, 0, 0.35);
    padding:         0.4rem 0.7rem;
    border-radius:   999px;
    backdrop-filter: blur(4px);
}

.dn-product-hero-dot {
    width:         8px;
    height:        8px;
    border:        none;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.55);
    padding:       0;
    cursor:        pointer;
    transition:    background 0.15s ease, width 0.15s ease;
}

.dn-product-hero-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}

.dn-product-hero-dot--active {
    background: rgba(255, 255, 255, 1);
    width:      24px;
    border-radius: 4px;
}

/* Puntino della foto attualmente impostata come copertina.
   Verde primary brand + alone bianco semi-trasparente per stagliarsi sullo
   sfondo scuro della pillola dots. Può combinarsi con --active (la stessa
   classe può avere entrambe quando l'utente sta guardando la cover):
   --active fornisce width:24px, --cover fornisce il background verde.
   v4.77.1 — introdotto per dare un riferimento visivo costante alla cover
   anche quando l'utente naviga altre foto del carosello. */
.dn-product-hero-dot--cover {
    background: var(--dn-primary);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* ── OVERLAY EDIT MODE (carosello) ─────────────────────────── */
.dn-product-hero-edit-overlay {
    position:       absolute;
    top:            1rem;
    left:           1rem;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    align-items:    flex-start;
    z-index:        2;
}

.dn-product-hero-edit-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.45rem 0.75rem;
    background:      rgba(255, 255, 255, 0.95);
    color:           var(--dn-text-primary);
    border:          none;
    border-radius:   6px;
    font-size:       0.8rem;
    font-weight:     500;
    cursor:          pointer;
    box-shadow:      0 2px 6px rgba(0, 0, 0, 0.15);
    transition:      background 0.15s ease, transform 0.15s ease;
    backdrop-filter: blur(4px);
}

.dn-product-hero-edit-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform:  translateY(-1px);
}

.dn-product-hero-edit-btn--danger {
    background: rgba(239, 68, 68, 0.95);
    color:      #ffffff;
}

.dn-product-hero-edit-btn--danger:hover {
    background: rgba(220, 38, 38, 1);
}

.dn-product-hero-edit-badge {
    display:         inline-flex;
    align-items:     center;
    padding:         0.35rem 0.75rem;
    background:      var(--dn-primary);
    color:           #ffffff;
    border-radius:   999px;
    font-size:       0.78rem;
    font-weight:     600;
    box-shadow:      0 2px 6px rgba(0, 0, 0, 0.15);
}

.dn-product-hero-edit-badge--info {
    background: #3b82f6;
}

/* ── GRID 2 COLONNE: main + aside ─────────────────────────────────── */
.dn-product-detail-grid {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   1.5rem;
    align-items:           start;
}

@media (max-width: 1100px) {
    .dn-product-detail-grid {
        grid-template-columns: 1fr;
    }
}

.dn-product-detail-main,
.dn-product-detail-aside {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* ── CARD GENERICA DI DETTAGLIO ───────────────────────────────────── */
.dn-product-detail-card {
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    padding:       1.25rem;
}

.dn-product-detail-card-title {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--dn-text-primary);
    margin:      0 0 1rem 0;
}

.dn-product-detail-card-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   1rem;
}

.dn-product-detail-card-header .dn-product-detail-card-title {
    margin: 0;
}

/* ── KPI "Dettagli Immobile" (4 statistiche) ─────────────────────── */
.dn-product-stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1rem;
}

@media (max-width: 800px) {
    .dn-product-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dn-product-stat {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.dn-product-stat-icon {
    width:           40px;
    height:          40px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.dn-product-stat-icon svg {
    width:  20px;
    height: 20px;
}

.dn-product-stat-icon--green {
    background: #d1fae5;
    color:      #047857;
}

.dn-product-stat-icon--blue {
    background: #dbeafe;
    color:      #1e40af;
}

.dn-product-stat-icon--purple {
    background: #ede9fe;
    color:      #6d28d9;
}

.dn-product-stat-label {
    font-size:     0.78rem;
    color:         var(--dn-text-secondary);
    margin-bottom: 0.15rem;
}

.dn-product-stat-value {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--dn-text-primary);
}

/* ── PILLOLE "Caratteristiche e Dotazioni" ────────────────────────── */
.dn-product-features {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.65rem;
}

@media (max-width: 600px) {
    .dn-product-features {
        grid-template-columns: 1fr;
    }
}

.dn-product-feature {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
    padding:         0.65rem 0.85rem;
    background:      var(--dn-bg);
    border:          1px solid var(--dn-border);
    border-radius:   8px;
    font-size:       0.9rem;
}

.dn-product-feature--info {
    justify-content: flex-start;
}

.dn-product-feature-label {
    color: var(--dn-text-primary);
}

.dn-product-feature--off .dn-product-feature-label {
    color: var(--dn-text-tertiary);
}

.dn-product-feature-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
    background:    #d1d5db; /* grigio = assente */
}

.dn-product-feature--on .dn-product-feature-dot {
    background: var(--dn-primary); /* verde = presente */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ── COPPIE LABEL/VALUE "Informazioni Aggiuntive/Finanziarie" ──── */
.dn-product-info-pairs {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem 1.5rem;
}

@media (max-width: 600px) {
    .dn-product-info-pairs {
        grid-template-columns: 1fr;
    }
}

.dn-product-info-pair {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.dn-product-info-pair--full {
    grid-column: 1 / -1;
}

.dn-product-info-label {
    font-size: 0.82rem;
    color:     var(--dn-text-secondary);
}

.dn-product-info-value {
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--dn-text-primary);
}

.dn-product-info-notes {
    margin:      0;
    color:       var(--dn-text-primary);
    line-height: 1.55;
    white-space: pre-wrap; /* mantiene a capo dell'utente */
}

.dn-product-placeholder {
    padding:    2rem 1rem;
    text-align: center;
    color:      var(--dn-text-secondary);
    font-size:  0.9rem;
    background: var(--dn-bg);
    border-radius: 8px;
}

/* ── CARD PREZZO (sidebar) ───────────────────────────────────────── */
.dn-product-price-card {
    background: var(--dn-surface);
}

.dn-product-price-label {
    font-size:     0.85rem;
    color:         var(--dn-text-secondary);
    display:       block;
    margin-bottom: 0.4rem;
}

.dn-product-price-value {
    font-size:     1.85rem;
    font-weight:   700;
    color:         var(--dn-primary);
    line-height:   1.1;
    margin-bottom: 0.85rem;
}

.dn-product-price-value--muted {
    color: var(--dn-text-tertiary);
}

.dn-product-price-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    font-size:      0.85rem;
    color:          var(--dn-text-secondary);
}

.dn-product-price-meta-row {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}

.dn-product-price-meta-row svg {
    width:  14px;
    height: 14px;
    flex-shrink: 0;
}

.dn-product-price-meta-row strong {
    color:       var(--dn-text-primary);
    font-weight: 600;
}

.dn-product-price-meta-row--muted {
    color: var(--dn-text-tertiary);
}

/* ── CARD PROPRIETARI (sidebar) ──────────────────────────────────── */
.dn-product-owner-list {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.dn-product-owner-item {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.65rem;
    background:    var(--dn-bg);
    border:        1px solid var(--dn-border);
    border-radius: 8px;
    cursor:        pointer;
    text-align:    left;
    width:         100%;
    transition:    background 0.15s ease, border-color 0.15s ease;
}

.dn-product-owner-item:hover {
    background:   var(--dn-surface);
    border-color: var(--dn-primary);
}

.dn-product-owner-avatar {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    background:      #d1fae5;
    color:           #047857;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       0.85rem;
    flex-shrink:     0;
}

.dn-product-owner-info {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    min-width:      0;
    flex:           1 1 auto;
}

.dn-product-owner-name {
    font-size:   0.92rem;
    font-weight: 600;
    color:       var(--dn-text-primary);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.dn-product-owner-link {
    font-size: 0.78rem;
    color:     var(--dn-text-secondary);
}

/* ═════════════════════════════════════════════════════════════════════════════════════
   PAGINATORE RIUSABILE — v4.78.0
   Componente <DnPaginator /> in Components/Shared/.
   Layout: nav (frecce + numeri) | selettore size | label "X-Y di Z".
   Su desktop tutto su una riga, su mobile va in colonna centrato.
   ═════════════════════════════════════════════════════════════════════════════════════ */
.dn-paginator {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
    margin-top:      1.5rem;
    padding:         0.75rem 1rem;
    background:      var(--dn-surface);
    border:          1px solid var(--dn-border);
    border-radius:   var(--dn-border-radius);
    font-size:       0.85rem;
    color:           var(--dn-text-primary);
}

.dn-paginator-nav {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    flex-wrap:   wrap;
}

.dn-paginator-btn {
    min-width:       32px;
    height:          32px;
    padding:         0 0.5rem;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--dn-surface);
    color:           var(--dn-text-primary);
    border:          1px solid var(--dn-border);
    border-radius:   6px;
    font-size:       0.85rem;
    font-weight:     500;
    cursor:          pointer;
    transition:      background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dn-paginator-btn:hover:not(:disabled) {
    background:    var(--dn-bg);
    border-color:  var(--dn-text-secondary);
}

.dn-paginator-btn:disabled {
    cursor:    not-allowed;
    opacity:   0.45;
}

.dn-paginator-btn--active {
    background:    var(--dn-primary);
    color:         var(--dn-primary-text);
    border-color:  var(--dn-primary);
    cursor:        default;
    opacity:       1; /* override del :disabled di sopra: lo stato attivo è informativo, non greyed-out */
}

.dn-paginator-btn--active:disabled {
    opacity: 1;
}

.dn-paginator-btn--arrow {
    /* le frecce ereditano lo stile base; modifier mantenuto per future personalizzazioni */
}

.dn-paginator-ellipsis {
    min-width:       20px;
    text-align:      center;
    color:           var(--dn-text-secondary);
    user-select:     none;
    padding:         0 0.2rem;
}

.dn-paginator-size {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.dn-paginator-size-label {
    color:       var(--dn-text-secondary);
    font-size:   0.85rem;
    margin:      0;
}

.dn-paginator-size-select {
    /* L'inner select usa .dn-native-select esistente. Qui solo un width fisso
       per allineare il chevron e mantenere le proporzioni con la riga. */
    min-width: 80px;
}

.dn-paginator-info {
    color:       var(--dn-text-secondary);
    font-size:   0.82rem;
    white-space: nowrap;
}

/* Mobile: stack verticale centrato */
@media (max-width: 700px) {
    .dn-paginator {
        flex-direction: column;
        gap:            0.75rem;
    }

    .dn-paginator-nav {
        justify-content: center;
    }
}


/* ============================================================
   CALENDAR (Agenda) — override DxScheduler

   Questa regola DEVE stare in site.css (globale) e non nel
   CalendarPage.razor.css scoped. Motivo: la classe è passata
   come CssClass="..." al <DxScheduler>, e DevExpress la attacca
   al <div> root del componente renderizzato internamente. Quel
   div NON ha l'attributo b-XXXX che lo scoped CSS richiede per
   matchare, quindi la regola scoped non si applicherebbe mai.
   Pattern documentato in GUIDA_SVILUPPO_ADMINISTRATOR §3.4.
   ============================================================ */

.dn-cal-scheduler {
    min-height:    520px;
    background:    var(--dn-surface);
    border:        1px solid var(--dn-border);
    border-radius: var(--dn-border-radius);
    box-shadow:    var(--dn-shadow-sm);
    overflow:      hidden;
    margin-bottom: 1rem;
}

/* ──────────────────────────────────────────────────────────── */
/*  Template card eventi (Vertical / Horizontal)              */
/* ──────────────────────────────────────────────────────────── */

/*
   Le card sono renderizzate da DevExpress dentro template Blazor:
   vivono fuori dal boundary scoped del componente, quindi le regole
   vanno qui in site.css.
   background-color + border-left-color sono inline (calcolati da
   ColorHex categoria + ColorHex agente).
*/

/* VERTICAL — Day / Week (v4.87.0 — compatta sempre)
   Pattern card + tooltip: la card mostra solo orario + titolo + agente,
   i dettagli ricchi (contatto, immobile, note) vivono nel tooltip al
   click. Layout robusto a qualsiasi dimensione (slot da 30 min, Week
   stretta, sovrapposizioni).

   v4.87.2 — dimensioni compattate per far entrare 3-4 righe in 60 min
   senza overflow: padding ridotto, line-height ridotto, font size
   leggermente più piccolo. */
.dn-cal-event-vert {
    height:            100%;
    padding:           0.2rem 0.4rem;
    border-left:       4px solid #999999; /* override inline da componente */
    border-radius:     5px;
    box-shadow:        0 1px 2px rgba(0, 0, 0, 0.06);
    color:             var(--dn-text-primary);
    line-height:       1.15;
    overflow:          hidden;
    display:           flex;
    flex-direction:    column;
    gap:               0.05rem;
}

.dn-cal-event-vert-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             0.4rem;
    flex-shrink:     0;
}

.dn-cal-event-vert-time {
    font-size:   0.7rem;
    font-weight: 700;
    color:       var(--dn-text-primary);
    white-space: nowrap;
}

.dn-cal-event-vert-agent {
    font-size:     0.66rem;
    font-weight:   500;
    color:         var(--dn-text-secondary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     65%;
    text-align:    right;
}

.dn-cal-event-vert-title {
    font-size:     0.76rem;
    font-weight:   600;
    color:         var(--dn-text-primary);
    line-height:   1.2;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex:          0 0 auto;
    min-height:    0;
}

/* Righe extra (contatto / immobile) — v4.87.1 / compattate in v4.87.2
   Mostrate condizionalmente in base alla durata dell'appuntamento.
   Una riga = icona 11px + testo 0.66rem in ellipsis. */
.dn-cal-event-vert-row {
    display:       flex;
    align-items:   center;
    gap:           0.25rem;
    font-size:     0.66rem;
    line-height:   1.15;
    color:         var(--dn-text-primary);
    opacity:       0.85;
    overflow:      hidden;
    white-space:   nowrap;
    flex-shrink:   0;
}

.dn-cal-event-vert-row svg {
    width:       11px;
    height:      11px;
    flex-shrink: 0;
    color:       var(--dn-text-secondary);
}

.dn-cal-event-vert-row span {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    min-width:     0;
}

/* HORIZONTAL — Month + all-day */
.dn-cal-event-horiz {
    display:         flex;
    align-items:     center;
    gap:             0.35rem;
    padding:         0.15rem 0.45rem;
    border-left:     3px solid #999999; /* override inline da componente */
    border-radius:   4px;
    color:           var(--dn-text-primary);
    font-size:       0.72rem;
    line-height:     1.2;
    overflow:        hidden;
    white-space:     nowrap;
    box-shadow:      0 1px 1px rgba(0, 0, 0, 0.05);
}

.dn-cal-event-horiz-time {
    font-weight: 600;
    color:       var(--dn-text-secondary);
    flex-shrink: 0;
}

.dn-cal-event-horiz-title {
    font-weight:   700;
    color:         var(--dn-text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
}

.dn-cal-event-horiz-agent {
    color:         var(--dn-text-secondary);
    overflow:      hidden;
    text-overflow: ellipsis;
    font-weight:   500;
}

/* ────────────────────────────────────────────────────────── */
/*  Tooltip dettagli appuntamento — v4.87.0                  */
/* ────────────────────────────────────────────────────────── */

/*
   Mostrato al click sull'appuntamento via AppointmentTooltipTemplate.
   Stesso pattern delle card: il template DevExpress vive fuori dallo
   scope CSS dei .razor.css → regole globali in site.css.

   Larghezza min/max: il popup DevExpress wrappa il contenuto, quindi
   noi gestiamo solo la dimensione interna. 280-360px è una buona
   leggibilità senza superare un side-panel.
*/

.dn-cal-tooltip {
    min-width:     280px;
    max-width:     360px;
    font-size:     0.85rem;
    color:         var(--dn-text-primary);
    line-height:   1.4;
}

.dn-cal-tooltip-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            0.6rem;
    padding:        0.6rem 0.8rem;
    border-left:    4px solid #999999; /* override inline = colore agente */
    border-radius:  4px 4px 0 0;
}

.dn-cal-tooltip-title {
    font-size:    0.95rem;
    font-weight:  700;
    color:        var(--dn-text-primary);
    line-height:  1.25;
    flex:         1 1 auto;
    min-width:    0;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.dn-cal-tooltip-chip {
    flex-shrink:   0;
    padding:       0.15rem 0.5rem;
    background:    var(--dn-surface);
    border:        1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-size:     0.7rem;
    font-weight:   600;
    color:         var(--dn-text-secondary);
    white-space:   nowrap;
}

.dn-cal-tooltip-body {
    padding:        0.7rem 0.8rem 0.8rem;
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
    background:     var(--dn-surface);
}

.dn-cal-tooltip-section {
    display:    flex;
    align-items: flex-start;
    gap:        0.55rem;
}

.dn-cal-tooltip-icon {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       var(--dn-text-secondary);
    margin-top:  0.05rem;
}

.dn-cal-tooltip-icon svg {
    width:  16px;
    height: 16px;
}

.dn-cal-tooltip-content {
    flex:       1 1 auto;
    min-width:  0;
    display:    flex;
    flex-direction: column;
    gap:        0.05rem;
}

.dn-cal-tooltip-label {
    font-size:    0.68rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:        var(--dn-text-secondary);
}

.dn-cal-tooltip-text {
    font-size:    0.85rem;
    color:        var(--dn-text-primary);
    display:      flex;
    align-items:  center;
    gap:          0.4rem;
    word-wrap:    break-word;
}

.dn-cal-tooltip-subtext {
    font-size:    0.75rem;
    color:        var(--dn-text-secondary);
}

.dn-cal-tooltip-agent-dot {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #999;
    flex-shrink:   0;
}

.dn-cal-tooltip-notes-text {
    white-space:  pre-wrap; /* preserva newline nelle note utente */
    word-break:   break-word;
    line-height:  1.45;
}

.dn-cal-tooltip-notes .dn-cal-tooltip-text {
    display: block; /* override del flex per testo lungo */
}

/* ─────────────────────────────────────────────────────────────────────────────
   AddressAutocomplete — campo indirizzo con autocomplete Geoapify (v4.89.2)

   Struttura:
   .dn-address-autocomplete
     ├ .dn-address-search-wrapper        — wrapper input + dropdown (position: relative)
     │   ├ .dn-address-search-input      — input testuale
     │   ├ .dn-address-search-icon       — icona lente / spinner (assoluta)
     │   └ .dn-address-dropdown          — dropdown suggerimenti (assoluto sotto input)
     │       └ .dn-address-dropdown-item — singolo suggerimento (2 righe)
     ├ .dn-address-extracted-header      — etichetta + bottone "Modifica a mano"
     └ .dn-form-grid (riusata)           — griglia 3-col sottocampi readonly/edit
   ─────────────────────────────────────────────────────────────────────── */

.dn-address-autocomplete {
    display:         flex;
    flex-direction:  column;
    gap:             0.75rem;
    width:           100%;
}

/* ── Wrapper input ricerca + dropdown ──────────────────────────── */
.dn-address-search-wrapper {
    position: relative;
    width:    100%;
}

.dn-address-search-input {
    padding-right: 2.25rem; /* spazio per l'icona lente/spinner */
}

.dn-address-search-icon {
    position:       absolute;
    right:          0.75rem;
    top:            50%;
    transform:      translateY(-50%);
    width:          16px;
    height:         16px;
    color:          var(--dn-text-secondary);
    pointer-events: none;
}

.dn-address-search-icon svg {
    display: block;
    width:   16px;
    height:  16px;
}

.dn-address-spinner {
    animation: dn-address-spin 0.9s linear infinite;
}

@keyframes dn-address-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ── Dropdown suggerimenti ──────────────────────────────────── */
.dn-address-dropdown {
    position:        absolute;
    top:             calc(100% + 4px);
    left:            0;
    right:           0;
    z-index:         50;
    background:      var(--dn-surface);
    border:          1px solid var(--dn-border);
    border-radius:   var(--dn-border-radius);
    box-shadow:      var(--dn-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    max-height:      320px;
    overflow-y:      auto;
    padding:         0.25rem;
}

.dn-address-dropdown-empty {
    padding:    0.75rem 0.75rem;
    color:      var(--dn-text-secondary);
    font-size:  0.875rem;
    text-align: center;
}

.dn-address-dropdown-item {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    width:          100%;
    gap:            0.125rem;
    padding:        0.5rem 0.75rem;
    background:     transparent;
    border:         none;
    border-radius:  calc(var(--dn-border-radius) - 2px);
    cursor:         pointer;
    text-align:     left;
    transition:     background 0.12s ease;
}

.dn-address-dropdown-item:hover,
.dn-address-dropdown-item:focus {
    background: var(--dn-bg);
    outline:    none;
}

.dn-address-dropdown-item-primary {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--dn-text-primary);
    line-height: 1.3;
}

.dn-address-dropdown-item-secondary {
    font-size:   0.75rem;
    color:       var(--dn-text-secondary);
    line-height: 1.3;
}

/* ── Header griglia "Dati estratti" + bottone toggle ───────────── */
.dn-address-extracted-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
}

.dn-address-extracted-label {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--dn-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dn-address-toggle-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.375rem;
    padding:        0.25rem 0.625rem;
    background:     transparent;
    border:         1px solid var(--dn-border);
    border-radius:  var(--dn-border-radius);
    color:          var(--dn-text-primary);
    font-size:      0.8125rem;
    cursor:         pointer;
    transition:     background 0.12s ease, border-color 0.12s ease;
}

.dn-address-toggle-btn:hover {
    background:   var(--dn-bg);
    border-color: var(--dn-primary);
    color:        var(--dn-primary);
}

.dn-address-toggle-btn svg {
    width:  14px;
    height: 14px;
}

/* ── Grid sottocampi: input readonly hanno aspetto "spento" ───────── */
.dn-address-extracted-grid .dn-form-input[readonly] {
    background-color: var(--dn-border-light);
    color:            var(--dn-text-secondary);
    cursor:           default;
}

.dn-address-extracted-grid .dn-form-input[readonly]:focus {
    border-color: var(--dn-border);
    box-shadow:   none;
}