/* /Components/Pages/Admin/NotificationTemplates.razor.rz.scp.css */
/* Pagina "Messaggi" — editor modelli notifica + anteprima. Usa solo variabili di tema reali. */

/* Elenco eventi: nome + icone canali supportati */
.ntpl-event-row[b-3h8w1qmpq5] { display: flex; align-items: center; gap: 8px; }
.ntpl-chan-icons[b-3h8w1qmpq5] { display: flex; gap: 6px; color: var(--text-muted); flex: 0 0 auto; }
.ntpl-chan-icons svg[b-3h8w1qmpq5] { display: block; }
.grid tr.selected .ntpl-chan-icons[b-3h8w1qmpq5] { color: var(--accent); }

/* Barra di contesto dell'editor */
.ntpl-ctxbar[b-3h8w1qmpq5] {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 0 14px; margin-bottom: 4px;
    border-bottom: 1px dashed var(--border);
}
.ntpl-row[b-3h8w1qmpq5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ntpl-lbl[b-3h8w1qmpq5] { font-size: 12px; color: var(--text-secondary); min-width: 56px; }
.ntpl-grow[b-3h8w1qmpq5] { flex: 1 1 160px; min-width: 0; }
.ntpl-badge[b-3h8w1qmpq5] { font-size: 10px; }
.ntpl-subform[b-3h8w1qmpq5] { gap: 8px; }
.ntpl-check[b-3h8w1qmpq5] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }

/* Menu azioni modello (⋯) */
.ntpl-menu-wrap[b-3h8w1qmpq5] { position: relative; display: inline-flex; }
.ntpl-icon-btn[b-3h8w1qmpq5] { padding: 4px 8px; min-width: 32px; line-height: 1; }
.ntpl-menu-backdrop[b-3h8w1qmpq5] { position: fixed; inset: 0; z-index: 40; background: transparent; }
.ntpl-menu[b-3h8w1qmpq5] {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    min-width: 180px; padding: 4px;
    background: var(--bg-panel); border: 1px solid var(--border-strong);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
}
.ntpl-menu-item[b-3h8w1qmpq5] {
    text-align: left; background: transparent; border: 0; cursor: pointer;
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text-primary);
}
.ntpl-menu-item:hover[b-3h8w1qmpq5] { background: var(--bg-hover); }
.ntpl-menu-item.danger[b-3h8w1qmpq5] { color: var(--danger); }

/* Segmento canale Email / SMS */
.ntpl-seg[b-3h8w1qmpq5] {
    display: inline-flex; border: 1px solid var(--border-strong);
    border-radius: var(--radius); overflow: hidden;
}
.ntpl-seg-btn[b-3h8w1qmpq5] {
    background: transparent; border: 0; cursor: pointer;
    padding: 6px 14px; font-size: 12.5px; color: var(--text-secondary);
}
.ntpl-seg-btn:hover[b-3h8w1qmpq5] { background: var(--bg-hover); color: var(--text-primary); }
.ntpl-seg-btn.active[b-3h8w1qmpq5] { background: var(--accent); color: var(--on-accent); }

.ntpl-toggle[b-3h8w1qmpq5] { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.ntpl-preview-toggle.active[b-3h8w1qmpq5] { border-color: var(--accent); color: var(--accent); }

/* Campi editor */
.ntpl-field[b-3h8w1qmpq5] { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.ntpl-field-lbl[b-3h8w1qmpq5] { font-size: 12px; color: var(--text-secondary); }
.ntpl-hint[b-3h8w1qmpq5] { color: var(--text-muted); }

.ntpl-chips[b-3h8w1qmpq5] { display: flex; flex-wrap: wrap; gap: 6px; }
.ntpl-chip[b-3h8w1qmpq5] {
    font-family: var(--mono); font-size: 11px;
    padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-card-2); color: var(--text-primary); cursor: pointer;
}
.ntpl-chip:hover[b-3h8w1qmpq5] { border-color: var(--accent); color: var(--accent); }

/* Invio di prova (disclosure secondaria) */
.ntpl-test[b-3h8w1qmpq5] { margin: 14px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); }
.ntpl-test > summary[b-3h8w1qmpq5] {
    cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600;
    color: var(--text-secondary); list-style: none;
}
.ntpl-test[open] > summary[b-3h8w1qmpq5] { border-bottom: 1px solid var(--border); }
.ntpl-test > .ntpl-field[b-3h8w1qmpq5] { padding: 0 12px; }
.ntpl-test > .ntpl-field:last-child[b-3h8w1qmpq5] { padding-bottom: 12px; }

/* Pannello anteprima */
.ntpl-preview[b-3h8w1qmpq5] {
    flex: 0 0 380px; min-width: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.ntpl-preview-head[b-3h8w1qmpq5] {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.ntpl-preview-title[b-3h8w1qmpq5] { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ntpl-preview-sub[b-3h8w1qmpq5] { font-size: 11px; color: var(--text-muted); }
.ntpl-preview-body[b-3h8w1qmpq5] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px; }

.ntpl-mail[b-3h8w1qmpq5] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ntpl-mail-subject[b-3h8w1qmpq5] { padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card-2); }
.ntpl-mail-subject-lbl[b-3h8w1qmpq5] { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ntpl-mail-subject-val[b-3h8w1qmpq5] { display: block; font-size: 13px; color: var(--text-primary); }
.ntpl-preview-frame[b-3h8w1qmpq5] { flex: 1 1 auto; min-height: 220px; width: 100%; border: 0; background: #fff; }

.ntpl-sms[b-3h8w1qmpq5] { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ntpl-sms-bubble[b-3h8w1qmpq5] {
    max-width: 90%; padding: 10px 12px; border-radius: 14px;
    background: var(--accent-soft); color: var(--text-primary);
    font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ntpl-preview-empty[b-3h8w1qmpq5] { font-size: 13px; color: var(--text-muted); padding: 8px 2px; }

/* Scrim: nascosto su desktop (pannello agganciato), visibile come slide-over su schermi stretti */
.ntpl-preview-scrim[b-3h8w1qmpq5] { display: none; }

@media (max-width: 1100px) {
    .ntpl-preview-scrim[b-3h8w1qmpq5] {
        display: block; position: fixed; inset: 0; z-index: 70;
        background: rgba(0,0,0,.45);
    }
    .ntpl-preview[b-3h8w1qmpq5] {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
        width: min(440px, 92vw); border-radius: 0;
        box-shadow: var(--shadow-lg);
    }
}
/* /Components/Pages/Admin/UsersList.razor.rz.scp.css */
.pw-field[b-k6mchr1sf9] {
    position: relative;
    display: flex;
    align-items: center;
}

.pw-field .cx-input[b-k6mchr1sf9] {
    flex: 1;
    padding-right: 38px;
}

.pw-eye[b-k6mchr1sf9] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    border-radius: 6px;
}

.pw-eye:hover[b-k6mchr1sf9] {
    color: var(--text, inherit);
    background: color-mix(in srgb, currentColor 10%, transparent);
}
/* /Components/Pages/Bookings/BookingDetailModal.razor.rz.scp.css */
/* Scoped styles for BookingDetailModal.razor — modal booking editor.
   Field inputs use the global .cx-input/.cx-select/.cx-textarea (app.css). */

.bkm-backdrop[b-zhon52t6jj] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: bkm-fade-b-zhon52t6jj 0.15s ease;
}
@keyframes bkm-fade-b-zhon52t6jj { from { opacity: 0; } to { opacity: 1; } }

.bkm-modal[b-zhon52t6jj] {
    width: 100%;
    /* Larghezza tarata sulla schermata Dettagli: colonna soggiorno chiusa subito dopo il
       Trattamento (riga del periodo) + colonna Importi. Le altre tab sono fluide e si adattano. */
    max-width: 940px;
    height: 88vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bkm-pop-b-zhon52t6jj 0.18s ease;
}
@keyframes bkm-pop-b-zhon52t6jj {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.bkm-header[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Banner più sottile: padding verticale ridotto (16→10px) per un'intestazione meno ingombrante. */
    padding: 10px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Banner scuro: grigio ardesia freddo, intonato alla palette, con testi chiari per una lettura agevole */
    background: linear-gradient(160deg, #26262b 0%, #191a1d 100%);
}
.bkm-header-text[b-zhon52t6jj] { flex: 1; min-width: 0; }
.bkm-eyebrow[b-zhon52t6jj] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bkm-title[b-zhon52t6jj] {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Seconda riga dell'intestazione: riepilogo soggiorno a sinistra, codice prenotazione
   spinto a destra (con un piccolo stacco per non incollarlo alla X di chiusura). */
.bkm-header-sub[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    margin-top: 2px;
}
.bkm-header-sub .bkm-code[b-zhon52t6jj] { margin-top: 0; margin-left: auto; margin-right: 14px; }

/* Riepilogo soggiorno sotto il titolo: periodo · notti · persone (tinte chiare del banner scuro). */
.bkm-header-meta[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 7px;
    font-size: 12px;
    color: #adadb4;
    white-space: nowrap;
}
.bkm-header-meta b[b-zhon52t6jj] { color: #ffffff; font-weight: 700; }
.bkm-header-meta .sep[b-zhon52t6jj], .bkm-header-meta .dot[b-zhon52t6jj] { color: #6f6f77; font-weight: 700; }

/* Booking code (Id) under the title — selectable + copy button */
/* UUID come chip compatto (pill) con pulsante copia: informazione tecnica, non deve pesare. */
.bkm-code[b-zhon52t6jj] {
    display: inline-flex; align-items: center; gap: 2px;
    margin-top: 3px; max-width: 100%;
    padding: 1px 3px 1px 9px;
    border-radius: 999px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
}
.bkm-code-text[b-zhon52t6jj] {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-muted);
    user-select: all;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 128px;
}
.bkm-code-copy[b-zhon52t6jj] {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
}
.bkm-code-copy:hover[b-zhon52t6jj] { background: var(--bg-hover); color: var(--text-primary); }
.bkm-close[b-zhon52t6jj] {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bkm-close:hover:not(:disabled)[b-zhon52t6jj] { background: var(--bg-hover); color: var(--danger); border-color: var(--border-strong); }
.bkm-close:disabled[b-zhon52t6jj] { opacity: .5; cursor: not-allowed; }

/* Testi e pulsanti del banner scuro: forzati a tinte chiare, indipendenti dal tema */
.bkm-header .bkm-eyebrow[b-zhon52t6jj] { color: #a3a3aa; }
.bkm-header .bkm-title[b-zhon52t6jj] { color: #ffffff; }
.bkm-header .bkm-code[b-zhon52t6jj] { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.bkm-header .bkm-code-text[b-zhon52t6jj] { color: #adadb4; }
.bkm-header .bkm-code-copy[b-zhon52t6jj] { color: #adadb4; }
.bkm-header .bkm-code-copy:hover[b-zhon52t6jj] { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
.bkm-header .bkm-close[b-zhon52t6jj] { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #d0d0d6; }
.bkm-header .bkm-close:hover:not(:disabled)[b-zhon52t6jj] { background: rgba(255, 255, 255, 0.13); color: #ffffff; border-color: rgba(255, 255, 255, 0.24); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */

/* Sempre visibili: i tab restano in cima (sticky + non comprimibili), il corpo è l'unica
   area che scorre. Così header e tab non spariscono mai per scroll, su qualunque altezza. */
.bkm-tabs[b-zhon52t6jj] {
    display: flex;
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    /* Scroll orizzontale per i tab su viewport stretti, MA niente scrollbar verticale:
       con overflow-x:auto il browser promuove overflow-y a "auto" e il -1px di margine dei
       tab fa comparire la barra verticale con le frecce. La fissiamo a hidden e nascondiamo
       visivamente anche quella orizzontale (lo scroll resta possibile con trackpad/shift+wheel). */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* Edge/IE legacy */
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.bkm-tabs[b-zhon52t6jj]::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
.bkm-tab[b-zhon52t6jj] {
    appearance: none;
    border: 0;
    background: transparent;
    flex: 1 1 0;
    min-width: max-content;
    padding: 10px 12px;
    font: 600 12px 'Inter', sans-serif;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
    margin-bottom: -1px;
}
.bkm-tab:hover[b-zhon52t6jj] { color: var(--text-primary); }
/* La sottolineatura del tab attivo è disegnata dall'indicatore scorrevole (.bkm-tab-ind),
   non più dal border-bottom del singolo tab: qui basta il colore accento sul testo. */
.bkm-tab.active[b-zhon52t6jj] { color: var(--accent); }

/* Segnalazione errori nel tab: etichetta rossa + badge col numero di campi da completare.
   Definito dopo .active così un tab attivo ma in errore resta evidenziato in rosso. */
.bkm-tab.has-error[b-zhon52t6jj] { color: var(--danger); }

/* Indicatore scorrevole: unica sottolineatura del tab attivo. Posizione/larghezza sono
   impostate via JS (overcore.moveTabIndicator, misura offsetLeft/offsetWidth del tab attivo);
   al cambio tab si ispessisce e scorre con decelerazione verso la destinazione, poi torna a 3px.
   Lo spessore a riposo (3px) è leggermente maggiore dei 2px del vecchio border. */
.bkm-tab-ind[b-zhon52t6jj] {
    position: absolute;
    /* bottom:0 (non -1px): la nav ha overflow-y:hidden e clipperebbe l'indicatore sotto il bordo. */
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    pointer-events: none;
    will-change: transform, width;
}
.bkm-tab-ind.error[b-zhon52t6jj] { background: var(--danger); }
.bkm-tab-badge[b-zhon52t6jj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.bkm-scroll[b-zhon52t6jj] {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Padding compattato (18px→14/12): recupera spazio verticale così la schermata Dettagli
       entra tutta (note comprese) senza scroll. */
    padding: 14px 18px 12px;
    /* min-height:0 (non 220px) così il corpo può ridursi e scorrere internamente anche su
       viewport bassi, lasciando header/tab/footer sempre a schermo. */
    min-height: 0;
}

.bkm-state[b-zhon52t6jj] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 60px 18px;
    color: var(--text-muted);
    font-size: 14px;
    min-height: 220px;
}
.bkm-state.err[b-zhon52t6jj] { color: var(--danger); }

.bkm-error[b-zhon52t6jj] {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
    font-size: 12px;
}
/* Variante a blocco (dentro lo scroll): larghezza piena come le card cliente/ospite e
   distacco dal contenuto sottostante (i pulsanti). Il padding-top dello scroll fa da spazio sopra. */
.bkm-error.bkm-error-block[b-zhon52t6jj] { margin: 0 0 14px; }

/* Avviso (ambra): salvataggio riuscito ma email di conferma non inviata. */
.bkm-warn[b-zhon52t6jj] {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--warning);
    font-size: 12px;
}

/* Esito positivo (verde): email di conferma inviata. */
.bkm-info[b-zhon52t6jj] {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
    font-size: 12px;
}

.bkm-section[b-zhon52t6jj] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    /* Stacco tra sezioni compattato (14/6→9/5) per far entrare tutta la schermata Dettagli. */
    margin: 9px 0 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bkm-section[b-zhon52t6jj]::before { content: ""; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; }
.bkm-section[b-zhon52t6jj]::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bkm-section:first-child[b-zhon52t6jj] { margin-top: 0; }

/* Variante collassabile (Impostazioni / Adempimenti di legge): l'intestazione è un pulsante
   che apre/chiude il blocco; il chevron ruota quando la sezione è espansa. */
.bkm-section-coll[b-zhon52t6jj] {
    appearance: none;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    /* Solo la famiglia: dimensione/peso/spaziatura restano quelli di .bkm-section
       (la shorthand font: li sovrascriverebbe, essendo dichiarata dopo). */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.bkm-section-coll:hover[b-zhon52t6jj] { color: var(--text-primary); }
.bkm-section-chevron[b-zhon52t6jj] { flex-shrink: 0; color: var(--text-muted); transition: transform .15s ease; }
.bkm-section-coll.open .bkm-section-chevron[b-zhon52t6jj] { transform: rotate(90deg); }
.bkm-section-coll:hover .bkm-section-chevron[b-zhon52t6jj] { color: var(--text-primary); }

.bkm-fields[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.bkm-field[b-zhon52t6jj] { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
/* Opzioni su UNA riga: Validità (+ eventuale scadenza) e i campi opzionali Canale/Voucher
   affiancati in orizzontale; wrap solo quando lo spazio non basta. */
.bkm-opts-row[b-zhon52t6jj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
}
.bkm-opt-field[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bkm-opt-field .cx-select[b-zhon52t6jj] { width: auto; min-width: 160px; }
.bkm-opt-field .cx-input.mono[b-zhon52t6jj] { width: 150px; }
/* Etichette campo: grigio scuro leggibile (--text-secondary ≈ #475569, contrasto AA su sfondo
   chiaro). Il valore usa --text-primary, quindi resta più scuro della label. */
.bkm-label[b-zhon52t6jj] { color: var(--text-secondary); font-size: 12px; }
.bkm-value[b-zhon52t6jj] { color: var(--text-primary); min-width: 0; display: flex; align-items: center; gap: 8px; }
.bkm-value .cx-input[b-zhon52t6jj], .bkm-value .cx-select[b-zhon52t6jj] { width: 100%; }
.bkm-value.ro[b-zhon52t6jj] { font-size: 13px; }
.bkm-value.ro.mono[b-zhon52t6jj] { font-family: var(--mono); font-size: 12px; }
.bkm-value.strong[b-zhon52t6jj] { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-inline-meta[b-zhon52t6jj] { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 720px) {
    .bkm-fields[b-zhon52t6jj] { grid-template-columns: minmax(0, 1fr); }
}

/* Checkboxes block — "casi particolari": de-enfatizzato (bordo tratteggiato + testo
   secondario) per distinguerlo dai campi core del soggiorno. */
.bkm-checks[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    background: var(--bg-card-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.bkm-checks .bkm-switch[b-zhon52t6jj] { color: var(--text-secondary); }
/* Tag "casi particolari" accanto all'intestazione Impostazioni. */
.bkm-section-hint[b-zhon52t6jj] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    padding: 1px 7px;
    border-radius: 999px;
}
.bkm-check[b-zhon52t6jj] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-primary); font-size: 13px; }
.bkm-check input[b-zhon52t6jj] { accent-color: var(--accent); cursor: pointer; }

/* Impostazioni come interruttori (toggle): checkbox nativo nascosto + traccia/pallina stilizzate,
   stessa estetica dei toggle Check-in/Check-out. Il binding @bind resta sull'input. */
.bkm-switch[b-zhon52t6jj] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-primary); font-size: 13px; }
.bkm-switch input[b-zhon52t6jj] { position: absolute; opacity: 0; width: 0; height: 0; }
.bkm-switch-track[b-zhon52t6jj] {
    position: relative;
    width: 30px; height: 16px;
    border-radius: 999px;
    background: var(--border-strong, #9a9aa0);
    flex-shrink: 0;
    transition: background .15s ease;
}
.bkm-switch-track[b-zhon52t6jj]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.bkm-switch input:checked + .bkm-switch-track[b-zhon52t6jj] { background: var(--accent); }
.bkm-switch input:checked + .bkm-switch-track[b-zhon52t6jj]::after { transform: translateX(14px); }
.bkm-switch input:focus-visible + .bkm-switch-track[b-zhon52t6jj] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Notes blocks */
.bkm-fields-block[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bkm-block-label[b-zhon52t6jj] { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.bkm-fields-block .cx-textarea[b-zhon52t6jj] { min-height: 90px; }

/* Note sulla schermata principale (Dettagli): tre campi compatti a 2 righe, affiancati su
   griglia responsive sotto il riepilogo. Sostituiscono la vecchia tab "Note". */
.bkm-notes-main[b-zhon52t6jj] {
    grid-column: 1 / -1;
    margin-top: 2px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
}
.bkm-notes-main .bkm-fields-block[b-zhon52t6jj] { margin-bottom: 0; gap: 4px; }
.bkm-notes-main .cx-textarea[b-zhon52t6jj] { min-height: 0; resize: vertical; }

/* Customer hint + placeholders */
.bkm-hint[b-zhon52t6jj] { margin-top: 10px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.bkm-placeholder[b-zhon52t6jj] {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
}

/* ── Child collections ───────────────────────────────────────────────────── */

/* Intestazione collezioni: stessa estetica di .bkm-section (barretta accent + riga).
   La riga è l'::after (sempre ultimo nel DOM): con order la si colloca TRA il titolo e
   l'eventuale contenuto a destra (totali, pulsanti), che finisce dopo la riga. */
.bkm-coll-head[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
}
.bkm-coll-head:first-child[b-zhon52t6jj] { margin-top: 0; }
.bkm-coll-head[b-zhon52t6jj]::before { content: ""; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.bkm-coll-head[b-zhon52t6jj]::after { content: ""; flex: 1; height: 1px; background: var(--border); order: 1; }
.bkm-coll-head > :not(.bkm-section-inline)[b-zhon52t6jj] { order: 2; flex-shrink: 0; }
.bkm-section-inline[b-zhon52t6jj] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bkm-add[b-zhon52t6jj] { height: 30px; padding: 0 10px; font-size: 12px; }

.bkm-rows[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 8px; }
.bkm-row[b-zhon52t6jj] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-cellgroup[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
.bkm-cellgroup.grow[b-zhon52t6jj] { flex: 2 1 0; }
.bkm-cellgroup label[b-zhon52t6jj] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bkm-cellgroup .cx-input[b-zhon52t6jj], .bkm-cellgroup .cx-select[b-zhon52t6jj] { width: 100%; }
/* Campo derivato in sola lettura (es. tariffa finale = base − sconto + extra). */
.bkm-cellgroup .cx-input.ro[b-zhon52t6jj] { background: var(--bg-card); color: var(--text-secondary); cursor: default; }

/* ── Righe editor ordine (tab Extra): voce · qtà · modalità · listino · prezzo · nota ── */
.bkm-row.bkm-line[b-zhon52t6jj] { flex-wrap: wrap; }
.bkm-line .bkm-cellgroup.num[b-zhon52t6jj] { flex: 0 0 76px; }
/* Il toggle Listino/Libero dimensiona la cella: label ed etichette dei segmenti mai a capo. */
.bkm-line .bkm-cellgroup.mode[b-zhon52t6jj] { flex: 0 0 auto; }
.bkm-line .bkm-cellgroup.mode label[b-zhon52t6jj] { white-space: nowrap; }
.bkm-line .bkm-seg[b-zhon52t6jj] { margin-bottom: 0; height: 40px; align-items: center; }
.bkm-line .bkm-seg-btn[b-zhon52t6jj] { flex: 0 0 auto; white-space: nowrap; padding: 7px 10px; }
.bkm-line .bkm-cellgroup.price[b-zhon52t6jj] { flex: 0 0 104px; }
.bkm-line .bkm-cellgroup.price .cx-input[b-zhon52t6jj] { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }
/* Totale delle tariffe giornaliere, in calce alla tab "Tariffe". */
.bkm-rates-total[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}
.bkm-rates-total .strong[b-zhon52t6jj] { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-rm[b-zhon52t6jj] {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    width: 32px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bkm-rm:hover[b-zhon52t6jj] { background: rgba(239,68,68,.10); color: var(--danger); border-color: rgba(239,68,68,.3); }

/* ── Guest demographic editor (questura/ISTAT) ───────────────────────────── */
.bkm-guest[b-zhon52t6jj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-guest.booker[b-zhon52t6jj] {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background: var(--accent-soft);
}
.bkm-guest.has-error[b-zhon52t6jj] {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px var(--danger) inset;
}
.bkm-guest-head[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; }
.bkm-guest-tag[b-zhon52t6jj] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bkm-guest-head .bkm-rm[b-zhon52t6jj],
.bkm-guest-head .bkm-cust-icon[b-zhon52t6jj] { margin-left: auto; }
/* Griglia dati ospite: colonne a larghezza uniforme così le textbox si allineano
   verticalmente su righe e colonne (prima erano flex-wrap → input sfalsati). L'etichetta
   ha un'altezza minima costante (align-items:end) perché anche le label su due righe
   lascino gli input allineati sulla stessa base. */
.bkm-guest-fields[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 14px;
    align-items: end;
}
.bkm-guest-fields .bkm-cellgroup[b-zhon52t6jj] { min-width: 0; }
.bkm-guest-fields .bkm-cellgroup label[b-zhon52t6jj] {
    min-height: 2.4em;
    display: flex;
    align-items: flex-end;
    line-height: 1.2;
}

/* Per-field error highlight set by the check-in gate. */
.bkm-cellgroup.bkm-field-err label[b-zhon52t6jj] { color: var(--danger); }
.bkm-cellgroup.bkm-field-err .cx-input[b-zhon52t6jj],
.bkm-cellgroup.bkm-field-err .cx-select[b-zhon52t6jj] { border-color: var(--danger); }

/* Prenotante (Customer / capo): sola lettura + segnalazione errori multipli. */
.bkm-booker[b-zhon52t6jj] {
    padding: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-booker.has-error[b-zhon52t6jj] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.bkm-booker-errors[b-zhon52t6jj] {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 8px;
}
.bkm-booker-errors-title[b-zhon52t6jj] { display: block; font-size: 12px; font-weight: 700; color: var(--danger); margin-bottom: 6px; }
/* Errori prenotante come bannerini (chip) in riga. */
.bkm-err-chips[b-zhon52t6jj] { display: flex; flex-wrap: wrap; gap: 6px; }
.bkm-err-chip[b-zhon52t6jj] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--danger);
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: 999px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.bkm-footer[b-zhon52t6jj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
/* Gruppo sinistro (Stampa) e destro (Annulla/Salva/Invia email): l'invio email resta a destra. */
.bkm-footer-left[b-zhon52t6jj], .bkm-footer-right[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; }

/* ── Details tab: two-column layout (stay | economic summary) ──────────────── */

.bkm-details-grid[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}
.bkm-col-main[b-zhon52t6jj], .bkm-col-econ[b-zhon52t6jj] { min-width: 0; }
.bkm-col-econ .bkm-section[b-zhon52t6jj] { margin-top: 0; }

/* Field that spans the full width of the 2-column .bkm-fields grid (stacked rows) */
.bkm-field-full[b-zhon52t6jj] { grid-column: 1 / -1; }
.bkm-num-input[b-zhon52t6jj] { width: 52px; text-align: center; }

/* Stepper numero persone: −/valore/+ compatto, al posto dell'input numerico. */
.bkm-stepper[b-zhon52t6jj] { display: inline-flex; align-items: stretch; height: 40px; width: fit-content; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card-2); overflow: hidden; }
.bkm-stepper-btn[b-zhon52t6jj] { width: 34px; display: grid; place-items: center; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; transition: color .12s ease, background .12s ease; }
.bkm-stepper-btn:hover:not(:disabled)[b-zhon52t6jj] { color: var(--text-primary); background: var(--bg-hover); }
.bkm-stepper-btn:disabled[b-zhon52t6jj] { opacity: .4; cursor: default; }
.bkm-stepper-val[b-zhon52t6jj] { min-width: 36px; padding: 0 8px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--text-primary); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.bkm-stepper.is-locked[b-zhon52t6jj] { opacity: .65; }

/* Riga persone: stepper + pulsante "richiamo" accompagnatori affiancati. */
.bkm-guests-row[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; }
/* Pulsante "richiamo": icona, stessa altezza dei controlli (40px). Disabilitato senza prenotante. */
.bkm-recall-btn[b-zhon52t6jj] {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.bkm-recall-btn:hover:not(:disabled)[b-zhon52t6jj] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.bkm-recall-btn:disabled[b-zhon52t6jj] { opacity: .4; cursor: not-allowed; }

@media (max-width: 900px) {
    .bkm-details-grid[b-zhon52t6jj] { grid-template-columns: minmax(0, 1fr); }
}

/* Name + alias row, with the customer link icon beside the name. L'intestatario prende
   tutto lo spazio disponibile; il blocco alias (input o "+ Aggiungi alias") si dimensiona
   sul contenuto e finisce a filo del bordo destro della colonna (verso il blocco Importi). */
.bkm-name-row[b-zhon52t6jj] { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 6px; }
.bkm-name-field[b-zhon52t6jj] { flex: 1 1 auto; min-width: 0; }
.bkm-name-alias[b-zhon52t6jj] { flex: 0 0 auto; }
.bkm-name-alias .bkm-alias-row[b-zhon52t6jj] { width: 230px; }

/* Alias + bottone colore attaccato a destra (override colore tableau: ColorHex=sfondo, ColorText=testo).
   Input arrotondato solo a sinistra, bottone arrotondato solo a destra: formano un unico pill. */
.bkm-alias-row[b-zhon52t6jj] { display: flex; align-items: stretch; position: relative; }
.bkm-alias-row .bkm-alias-input[b-zhon52t6jj] {
    flex: 1 1 auto; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0;
}
.bkm-alias-color-btn[b-zhon52t6jj] {
    flex-shrink: 0;
    width: 38px;
    border: 1px solid var(--border);
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-top-right-radius: 9px; border-bottom-right-radius: 9px;
    background: var(--bg-card-2);
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    display: inline-grid; place-items: center;
    transition: filter .12s ease;
}
.bkm-alias-color-btn:hover[b-zhon52t6jj] { filter: brightness(1.08); }
/* Overlay trasparente per chiudere il picker col click fuori */
.bkm-color-overlay[b-zhon52t6jj] { position: fixed; inset: 0; z-index: 19; }
/* Popover scelta colori (sfondo + testo) */
.bkm-color-pop[b-zhon52t6jj] {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    z-index: 20;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    display: flex; flex-direction: column; gap: 8px;
    min-width: 190px;
}
.bkm-color-row[b-zhon52t6jj] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bkm-color-lbl[b-zhon52t6jj] { font-size: 13px; color: var(--text-muted); }
.bkm-color-input[b-zhon52t6jj] {
    width: 46px; height: 28px;
    border: 1px solid var(--border); border-radius: 6px;
    background: transparent; cursor: pointer; padding: 0;
}
.bkm-color-clear[b-zhon52t6jj] {
    border: 0; background: transparent; color: var(--danger);
    font-size: 12px; cursor: pointer; padding: 2px 0; text-align: right;
}
.bkm-color-clear:hover[b-zhon52t6jj] { text-decoration: underline; }

/* Scadenza + contatore giorni: data (larghezza ridotta) e badge "Giorni N"/"SCADUTO" affiancati.
   flex-wrap: su layout stretti il badge va a capo sotto la data invece di sovrapporsi al campo Voucher. */
.bkm-exp-value[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bkm-exp-value .cx-input[b-zhon52t6jj] { width: 128px; flex: 0 0 auto; }
.bkm-exp-days[b-zhon52t6jj] { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.bkm-exp-days-lbl[b-zhon52t6jj] { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bkm-exp-days-num[b-zhon52t6jj] { font-size: 15px; font-weight: 700; text-align: center; }
/* Scaduta: al posto del numero giorni mostra "SCADUTO" in rosso (bordo/icona data gestiti in app.css) */
.bkm-exp-days-scaduto[b-zhon52t6jj] { font-size: 12px; font-weight: 800; color: var(--danger); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.bkm-name-field .bkm-label[b-zhon52t6jj] { margin-bottom: 4px; }
.bkm-name-field > .cx-input[b-zhon52t6jj] { width: 100%; }
.bkm-name-input-wrap[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; }
/* Box that wraps the main name/search input so the clear (×) can sit inside it */
.bkm-name-input-box[b-zhon52t6jj] { position: relative; flex: 1 1 auto; min-width: 0; }
.bkm-name-input-box .cx-input[b-zhon52t6jj] { width: 100%; font-weight: 600; }
.bkm-name-input.has-clear[b-zhon52t6jj] { padding-right: 32px; }
/* Icona ricerca dentro il campo intestatario (decorativa): a sinistra, non cliccabile. */
.bkm-name-search-ic[b-zhon52t6jj] {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    display: inline-grid; place-items: center;
    color: var(--text-muted);
    pointer-events: none;
}
.bkm-name-input[b-zhon52t6jj] { padding-left: 34px; }
/* Small clear button inside the textbox: unlinks the associated customer */
.bkm-name-clear[b-zhon52t6jj] {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-grid; place-items: center;
    border: 0; background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bkm-name-clear:hover[b-zhon52t6jj] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.bkm-cust-icon[b-zhon52t6jj] {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    transition: filter .12s ease, border-color .12s ease, background .12s ease;
}
.bkm-cust-icon:hover[b-zhon52t6jj] { filter: brightness(1.1); }
.bkm-cust-icon.linked[b-zhon52t6jj] {
    color: #16a34a;
    border-color: color-mix(in srgb, #16a34a 45%, var(--border));
    background: color-mix(in srgb, #16a34a 12%, transparent);
}
.bkm-cust-icon.unlinked[b-zhon52t6jj] {
    color: #f59e0b;
    border-color: color-mix(in srgb, #f59e0b 50%, var(--border));
    background: color-mix(in srgb, #f59e0b 12%, transparent);
}
/* Variante con etichetta: icona + testo ("Apri scheda cliente" / "Cerca e collega cliente"),
   col testo alla destra dell'icona. Eredita le tinte da .linked/.unlinked. */
.bkm-cust-icon.has-label[b-zhon52t6jj] {
    width: auto;
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Gruppo azioni nell'header collassabile (icona cliente + rimuovi) */
.bkm-coll-head-actions[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Inline customer picker */
.bkm-cust-picker[b-zhon52t6jj] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
    padding: 10px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bkm-cust-results[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.bkm-cust-item[b-zhon52t6jj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bkm-cust-item:hover[b-zhon52t6jj] { border-color: var(--accent); background: var(--bg-hover); }
.bkm-cust-name[b-zhon52t6jj] { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bkm-cust-meta[b-zhon52t6jj] { font-size: 11px; color: var(--text-muted); }
.bkm-cust-empty[b-zhon52t6jj] { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12px; }
/* Bottone "crea nuovo cliente" mostrato nello stato vuoto del picker */
.bkm-cust-create[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bkm-cust-create:hover[b-zhon52t6jj] { border-color: var(--accent); background: var(--bg-hover); }
/* Risultati ricerca cliente mostrati come dropdown sotto il textbox principale */
.bkm-cust-dropdown[b-zhon52t6jj] { margin-top: -2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }

/* Room block + change-room button */
.bkm-room-block[b-zhon52t6jj] {
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 8px;
}
.bkm-room-block .bkm-label[b-zhon52t6jj] { margin-bottom: 4px; }
/* Numero persone (auto, sized to the narrow box/label) + Camera + Trattamento.
   align-items:start keeps the captions on one line; equal-height controls keep the
   boxes aligned, so "Camera" (caption + box) lines up with "Numero persone". */
.bkm-rt[b-zhon52t6jj] { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; align-items: start; }
/* Variante a due colonne (Persone + Camera): il Trattamento è salito nella riga del periodo. */
.bkm-rt-2[b-zhon52t6jj] { grid-template-columns: auto minmax(0, 1fr); }
.bkm-rt-cell[b-zhon52t6jj] { min-width: 0; display: flex; flex-direction: column; }
.bkm-rt-cell .cx-select[b-zhon52t6jj] { width: 100%; }
.bkm-room-line[b-zhon52t6jj] { display: flex; min-height: 38px; }

/* Camera come pulsante unico: tutta l'area è cliccabile e apre il calendario di assegnazione. */
.bkm-room-pick[b-zhon52t6jj] {
    appearance: none;
    /* Il pulsante riempie la colonna Camera: tutta l'area cliccabile fino al bordo della cella. */
    flex: 1 1 auto;
    align-self: flex-start;
    min-width: 88px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bkm-room-pick:hover[b-zhon52t6jj] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--bg-hover); }
/* Camera non ancora assegnata per l'intero periodo (manca almeno una notte): trattamento
   "obbligatorio" AMBRA (non rosso-errore) — è un'azione da completare, non uno sbaglio.
   Il rosso resta al vincolo bloccante gestito da SaveAsync (booking.validation.roomRequired). */
.bkm-room-pick.missing[b-zhon52t6jj] {
    border-color: color-mix(in srgb, var(--req) 60%, var(--border));
    background: var(--req-soft);
    color: var(--req);
}
.bkm-room-pick.missing:hover[b-zhon52t6jj] {
    border-color: var(--req);
    background: color-mix(in srgb, var(--req) 16%, transparent);
}
.bkm-room-pick.missing .bkm-room-pick-cta[b-zhon52t6jj],
.bkm-room-pick.missing .bkm-room-num[b-zhon52t6jj],
.bkm-room-pick.missing .bkm-room-arrow[b-zhon52t6jj],
.bkm-room-pick.missing .bkm-room-today[b-zhon52t6jj] { color: var(--req); }
.bkm-room-pick-cta[b-zhon52t6jj] { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Camera del giorno di riferimento: etichetta "Oggi" centrata sopra il numero, col numero
   affiancato dalle frecce (camere assegnate per i giorni precedenti/successivi). */
.bkm-room-switch-col[b-zhon52t6jj] { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.bkm-room-switch-line[b-zhon52t6jj] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bkm-room-today[b-zhon52t6jj] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}
.bkm-room-num[b-zhon52t6jj] { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkm-room-arrow[b-zhon52t6jj] { font-size: 17px; font-weight: 700; line-height: 1; color: var(--accent); flex-shrink: 0; }

/* Banner overbooking sotto la camera: la camera assegnata è occupata anche da un'altra
   prenotazione in almeno una notte. Danger pieno (non ambra): è un conflitto reale già
   accettato o creato altrove, non un campo da completare. */
.bkm-overbook[b-zhon52t6jj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}
.bkm-overbook > svg[b-zhon52t6jj] { flex-shrink: 0; margin-top: 1px; }
.bkm-overbook-body[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bkm-overbook-title[b-zhon52t6jj] { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bkm-overbook-line[b-zhon52t6jj] { font-size: 13px; font-weight: 600; color: var(--text-primary); }

@media (max-width: 560px) { .bkm-rt[b-zhon52t6jj] { grid-template-columns: 1fr; } }

/* Stay grid: dates stacked (left), nights centered spanning both rows, check blocks right-aligned */
.bkm-stay[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "arr nights chkin"
        "dep nights chkout";
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 10px;
}
.bkm-stay-arr[b-zhon52t6jj] { grid-area: arr; }
.bkm-stay-dep[b-zhon52t6jj] { grid-area: dep; }
.bkm-nights[b-zhon52t6jj]   { grid-area: nights; }
.bkm-chkin[b-zhon52t6jj]    { grid-area: chkin; }
.bkm-chkout[b-zhon52t6jj]   { grid-area: chkout; }
.bkm-stay-date[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; }
.bkm-stay-date .bkm-label[b-zhon52t6jj] { width: 86px; flex-shrink: 0; }
.bkm-date-sm[b-zhon52t6jj] { max-width: 140px; }

/* Campo unico "periodo": pulsante-trigger che apre il calendario a range al posto dei due
   datepicker. Occupa la colonna sinistra su entrambe le righe della griglia, centrato. */
.bkm-stay-field[b-zhon52t6jj] { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; gap: 8px; align-self: center; }
.bkm-stay-field .bkm-label[b-zhon52t6jj] { width: 86px; flex-shrink: 0; }
.bkm-daterange-trigger[b-zhon52t6jj] {
    width: auto;
    min-width: 236px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}
.bkm-dr-val[b-zhon52t6jj] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bkm-dr-arrow[b-zhon52t6jj] { color: var(--text-muted); font-weight: 700; }
.bkm-dr-placeholder[b-zhon52t6jj] { color: var(--text-muted); }
.bkm-dr-ico[b-zhon52t6jj] { color: var(--text-muted); flex-shrink: 0; }

/* Nights: chip riconoscibile (valore derivato) centrato tra le due date. */
.bkm-nights[b-zhon52t6jj] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1.1; padding: 4px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-nights-lbl[b-zhon52t6jj] { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.bkm-nights-num[b-zhon52t6jj] { font-size: 18px; font-weight: 800; color: var(--text-primary); }

/* Check blocks: toggle + reserved space for date & time, aligned to the right edge */
.bkm-stay-check[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; justify-self: end; }
/* Fixed-width toggles so "Check-in" and "Check-out" pills are identical and line up
   (otherwise the shorter label makes the two pills start at different x). Uses width, not
   min-width: the .bkm-toggle.sm rule below resets min-width to 0 with equal specificity. */
.bkm-stay-check .bkm-toggle[b-zhon52t6jj] { width: 124px; justify-content: flex-start; flex-shrink: 0; }
.bkm-check-dt[b-zhon52t6jj] { display: flex; gap: 6px; width: 232px; flex-shrink: 0; }
.bkm-check-dt .cx-input[b-zhon52t6jj] { min-width: 0; }

@media (max-width: 640px) {
    .bkm-stay[b-zhon52t6jj] { grid-template-columns: 1fr; grid-template-areas: "arr" "dep" "nights" "chkin" "chkout"; }
    .bkm-stay-check[b-zhon52t6jj] { justify-self: start; }
    .bkm-check-dt[b-zhon52t6jj] { width: auto; }
}

/* Check-in / check-out toggles */
.bkm-toggle[b-zhon52t6jj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 140px;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.bkm-toggle-knob[b-zhon52t6jj] {
    width: 30px; height: 16px;
    border-radius: 999px;
    background: var(--border-strong, #9a9aa0);
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease;
}
.bkm-toggle-knob[b-zhon52t6jj]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.bkm-toggle.on[b-zhon52t6jj] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.bkm-toggle.on .bkm-toggle-knob[b-zhon52t6jj] { background: var(--accent); }
.bkm-toggle.on .bkm-toggle-knob[b-zhon52t6jj]::after { transform: translateX(14px); }
.bkm-toggle.sm[b-zhon52t6jj] { min-width: 0; padding: 4px 10px 4px 6px; font-size: 11px; gap: 6px; }
.bkm-toggle.sm .bkm-toggle-knob[b-zhon52t6jj] { width: 26px; height: 14px; }
.bkm-toggle.sm .bkm-toggle-knob[b-zhon52t6jj]::after { width: 10px; height: 10px; }
.bkm-toggle.sm.on .bkm-toggle-knob[b-zhon52t6jj]::after { transform: translateX(12px); }
.bkm-dt-date[b-zhon52t6jj] { flex: 0 0 158px; max-width: 158px; }
.bkm-dt-time[b-zhon52t6jj] { flex: 0 0 128px; max-width: 128px; }

/* ── Periodo (prima della camera) e check-in/out (sotto la camera) ──────────────── */
/* Riga periodo: Periodo + chip Notti + Trattamento affiancati, ciascuno con l'etichetta
   SOPRA il campo (stesso ritmo del resto della schermata). Respiro sotto, prima del
   blocco Persone/Camera. */
.bkm-period[b-zhon52t6jj] { display: flex; align-items: flex-start; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.bkm-period-cell[b-zhon52t6jj] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.bkm-period-cell .cx-select[b-zhon52t6jj] { width: auto; min-width: 180px; }
/* Ultima cella (Trattamento): occupa lo spazio residuo fino al bordo destro della colonna. */
.bkm-period-cell.grow[b-zhon52t6jj] { flex: 1 1 auto; align-items: stretch; }
.bkm-period-cell.grow .cx-select[b-zhon52t6jj] { width: 100%; }
/* Il campo periodo riusa .bkm-stay-field (stati cx-req/cx-invalid): qui l'etichetta va sopra,
   non a sinistra — si annullano la larghezza fissa della label e il posizionamento a griglia. */
.bkm-period .bkm-stay-field[b-zhon52t6jj] { grid-column: auto; grid-row: auto; align-self: auto; }
.bkm-period .bkm-stay-field .bkm-label[b-zhon52t6jj] { width: auto; }

/* Blocco check-in / check-out sotto la camera, ben evidente (card riquadrata). */
.bkm-checks[b-zhon52t6jj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 8px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-check[b-zhon52t6jj] { display: flex; align-items: center; gap: 10px; }

/* Toggle check-in/out: più squadrato (bordi arrotondati, non pill) e leggermente più grande. */
.bkm-check-toggle[b-zhon52t6jj] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-width: 152px;
    flex-shrink: 0;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.bkm-check-toggle:hover[b-zhon52t6jj] { border-color: var(--border-strong); }
.bkm-check-toggle .bkm-toggle-knob[b-zhon52t6jj] { width: 34px; height: 18px; }
.bkm-check-toggle .bkm-toggle-knob[b-zhon52t6jj]::after { width: 14px; height: 14px; }
.bkm-check-toggle.on[b-zhon52t6jj] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
.bkm-check-toggle.on .bkm-toggle-knob[b-zhon52t6jj] { background: var(--accent); }
.bkm-check-toggle.on .bkm-toggle-knob[b-zhon52t6jj]::after { transform: translateX(16px); }

@media (max-width: 640px) {
    .bkm-checks[b-zhon52t6jj] { flex-direction: column; }
}

/* Inline confirm (uncheck) */
.bkm-confirm[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0 10px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    font-size: 13px;
    color: var(--text-primary);
}
.bkm-confirm-actions[b-zhon52t6jj] { display: flex; gap: 6px; flex-shrink: 0; }
.bkm-confirm-actions .btn[b-zhon52t6jj] { height: 30px; padding: 0 12px; font-size: 12px; }

/* Economic summary card */
.bkm-econ-card[b-zhon52t6jj] {
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    position: sticky;
    top: 0;
}
/* Caption sopra il selettore modalità prezzo. */
.bkm-seg-lbl[b-zhon52t6jj] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.bkm-seg[b-zhon52t6jj] {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.bkm-seg-btn[b-zhon52t6jj] {
    flex: 1 1 0;
    padding: 7px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.bkm-seg-btn:hover[b-zhon52t6jj] { color: var(--text-primary); }
.bkm-seg-btn.active[b-zhon52t6jj] { background: var(--accent); color: #fff; }
/* Pulsante "Giorno per giorno" accanto a "Prezzo totale": non si allarga come i segmenti. */
.bkm-seg-daily[b-zhon52t6jj] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    line-height: 0;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.bkm-seg-daily:hover:not(:disabled)[b-zhon52t6jj] { color: var(--text-primary); }
.bkm-seg-daily.active[b-zhon52t6jj] { background: var(--accent); color: #fff; }
.bkm-seg-daily:disabled[b-zhon52t6jj] { opacity: .4; cursor: default; }
/* Nota sotto il totale (× notti, "da tariffe giornaliere"). */
.bkm-econ-hint[b-zhon52t6jj] {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bkm-econ-pricelist[b-zhon52t6jj] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bkm-econ-pricelist .cx-select[b-zhon52t6jj] { flex: 1 1 auto; }
.bkm-econ-warn[b-zhon52t6jj] {
    font-size: 11.5px;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
}
.bkm-econ-rows[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 6px; }
.bkm-econ-row[b-zhon52t6jj] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bkm-econ-lbl[b-zhon52t6jj] { font-size: 12px; color: var(--text-secondary); }
.bkm-econ-val[b-zhon52t6jj] { font-size: 13px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-econ-val.strong[b-zhon52t6jj] { font-weight: 700; }
.bkm-econ-row.total .bkm-econ-lbl[b-zhon52t6jj],
.bkm-econ-row.balance .bkm-econ-lbl[b-zhon52t6jj] { font-weight: 700; color: var(--text-secondary); }
.bkm-econ-row.balance .bkm-econ-val[b-zhon52t6jj] { color: var(--accent); }
.bkm-econ-sep[b-zhon52t6jj] { height: 1px; background: var(--border); margin: 2px 0; }

/* Totale = fulcro del pannello importi: riga in risalto (riquadro accent) anziché una riga
   come le altre. Vale sia col valore in sola lettura sia con l'input (modalità Prezzo totale). */
.bkm-econ-row.total[b-zhon52t6jj] {
    padding: 7px 12px;
    margin: 2px 0;
    border-radius: 10px;
    background: #141416;
    border: 1px solid #000;
}
.bkm-econ-row.total .bkm-econ-lbl[b-zhon52t6jj] {
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}
.bkm-econ-row.total .bkm-econ-val.strong[b-zhon52t6jj] { font-size: 18px; color: #fff; }

/* Importi stile "hotel bureau": la colonna dei controlli a destra (pulsanti, textbox,
   valore in sola lettura) condivide la stessa larghezza, così i bordi restano allineati
   verticalmente. */
.bkm-econ-in[b-zhon52t6jj],
.bkm-econ-ctrl[b-zhon52t6jj] { width: 130px; max-width: 130px; flex: 0 0 130px; text-align: right; }
/* Valori in sola lettura nelle righe non riquadrate (Totale soggiorno, Saldo residuo):
   stesso rientro interno dei controlli accanto (10px padding + 1px bordo), così le cifre
   restano in colonna con quelle di pulsanti e textbox. */
.bkm-econ-row.subtotal span.bkm-econ-ctrl[b-zhon52t6jj],
.bkm-econ-row.balance span.bkm-econ-ctrl[b-zhon52t6jj] { padding-right: 11px; }

/* Importo come pulsante cliccabile (apre il dettaglio). */
.bkm-econ-btn[b-zhon52t6jj] {
    appearance: none;
    width: 130px;
    flex: 0 0 130px;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.bkm-econ-btn:hover[b-zhon52t6jj] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--bg-hover); }
.bkm-econ-btn.active[b-zhon52t6jj] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Acconti / Depositi in rosso, come nell'immagine di riferimento. */
.bkm-econ-btn.danger[b-zhon52t6jj] { color: var(--danger); }
.bkm-econ-btn.danger:hover[b-zhon52t6jj] { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.bkm-econ-btn.danger.active[b-zhon52t6jj] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

/* Dettaglio tassa di soggiorno in popup modale (famiglia .bkm-ratepop): una riga per
   ospite×tratto con stato (esente/ridotta), notti e importo per notte modificabile. */
.bkm-ttax-empty[b-zhon52t6jj] { padding: 14px 2px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.bkm-ttax-manual[b-zhon52t6jj] { padding: 0 2px 4px; font-size: 11px; color: var(--text-muted); }
.bkm-ttax-rows[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 2px; }
.bkm-ttax-row[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.bkm-ttax-row:last-child[b-zhon52t6jj] { border-bottom: 0; }
.bkm-ttax-guest[b-zhon52t6jj] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.bkm-ttax-dates[b-zhon52t6jj] { color: var(--text-muted); font-size: 11px; }
.bkm-ttax-status[b-zhon52t6jj] { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.bkm-ttax-nights[b-zhon52t6jj] { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.bkm-ttax-in[b-zhon52t6jj] { width: 84px; padding: 2px 6px; font-size: 12px; text-align: right; flex-shrink: 0; }
.bkm-ttax-rowtotal[b-zhon52t6jj] { font-weight: 600; white-space: nowrap; min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }

/* Guests tab: booker row (first guest) highlighted, with link icon and no remove button */
.bkm-row.booker[b-zhon52t6jj] { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); }
.bkm-rm-spacer[b-zhon52t6jj] { width: 32px; flex-shrink: 0; }

/* ── Popup "Stampa prenotazione": selezione parti da stampare ──────────────── */
.bkm-print-backdrop[b-zhon52t6jj] {
    position: fixed;
    inset: 0;
    z-index: 1300; /* sopra il modal prenotazione (1200) */
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: bkm-fade-b-zhon52t6jj 0.15s ease;
}
.bkm-print-modal[b-zhon52t6jj] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bkm-pop-b-zhon52t6jj 0.18s ease;
}
.bkm-print-head[b-zhon52t6jj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.bkm-print-head h3[b-zhon52t6jj] { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.bkm-print-subtitle[b-zhon52t6jj] { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.bkm-print-body[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.bkm-print-opt[b-zhon52t6jj] { font-size: 13px; }
.bkm-print-opt.is-disabled[b-zhon52t6jj] { opacity: .5; cursor: default; }
.bkm-print-sep[b-zhon52t6jj] { height: 1px; background: var(--border); margin: 2px 0; }
.bkm-print-foot[b-zhon52t6jj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
/* Stato "PDF pronto": messaggio positivo + pulsante di download a piena larghezza. */
.bkm-print-ready[b-zhon52t6jj] {
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
    font-size: 12px;
}
.bkm-print-download[b-zhon52t6jj] { width: 100%; justify-content: center; text-decoration: none; }
.bkm-print-error[b-zhon52t6jj] {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
    font-size: 12px;
}

/* ── Popup "Dettaglio retta": griglia tariffe per notte / override listino ─── */
.bkm-ratepop-backdrop[b-zhon52t6jj] {
    position: fixed;
    inset: 0;
    z-index: 1300; /* sopra il modal prenotazione (1200), come il popup di stampa */
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: bkm-fade-b-zhon52t6jj 0.15s ease;
}
.bkm-ratepop-modal[b-zhon52t6jj] {
    width: 100%;
    max-width: 560px;
    max-height: 84vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bkm-pop-b-zhon52t6jj 0.18s ease;
}
/* Variante larga per la griglia override del Listino (ospite × periodo + regole). */
.bkm-ratepop-modal.wide[b-zhon52t6jj] { max-width: 760px; }
/* Intestazione scura, identica al banner del modal prenotazione (.bkm-header): usata dai popup
   della famiglia "Dettaglio retta" (per notte, override Listino, avviso reprice). Il popup di
   stampa resta su .bkm-print-head (chiaro): non toccato per non introdurre un cambio non richiesto. */
.bkm-ratepop-head[b-zhon52t6jj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(160deg, #26262b 0%, #191a1d 100%);
}
.bkm-ratepop-head h3[b-zhon52t6jj] { margin: 0; font-size: 15px; font-weight: 700; color: #ffffff; }
.bkm-ratepop-head .bkm-print-subtitle[b-zhon52t6jj] { display: block; margin-top: 2px; font-size: 12px; color: #a3a3aa; }
.bkm-ratepop-head .bkm-close[b-zhon52t6jj] { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #d0d0d6; }
.bkm-ratepop-head .bkm-close:hover:not(:disabled)[b-zhon52t6jj] { background: rgba(255, 255, 255, 0.13); color: #ffffff; border-color: rgba(255, 255, 255, 0.24); }
.bkm-ratepop-hint[b-zhon52t6jj] {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
}
.bkm-ratepop-body[b-zhon52t6jj] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
}
.bkm-ratepop-cols[b-zhon52t6jj],
.bkm-ratepop-row[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: 130px 1fr 120px;
    gap: 10px;
    align-items: center;
}
.bkm-ratepop-cols[b-zhon52t6jj] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 2px 2px;
}
.bkm-ratepop-cols .num[b-zhon52t6jj] { text-align: right; }
.bkm-ratepop-row[b-zhon52t6jj] {
    padding: 4px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.bkm-ratepop-row:last-child[b-zhon52t6jj] { border-bottom: 0; }
.bkm-ratepop-date[b-zhon52t6jj] { font-size: 12px; color: var(--text-primary); white-space: nowrap; }
.bkm-ratepop-desc[b-zhon52t6jj] {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bkm-ratepop-in[b-zhon52t6jj] { text-align: right; }
.bkm-ratepop-foot[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
.bkm-ratepop-total[b-zhon52t6jj] { font-size: 13px; color: var(--text-primary); }
.bkm-ratepop-actions[b-zhon52t6jj] { display: flex; gap: 8px; }

/* Hint "sola lettura" nell'intestazione della tab Tariffe. */
.bkm-rates-hint[b-zhon52t6jj] { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* Editor tariffe inline nella tab "Tariffe" (ex popup "Dettaglio retta"): riusa le stesse
   classi di riga/override del popup, ma scorre nel flusso della tab invece che in un modal.
   Il footer perde il padding orizzontale del popup (la tab è già rientrata da .bkm-scroll). */
.bkm-rate-inline[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.bkm-rate-inline .bkm-ratepop-foot[b-zhon52t6jj] { padding-left: 2px; padding-right: 2px; }
.bkm-rate-inline .bkm-ovr-footleft[b-zhon52t6jj] { flex: 1; }
/* Riepilogo importi (Extra / Pagamenti): righe etichetta ↔ valore, come .bkm-rates-total ma multiplo. */
.bkm-sum-rows[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.bkm-sum-row[b-zhon52t6jj] { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.bkm-sum-row.total[b-zhon52t6jj] { font-size: 14px; }
.bkm-sum-row .strong[b-zhon52t6jj] { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-sum-row .neg[b-zhon52t6jj] { color: var(--danger); }

/* ── Avviso reprice: confronto prezzo salvato vs nuovo prezzo da listino ───── */
.bkm-reprice-compare[b-zhon52t6jj] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    justify-content: center;
    padding: 4px 0 8px;
}
.bkm-reprice-box[b-zhon52t6jj] {
    flex: 1;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
}
.bkm-reprice-box.new[b-zhon52t6jj] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-soft);
}
.bkm-reprice-lbl[b-zhon52t6jj] { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
.bkm-reprice-val[b-zhon52t6jj] { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.bkm-reprice-arrow[b-zhon52t6jj] { align-self: center; font-size: 16px; color: var(--text-muted); }
.bkm-reprice-periods[b-zhon52t6jj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 2px;
    border-top: 1px solid var(--border);
}
.bkm-reprice-period[b-zhon52t6jj] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.bkm-reprice-hint[b-zhon52t6jj] { padding-top: 6px; font-size: 11px; color: var(--text-muted); font-style: italic; }

/* ── Griglia override Listino (popup wide): ospite × periodo + regole + manuale ── */
.bkm-ovr-section[b-zhon52t6jj] {
    margin-top: 6px;
    padding: 4px 2px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
/* Layout ospite × periodo: un blocco flex per ospite = cella nome (fissa, centrata, alta quanto
   il blocco) + colonna delle righe-periodo. Ogni riga-periodo è una griglia a 5 colonne con la
   STESSA struttura dell'intestazione, così righe e header sono allineati e di altezza uniforme
   (niente più grid-row:span, che rendeva la 2ª riga più alta per la distribuzione del gap). */
.bkm-ovr-cols[b-zhon52t6jj] {
    display: flex;
    align-items: flex-end;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 2px 2px;
}
/* 110px cella nome + 1px bordo destro = 111px: identico all'offset del blocco righe sotto. */
.bkm-ovr-colguest[b-zhon52t6jj] { flex: 0 0 111px; }
.bkm-ovr-periodcols[b-zhon52t6jj],
.bkm-ovr-periodrow[b-zhon52t6jj] {
    display: grid;
    grid-template-columns: 1fr 100px 46px 110px 100px;
    gap: 10px;
    align-items: center;
}
.bkm-ovr-periodcols[b-zhon52t6jj] { flex: 1; }
.bkm-ovr-periodcols .num[b-zhon52t6jj] { text-align: right; }

.bkm-ovr-guestgroup[b-zhon52t6jj] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
}
.bkm-ovr-guestgroup:last-child[b-zhon52t6jj] { border-bottom: 0; }
.bkm-ovr-guestcell[b-zhon52t6jj] {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 4px 2px;
    border-right: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.bkm-ovr-guestname[b-zhon52t6jj] { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.bkm-ovr-guestage[b-zhon52t6jj] { font-size: 11px; color: var(--text-muted); }
.bkm-ovr-periods[b-zhon52t6jj] { flex: 1; display: flex; flex-direction: column; }
.bkm-ovr-periodrow[b-zhon52t6jj] { min-height: 40px; padding: 4px 0; }
.bkm-ovr-periodrow:not(:last-child)[b-zhon52t6jj] { border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.bkm-ovr-period[b-zhon52t6jj] { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkm-ovr-dates[b-zhon52t6jj] { margin-left: 6px; font-size: 11px; color: var(--text-muted); }
/* Segmento non coperto da alcun periodo del listino: stessa segnalazione rossa dei dati
   ospiti mancanti (badge sul tab + riga evidenziata + banner in testa al tab). */
.bkm-ovr-periodrow.uncovered .bkm-ovr-period[b-zhon52t6jj],
.bkm-ovr-periodrow.uncovered .bkm-ovr-dates[b-zhon52t6jj] { color: var(--danger); font-weight: 600; }
.bkm-ovr-periodrow.uncovered .bkm-ratepop-in[b-zhon52t6jj] { border-color: var(--danger); }
.bkm-rates-uncovered[b-zhon52t6jj] {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 8px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
}
.bkm-ovr-adjust[b-zhon52t6jj] { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkm-ovr-nights[b-zhon52t6jj] { font-size: 12px; text-align: right; color: var(--text-secondary); }
/* Prezzo/notte in sola lettura nel recap dell'override (occupa la colonna dell'input dell'editor). */
.bkm-ovr-rateval[b-zhon52t6jj] { font-size: 12px; text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-ovr-rowtotal[b-zhon52t6jj] { font-size: 12px; font-weight: 600; text-align: right; color: var(--text-primary); }
.bkm-ovr-rule[b-zhon52t6jj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.bkm-ovr-rule.ro[b-zhon52t6jj] { padding: 4px 2px; }
.bkm-ovr-ruledesc[b-zhon52t6jj] { flex: 1; min-width: 0; font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkm-ovr-ruledesc.off[b-zhon52t6jj] { color: var(--text-muted); text-decoration: line-through; }
.bkm-ovr-unit[b-zhon52t6jj] { width: 16px; font-size: 12px; color: var(--text-muted); }
.bkm-ovr-effect[b-zhon52t6jj] { min-width: 90px; font-size: 12px; font-weight: 600; text-align: right; color: var(--text-primary); }
.bkm-ovr-unitsel[b-zhon52t6jj] { width: 62px; flex-shrink: 0; }
.bkm-ovr-desc[b-zhon52t6jj] { flex: 1; min-width: 0; }
.bkm-ratepop-in.sm[b-zhon52t6jj] { width: 96px; flex-shrink: 0; }
.bkm-ovr-footleft[b-zhon52t6jj] { display: flex; align-items: center; }
/* Badge "prezzi personalizzati" sotto il combo listino della card importi. */
.bkm-ovr-badge[b-zhon52t6jj] {
    margin: 6px 0 12px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Redesign scheda prenotazione (tab Dettagli)
   ══════════════════════════════════════════════════════════════════════════ */

/* #4 Ripartizione adulti/bambini sotto lo stepper Persone. */
.bkm-guests-breakdown[b-zhon52t6jj] {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px; font-size: 12px; color: var(--text-secondary);
}
.bkm-guests-breakdown .sep[b-zhon52t6jj] { color: var(--text-muted); }

/* #3 Pulsante "Richiama ospiti" con etichetta (non più solo icona muta): affiancato allo
   stepper Persone, testo a peso normale (azione secondaria). */
.bkm-recall-btn.has-label[b-zhon52t6jj] {
    width: auto; height: 40px; padding: 0 12px;
    gap: 7px; font-size: 12px; font-weight: 400;
}
.bkm-recall-btn.has-label svg[b-zhon52t6jj] { flex-shrink: 0; }

/* ── Tab Pagamenti: ledger caparre/incassi (redesign consolidato) ──────────── */
/* Form inline per registrare un incasso: box tenue che lo stacca dalle righe. */
.bkm-pay-form[b-zhon52t6jj] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--radius);
    background: var(--accent-soft);
}
.bkm-pay-form-actions[b-zhon52t6jj] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.bkm-field-error[b-zhon52t6jj] { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* Riga pagamento (sola lettura) con azioni allineate a destra. */
.bkm-pay-row[b-zhon52t6jj] { align-items: center; }
.bkm-pay-actions[b-zhon52t6jj] { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Badge Fiscale / Non fiscale sulla riga di ledger. */
.bkm-badge[b-zhon52t6jj] {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--badge-radius);
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.bkm-badge.fiscal[b-zhon52t6jj] {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Pulsante compatto per azioni di riga (es. "Emetti fattura d'acconto"). */
.btn-sm[b-zhon52t6jj] { height: 28px; padding: 0 10px; font-size: 12px; }

/* #5 Impostazioni raggruppate in riquadri tenui (de-enfatizzate). Il blocco "Adempimenti
   di legge" isola i flag ISTAT / Pubblica Sicurezza. */
.bkm-flags[b-zhon52t6jj] {
    background: var(--bg-card-2); border: 1px dashed var(--border); border-radius: var(--radius);
    padding: 8px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px;
}
.bkm-flags-legal .bkm-switch[b-zhon52t6jj] { cursor: help; }
@media (max-width: 560px) { .bkm-flags[b-zhon52t6jj] { grid-template-columns: minmax(0, 1fr); } }

/* #8 Affordance "＋ Aggiungi" per i campi opzionali vuoti (compattamento). Testo a peso
   normale: è un'azione secondaria, non deve competere con le etichette. */
.bkm-addfield[b-zhon52t6jj] {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: 10px;
    background: transparent; color: var(--text-secondary); font: 400 12px 'Inter', sans-serif; cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.bkm-addfield:hover[b-zhon52t6jj] { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
/* "Aggiungi alias" evidenziato in azzurro: è l'alternativa rapida che il messaggio
   "nessun cliente trovato" del picker suggerisce accanto a "crea nuovo cliente". */
.bkm-name-alias .bkm-addfield[b-zhon52t6jj] { border-color: var(--info); color: var(--info); }
.bkm-name-alias .bkm-addfield:hover[b-zhon52t6jj] { border-color: var(--info); color: var(--info); background: var(--bg-hover); }
.bkm-addfield svg[b-zhon52t6jj] { flex-shrink: 0; }
/* Variante nella colonna importi: stessa larghezza dei controlli (allineamento). */
.bkm-econ-row .bkm-addfield[b-zhon52t6jj] { width: 130px; flex: 0 0 130px; height: 30px; justify-content: center; }

/* #2 Riepilogo importi: sottototale soggiorno, nota tassa, totale a saldo, saldo residuo. */
.bkm-econ-row.subtotal .bkm-econ-lbl[b-zhon52t6jj] { font-weight: 700; color: var(--text-secondary); }
.bkm-econ-row.subtotal .bkm-econ-val[b-zhon52t6jj] { font-weight: 700; color: var(--text-primary); }
.bkm-econ-note[b-zhon52t6jj] { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); font-style: italic; margin-top: 1px; }
.bkm-econ-sumnote[b-zhon52t6jj] { text-align: right; font-size: 10.5px; color: var(--text-muted); margin: -2px 2px 2px; }
.bkm-econ-row.balance .bkm-econ-val.neg[b-zhon52t6jj] { color: var(--danger); }

/* ── Audit trail (tab Audit) ─────────────────────────────────────────────── */
.bkm-audit[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 14px; }
.bkm-audit-title[b-zhon52t6jj] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: 4px; }
.bkm-audit-empty[b-zhon52t6jj] { font-size: 12.5px; color: var(--text-muted); padding: 10px 2px; font-style: italic; }
.bkm-audit-error[b-zhon52t6jj] { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--danger); padding: 8px 2px; }

/* Timeline: rail verticale a sinistra, un pallino per voce */
.bkm-timeline[b-zhon52t6jj] { list-style: none; margin: 0; padding: 0; position: relative; }
.bkm-timeline[b-zhon52t6jj]::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.bkm-audit-item[b-zhon52t6jj] { position: relative; padding: 0 0 14px 22px; }
.bkm-audit-item:last-child[b-zhon52t6jj] { padding-bottom: 2px; }
.bkm-audit-dot[b-zhon52t6jj] { position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--bg-card); }
.bkm-audit-item.pay   .bkm-audit-dot[b-zhon52t6jj] { border-color: var(--success); }
.bkm-audit-item.doc   .bkm-audit-dot[b-zhon52t6jj] { border-color: var(--info); }
.bkm-audit-item.order .bkm-audit-dot[b-zhon52t6jj] { border-color: var(--warning); }
.bkm-audit-item.hk    .bkm-audit-dot[b-zhon52t6jj] { border-color: var(--accent); }
.bkm-audit-item.tax   .bkm-audit-dot[b-zhon52t6jj] { border-color: var(--text-muted); }
.bkm-audit-item.booking .bkm-audit-dot[b-zhon52t6jj] { border-color: var(--accent); }

.bkm-audit-body[b-zhon52t6jj] { display: flex; flex-direction: column; gap: 3px; }
.bkm-audit-line[b-zhon52t6jj] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.bkm-audit-action[b-zhon52t6jj] { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bkm-audit-val[b-zhon52t6jj] { font-size: 12.5px; font-weight: 700; color: var(--text-primary); font-family: var(--mono); }
.bkm-audit-sum[b-zhon52t6jj] { font-size: 12px; color: var(--text-secondary); }

.bkm-audit-changes[b-zhon52t6jj] { list-style: none; margin: 2px 0 0; padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius); }
.bkm-audit-changes li[b-zhon52t6jj] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; }
.bkm-audit-field[b-zhon52t6jj] { min-width: 120px; color: var(--text-muted); font-weight: 600; }
.bkm-audit-old[b-zhon52t6jj] { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.bkm-audit-arrow[b-zhon52t6jj] { color: var(--text-muted); }
.bkm-audit-new[b-zhon52t6jj] { color: var(--text-primary); font-weight: 600; }

.bkm-audit-meta[b-zhon52t6jj] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.bkm-audit-actor[b-zhon52t6jj] { font-weight: 600; color: var(--text-secondary); }
.bkm-audit-actor.sys[b-zhon52t6jj] { display: inline-block; padding: 1px 7px; border-radius: var(--badge-radius); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.bkm-audit-sep[b-zhon52t6jj] { color: var(--border-strong); }
.bkm-audit-time[b-zhon52t6jj] { font-family: var(--mono); }
/* /Components/Pages/Bookings/BookingGroupModal.razor.rz.scp.css */
/* Scoped styling for BookingGroupModal — a single-form modal over a full-viewport backdrop.
   Reuses the global form/button utilities (.cx-input, .cx-select, .btn) and the theme tokens. */

.grp-backdrop[b-fy4xyd0iot] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.grp-modal[b-fy4xyd0iot] {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.grp-header[b-fy4xyd0iot] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.grp-eyebrow[b-fy4xyd0iot] {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.grp-title[b-fy4xyd0iot] {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.grp-close[b-fy4xyd0iot] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.grp-close:hover:not(:disabled)[b-fy4xyd0iot] { color: var(--text-primary); border-color: var(--border-strong); }
.grp-close:disabled[b-fy4xyd0iot] { opacity: .55; cursor: not-allowed; }

.grp-state[b-fy4xyd0iot] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.grp-state.err[b-fy4xyd0iot] { color: var(--danger, #e5484d); }

.grp-error[b-fy4xyd0iot] {
    margin: 12px 20px 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(229, 72, 77, 0.12);
    border: 1px solid rgba(229, 72, 77, 0.4);
    color: var(--danger, #e5484d);
    font-size: 13px;
}

.grp-scroll[b-fy4xyd0iot] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 20px 20px;
    min-height: 0;
}

.grp-section[b-fy4xyd0iot] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.grp-section:first-child[b-fy4xyd0iot] { margin-top: 0; }
.grp-section[b-fy4xyd0iot]::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.grp-field[b-fy4xyd0iot] { margin-bottom: 12px; }

.grp-label[b-fy4xyd0iot] {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.grp-row3[b-fy4xyd0iot] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.grp-nights[b-fy4xyd0iot] { text-align: center; }

.grp-nights-num[b-fy4xyd0iot] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 6px 0;
}

.grp-check-field .grp-check[b-fy4xyd0iot] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px 0;
    cursor: pointer;
}

/* ── Tour leader picker ───────────────────────────────────────────── */
.grp-leader-line[b-fy4xyd0iot] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grp-leader-text[b-fy4xyd0iot] {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
    color: var(--text-primary);
    font-size: 13px;
}

.grp-leader-text.muted[b-fy4xyd0iot] { color: var(--text-muted); }

.grp-leader-btn[b-fy4xyd0iot] { flex: 0 0 auto; white-space: nowrap; }

.grp-leader-picker[b-fy4xyd0iot] {
    margin: -4px 0 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
}

.grp-leader-empty[b-fy4xyd0iot] {
    padding: 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.grp-leader-results[b-fy4xyd0iot] {
    margin-top: 8px;
    max-height: 240px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grp-leader-item[b-fy4xyd0iot] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-primary);
}

.grp-leader-item:hover[b-fy4xyd0iot] { background: var(--bg-hover); border-color: var(--border); }
.grp-leader-name[b-fy4xyd0iot] { font-size: 13px; font-weight: 600; }
.grp-leader-meta[b-fy4xyd0iot] { font-size: 11px; color: var(--text-muted); }

.grp-footer[b-fy4xyd0iot] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .grp-row3[b-fy4xyd0iot] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Bookings/BookingsGrid.razor.rz.scp.css */
/* Scoped styles for BookingsGrid.razor — booking list grid + search toolbar.
   Mirrors the CustomersList master list (cx-*) but stands alone (no side detail);
   row click opens BookingDetailModal. Global helpers (.cx-input, .btn, .spinner)
   come from app.css. */

.bk-shell[b-0v9nose4uy] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.bk-master[b-0v9nose4uy] {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
    /* Larghezza fissa del badge stato (e della relativa colonna): sufficiente per l'etichetta
       più lunga della lookup ("In attesa di conferma"). Unica fonte, riusata in griglia + badge. */
    --bk-status-w: 176px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.bk-toolbar[b-0v9nose4uy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
.bk-toolbar-title[b-0v9nose4uy] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bk-toolbar-title b[b-0v9nose4uy] { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.bk-toolbar-title span[b-0v9nose4uy] { font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.bk-toolbar-actions[b-0v9nose4uy] { display: flex; gap: 8px; align-items: center; }

.bk-search-group[b-0v9nose4uy] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card-2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}
.bk-search-group:hover[b-0v9nose4uy] { border-color: var(--border-strong); background: var(--bg-card); }
.bk-search-group:focus-within[b-0v9nose4uy] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    background: var(--bg-card);
}
.bk-search[b-0v9nose4uy] {
    width: 200px;
    min-width: 0;
    padding: 0 12px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: 500 13px 'Inter', sans-serif;
    outline: none;
}
.bk-search[b-0v9nose4uy]::placeholder { color: var(--text-muted); opacity: .75; font-weight: 400; }

.bk-icon-btn[b-0v9nose4uy] {
    appearance: none;
    border: 0;
    border-left: 1px solid var(--border);
    background: transparent;
    width: 38px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.bk-icon-btn:hover[b-0v9nose4uy] { background: var(--bg-hover); color: var(--accent); }
.bk-icon-btn.active[b-0v9nose4uy] { background: var(--accent-soft); color: var(--accent); }
.bk-icon-btn svg[b-0v9nose4uy] { display: block; }

/* ── Advanced filter panel ───────────────────────────────────────────────── */

.bk-advanced[b-0v9nose4uy] {
    padding: 16px 18px;
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
    animation: bk-slide-down-b-0v9nose4uy 0.22s ease;
}
@keyframes bk-slide-down-b-0v9nose4uy {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bk-advanced-title[b-0v9nose4uy] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bk-advanced-title[b-0v9nose4uy]::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bk-advanced-grid[b-0v9nose4uy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}
.bk-advanced-field[b-0v9nose4uy] { display: flex; flex-direction: column; gap: 4px; }
.bk-advanced-field label[b-0v9nose4uy] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bk-advanced-actions[b-0v9nose4uy] { display: flex; justify-content: flex-end; gap: 8px; }

/* ── List grid ───────────────────────────────────────────────────────────── */

.bk-list[b-0v9nose4uy] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.bk-head[b-0v9nose4uy],
.bk-row[b-0v9nose4uy] {
    display: grid;
    /* number | room | checkin | checkout | nights | amount | channel | created | expiry | modifiedBy | status */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) 88px 88px 44px minmax(0, 0.8fr) minmax(0, 0.85fr) 84px 84px minmax(0, 0.9fr) var(--bk-status-w);
    gap: 12px;
    padding: 8px 18px;
    align-items: center;
}

.bk-head[b-0v9nose4uy] {
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 10px;
    padding-bottom: 10px;
}
.bk-head .bk-num[b-0v9nose4uy] { text-align: right; }

.bk-body[b-0v9nose4uy] { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

.bk-row[b-0v9nose4uy] {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    height: 54px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}
.bk-row:hover[b-0v9nose4uy] {
    background: var(--bg-hover);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
}

.bk-cell[b-0v9nose4uy] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 13px;
}
.bk-cell.mono[b-0v9nose4uy] { font-family: var(--mono); font-size: 12px; }
.bk-num[b-0v9nose4uy] { text-align: right; }
.bk-amount[b-0v9nose4uy] { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }

.bk-name-wrap[b-0v9nose4uy] { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.bk-name[b-0v9nose4uy] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bk-sub[b-0v9nose4uy] {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 400;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badge — nome + colore dalla lookup BookingStatuses via --st-color (fallback neutro).
   Larghezza FISSA (--bk-status-w) così tutti i badge sono allineati e contengono l'etichetta più lunga. */
.bk-status[b-0v9nose4uy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    width: var(--bk-status-w);
    box-sizing: border-box;
    border-radius: var(--badge-radius);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--st-color, var(--text-secondary));
    background: color-mix(in srgb, var(--st-color, var(--border)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-color, var(--border)) 34%, transparent);
}
.bk-status[b-0v9nose4uy]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Status multi-select (advanced filter) ──────────────────────────────────── */
.bk-status-filter[b-0v9nose4uy] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bk-status-filter > label[b-0v9nose4uy] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bk-status-chips[b-0v9nose4uy] { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-status-chip[b-0v9nose4uy] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--badge-radius);
    font: 600 12px 'Inter', sans-serif;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bk-status-chip[b-0v9nose4uy]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-color, var(--text-muted)); }
.bk-status-chip:hover[b-0v9nose4uy] { border-color: var(--border-strong); }
.bk-status-chip.on[b-0v9nose4uy] {
    color: var(--st-color, var(--accent));
    background: color-mix(in srgb, var(--st-color, var(--accent)) 14%, transparent);
    border-color: color-mix(in srgb, var(--st-color, var(--accent)) 45%, transparent);
}

/* Skeleton placeholders */
.bk-placeholder[b-0v9nose4uy] { opacity: 0.55; cursor: default; }
.bk-sk[b-0v9nose4uy] {
    display: inline-block;
    width: 70%;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-card) 0%, var(--border) 50%, var(--bg-card) 100%);
    background-size: 200% 100%;
    animation: bk-shimmer-b-0v9nose4uy 1.2s infinite;
}
.bk-sk.sm[b-0v9nose4uy] { width: 50%; }
@keyframes bk-shimmer-b-0v9nose4uy {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.bk-empty[b-0v9nose4uy] {
    padding: 48px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.bk-alert[b-0v9nose4uy] {
    margin: 12px 18px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.bk-alert.info[b-0v9nose4uy] { background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.3); color: var(--info); }
.bk-alert.err[b-0v9nose4uy] { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: var(--danger); }
/* /Components/Pages/Bookings/CoGuestPicker.razor.rz.scp.css */
/* Scoped styles for CoGuestPicker.razor — "recall companions" multi-select panel.
   Opens above BookingDetailModal (z-index 1300). Uses only global theme variables. */

.cgp-backdrop[b-l1mgdxfvhy] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 60%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: cgp-fade-b-l1mgdxfvhy 0.15s ease;
}
@keyframes cgp-fade-b-l1mgdxfvhy { from { opacity: 0; } to { opacity: 1; } }

.cgp-modal[b-l1mgdxfvhy] {
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cgp-pop-b-l1mgdxfvhy 0.18s ease;
}
@keyframes cgp-pop-b-l1mgdxfvhy {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.cgp-header[b-l1mgdxfvhy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.cgp-header-text[b-l1mgdxfvhy] { flex: 1; min-width: 0; }
.cgp-eyebrow[b-l1mgdxfvhy] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cgp-title[b-l1mgdxfvhy] { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.cgp-close[b-l1mgdxfvhy] {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: var(--bg-hover);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.cgp-close:hover[b-l1mgdxfvhy] { background: var(--bg-active); color: var(--text-primary); }

/* ── Body ───────────────────────────────────────────────────────────────────── */
.cgp-body[b-l1mgdxfvhy] { padding: 14px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.cgp-state[b-l1mgdxfvhy] { padding: 28px; text-align: center; color: var(--text-muted); }
.cgp-state.err[b-l1mgdxfvhy] { color: var(--danger); }

.cgp-empty[b-l1mgdxfvhy] { padding: 26px 20px; text-align: center; color: var(--text-muted); }
.cgp-empty svg[b-l1mgdxfvhy] { color: var(--text-muted); opacity: .7; }
.cgp-empty-title[b-l1mgdxfvhy] { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.cgp-empty-text[b-l1mgdxfvhy] { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }

.cgp-list[b-l1mgdxfvhy] { display: flex; flex-direction: column; gap: 6px; }

/* Row: avatar + name/meta + selection check. Whole row is the toggle button. */
.cgp-item[b-l1mgdxfvhy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.cgp-item:hover:not(:disabled)[b-l1mgdxfvhy] { background: var(--bg-hover); border-color: var(--border-strong); }
.cgp-item.sel[b-l1mgdxfvhy] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cgp-item.present[b-l1mgdxfvhy] { opacity: 0.6; cursor: default; }

.cgp-avatar[b-l1mgdxfvhy] {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.cgp-item-text[b-l1mgdxfvhy] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cgp-item-name[b-l1mgdxfvhy] { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgp-item-meta[b-l1mgdxfvhy] { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Selection check on the right: empty ring by default, accent-filled when selected. */
.cgp-check[b-l1mgdxfvhy] {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--on-accent);
}
.cgp-check.on[b-l1mgdxfvhy] { background: var(--accent); border-color: var(--accent); }

.cgp-tag[b-l1mgdxfvhy] {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.cgp-footer[b-l1mgdxfvhy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.cgp-count[b-l1mgdxfvhy] { font-size: 12.5px; color: var(--text-secondary); }
.cgp-footer-right[b-l1mgdxfvhy] { display: flex; align-items: center; gap: 8px; }
/* /Components/Pages/Bookings/RoomCalendarPicker.razor.rz.scp.css */
/* Scoped styles for RoomCalendarPicker.razor — room-assignment calendar popup.
   Opens above BookingDetailModal (z-index 1300). Uses the global theme variables. */

.rcp-backdrop[b-u0j1agie59] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 60%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: rcp-fade-b-u0j1agie59 0.15s ease;
}
@keyframes rcp-fade-b-u0j1agie59 { from { opacity: 0; } to { opacity: 1; } }

.rcp-modal[b-u0j1agie59] {
    width: 100%;
    max-width: 960px;
    max-height: 86vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rcp-pop-b-u0j1agie59 0.18s ease;
}
@keyframes rcp-pop-b-u0j1agie59 {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.rcp-header[b-u0j1agie59] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, #26262b 0%, #191a1d 100%);
}
.rcp-header-text[b-u0j1agie59] { flex: 1; min-width: 0; }
.rcp-eyebrow[b-u0j1agie59] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a3a3aa;
}
.rcp-title[b-u0j1agie59] { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: #fff; }
.rcp-range[b-u0j1agie59] { margin-top: 2px; font-size: 11px; color: #adadb4; }
.rcp-close[b-u0j1agie59] {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #d0d0d6;
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.rcp-close:hover[b-u0j1agie59] { background: rgba(255, 255, 255, 0.13); color: #fff; }

/* ── Toolbar (instructions + legend) ───────────────────────────────────────── */
.rcp-toolbar[b-u0j1agie59] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.rcp-instructions[b-u0j1agie59] { font-size: 12.5px; color: var(--text-secondary); }
.rcp-legend[b-u0j1agie59] { display: flex; gap: 14px; }
.rcp-legend-item[b-u0j1agie59] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.rcp-swatch[b-u0j1agie59] { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.rcp-swatch.free[b-u0j1agie59] { background: color-mix(in srgb, var(--success) 24%, transparent); }
.rcp-swatch.busy[b-u0j1agie59] { background: color-mix(in srgb, var(--danger) 42%, transparent); }
.rcp-swatch.past[b-u0j1agie59] {
    background: repeating-linear-gradient(45deg, var(--bg-card-2), var(--bg-card-2) 3px, transparent 3px, transparent 6px);
    opacity: 0.7;
}

/* ── Filters bar (view toggles) ────────────────────────────────────────────── */
.rcp-filters[b-u0j1agie59] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-card-2);
}
.rcp-filter-toggles[b-u0j1agie59] { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pill toggles, mirroring the check-in/out toggles in BookingDetailModal. */
.rcp-toggle[b-u0j1agie59] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.rcp-toggle-knob[b-u0j1agie59] {
    width: 26px; height: 14px;
    border-radius: 999px;
    background: var(--border-strong, #9a9aa0);
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease;
}
.rcp-toggle-knob[b-u0j1agie59]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.rcp-toggle.on[b-u0j1agie59] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.rcp-toggle.on .rcp-toggle-knob[b-u0j1agie59] { background: var(--accent); }
.rcp-toggle.on .rcp-toggle-knob[b-u0j1agie59]::after { transform: translateX(12px); }

/* ── Insufficient-capacity alert ───────────────────────────────────────────── */
.rcp-alert[b-u0j1agie59] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    font-size: 12.5px;
    line-height: 1.35;
    flex-shrink: 0;
}
.rcp-alert svg[b-u0j1agie59] { flex-shrink: 0; margin-top: 1px; }

/* ── Body / grid ───────────────────────────────────────────────────────────── */
/* The grid wrap is the single scroll container so the header row and the room-name
   column can stay pinned via position: sticky while the cells scroll underneath. */
.rcp-body[b-u0j1agie59] { padding: 14px 18px; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rcp-state[b-u0j1agie59] { padding: 28px; text-align: center; color: var(--text-muted); }
.rcp-state.err[b-u0j1agie59] { color: var(--danger); }

.rcp-grid-wrap[b-u0j1agie59] { overflow: auto; flex: 1; min-height: 0; width: 100%; }
/* Larghezza fissa colonna nome, il resto dello spazio si spartisce fra i giorni.
   --rcp-days (n° notti, impostato inline) governa la min-width: sotto ~31 notti il table
   sta nei ~924px del modal e i giorni riempiono; oltre, supera il wrap → scroll orizzontale. */
.rcp-grid[b-u0j1agie59] {
    --rcp-name-col: 180px;
    --rcp-day-min: 24px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed;
    min-width: calc(var(--rcp-name-col) + var(--rcp-days, 0) * var(--rcp-day-min));
}
.rcp-grid th[b-u0j1agie59], .rcp-grid td[b-u0j1agie59] { border: 1px solid var(--border); }

/* Pinned corner: sticky on both axes, above every other cell. */
.rcp-corner[b-u0j1agie59] {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 4;
    background: var(--bg-card-2);
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    width: var(--rcp-name-col);
    min-width: var(--rcp-name-col);
}
/* Pinned day-header row. */
.rcp-day[b-u0j1agie59] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 0;
    text-align: center;
    background: var(--bg-card-2);
}
.rcp-day.sun[b-u0j1agie59] { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card-2)); }
.rcp-day.past[b-u0j1agie59] { opacity: 0.45; }
.rcp-day-num[b-u0j1agie59] { display: block; font-weight: 700; font-size: 12px; color: var(--text-primary); }
.rcp-day-ini[b-u0j1agie59] { display: block; font-size: 9.5px; color: var(--text-muted); }

.rcp-room-row:hover .rcp-cell[b-u0j1agie59] { filter: brightness(1.08); }

/* Pinned room-name column. Hosts the room label (ellipsised) plus the beds badge. */
.rcp-room-name[b-u0j1agie59] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    max-width: 240px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rcp-room-name:hover[b-u0j1agie59] { background: var(--bg-hover); }
.rcp-room-name.busy[b-u0j1agie59] { color: var(--danger); font-weight: 600; }
.rcp-room-name.sel[b-u0j1agie59] { font-weight: 700; color: var(--text-primary); background: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); }
/* Rooms taking part in the assignment get a full-height accent bar on the left of the pinned
   name cell (spans the whole row height), so it's clear at a glance which rooms are in use. */
.rcp-room-name.assigned[b-u0j1agie59] { box-shadow: inset 3px 0 0 var(--accent); }
.rcp-room-label[b-u0j1agie59] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Beds (posti letto) badge: neutral by default, red when below the booking's guest count. */
.rcp-beds[b-u0j1agie59] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}
.rcp-beds svg[b-u0j1agie59] { opacity: 0.85; }
.rcp-beds.insufficient[b-u0j1agie59] {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.rcp-cell[b-u0j1agie59] { height: 28px; text-align: center; vertical-align: middle; cursor: pointer; }
.rcp-cell.free[b-u0j1agie59] { background: color-mix(in srgb, var(--success) 14%, transparent); }
.rcp-cell.busy[b-u0j1agie59] { background: color-mix(in srgb, var(--danger) 34%, transparent); }
/* Sunday free cells get a slightly different tint; busy stays red regardless. */
.rcp-cell.free.sun[b-u0j1agie59] { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Past nights are locked: not clickable, dimmed with a hatch overlay. The selection
   check still shows (greyed) so the settled room for that night stays visible. */
.rcp-cell.past[b-u0j1agie59] {
    cursor: not-allowed;
    opacity: 0.55;
    background-image: repeating-linear-gradient(45deg, rgba(127, 127, 127, 0.18), rgba(127, 127, 127, 0.18) 4px, transparent 4px, transparent 8px);
}
.rcp-room-row:hover .rcp-cell.past[b-u0j1agie59] { filter: none; }

/* Selected night: an accent rounded block with a white check centred in the cell. The cell
   keeps its base free/busy colour; the block fills ~80% of the (now wider) cell so consecutive
   nights read as one continuous bar. max-width keeps it tidy on very short stays. */
.rcp-mark[b-u0j1agie59] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 40px;
    height: 20px;
    margin: 0 auto;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.rcp-footer[b-u0j1agie59] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.rcp-footer-right[b-u0j1agie59] { display: flex; align-items: center; gap: 8px; }
.rcp-gap-hint[b-u0j1agie59] { font-size: 12px; color: var(--danger); margin-right: 4px; }

/* ── Overbooking confirm ───────────────────────────────────────────────────── */
/* Shown above the picker (z-index over its 1300 backdrop) when the user confirms an
   assignment that overbooks a room already taken by another booking. */
.rcp-confirm-overlay[b-u0j1agie59] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: rcp-fade-b-u0j1agie59 0.12s ease;
}
.rcp-confirm-box[b-u0j1agie59] {
    width: 100%;
    max-width: 460px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    padding: 18px 20px;
}
.rcp-confirm-head[b-u0j1agie59] { display: flex; align-items: center; gap: 10px; color: var(--danger); margin-bottom: 6px; }
.rcp-confirm-head h4[b-u0j1agie59] { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.rcp-confirm-text[b-u0j1agie59] { font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin: 6px 0; }
.rcp-confirm-list[b-u0j1agie59] { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow: auto; }
.rcp-confirm-list li[b-u0j1agie59] {
    font-size: 13px;
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
}
.rcp-confirm-actions[b-u0j1agie59] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* /Components/Pages/Bookings/RoomQuickPicker.razor.rz.scp.css */
/* Scoped styles for RoomQuickPicker.razor — quick single-room picker.
   Opens above BookingDetailModal (z-index 1300, same layer as the calendar picker). Theme variables. */

.rqp-backdrop[b-flpoetf5dz] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 60%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: rqp-fade-b-flpoetf5dz 0.15s ease;
}
@keyframes rqp-fade-b-flpoetf5dz { from { opacity: 0; } to { opacity: 1; } }

.rqp-modal[b-flpoetf5dz] {
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rqp-pop-b-flpoetf5dz 0.18s ease;
}
@keyframes rqp-pop-b-flpoetf5dz {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header (mirrors RoomCalendarPicker for visual continuity) ──────────────── */
.rqp-header[b-flpoetf5dz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, #26262b 0%, #191a1d 100%);
}
.rqp-header-text[b-flpoetf5dz] { flex: 1; min-width: 0; }
.rqp-eyebrow[b-flpoetf5dz] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a3a3aa;
}
.rqp-title[b-flpoetf5dz] { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: #fff; }
.rqp-range[b-flpoetf5dz] { margin-top: 2px; font-size: 11px; color: #adadb4; }
.rqp-close[b-flpoetf5dz] {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #d0d0d6;
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.rqp-close:hover[b-flpoetf5dz] { background: rgba(255, 255, 255, 0.13); color: #fff; }

/* ── Body ──────────────────────────────────────────────────────────────────── */
.rqp-body[b-flpoetf5dz] { padding: 14px 18px; overflow: auto; flex: 1; min-height: 0; }
.rqp-state[b-flpoetf5dz] { padding: 28px; text-align: center; color: var(--text-muted); }
.rqp-state.err[b-flpoetf5dz] { color: var(--danger); }

/* ── Floor filter ──────────────────────────────────────────────────────────── */
.rqp-floors[b-flpoetf5dz] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rqp-floor-label[b-flpoetf5dz] { font-size: 12px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.rqp-floor-select[b-flpoetf5dz] { max-width: 220px; }
.rqp-count[b-flpoetf5dz] { margin-left: auto; font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }

/* ── Room buttons grid ─────────────────────────────────────────────────────── */
.rqp-grid[b-flpoetf5dz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.rqp-room[b-flpoetf5dz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 11px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.rqp-room:hover[b-flpoetf5dz] { background: var(--bg-hover); border-color: var(--border-strong, var(--border)); }
.rqp-room:active[b-flpoetf5dz] { transform: translateY(1px); }
.rqp-room.sel[b-flpoetf5dz] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.rqp-room-top[b-flpoetf5dz] { display: flex; align-items: center; gap: 8px; }
.rqp-room-name[b-flpoetf5dz] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
}
.rqp-beds[b-flpoetf5dz] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}
.rqp-beds svg[b-flpoetf5dz] { opacity: 0.85; }
.rqp-room-price[b-flpoetf5dz] { display: flex; align-items: baseline; gap: 4px; min-height: 18px; }
.rqp-price-val[b-flpoetf5dz] { font-size: 13.5px; font-weight: 700; color: var(--accent); }
.rqp-price-unit[b-flpoetf5dz] { font-size: 11px; color: var(--text-muted); }
.rqp-price-load[b-flpoetf5dz], .rqp-price-na[b-flpoetf5dz] { font-size: 13px; color: var(--text-muted); }

/* ── Empty state (no free room for the period) ─────────────────────────────── */
.rqp-empty[b-flpoetf5dz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 30px 20px;
    color: var(--text-secondary);
}
.rqp-empty svg[b-flpoetf5dz] { color: var(--warning, #e0a106); }
.rqp-empty-title[b-flpoetf5dz] { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.rqp-empty-text[b-flpoetf5dz] { font-size: 13px; color: var(--text-secondary); max-width: 340px; line-height: 1.4; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.rqp-footer[b-flpoetf5dz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.rqp-footer-right[b-flpoetf5dz] { display: flex; align-items: center; gap: 8px; }
.rqp-adv[b-flpoetf5dz] { display: inline-flex; align-items: center; gap: 6px; }
/* /Components/Pages/Bookings/SimpleServiceBookingModal.razor.rz.scp.css */
/* Scoped styles for SimpleServiceBookingModal.razor — modale "servizio semplice".
   Copia degli stili del booking completo, con il modale ridimensionato più compatto
   (solo Generale/Audit). Field inputs: global .cx-input/.cx-select/.cx-textarea (app.css). */

.bkm-backdrop[b-uhn7p1qk65] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: bkm-fade-b-uhn7p1qk65 0.15s ease;
}
@keyframes bkm-fade-b-uhn7p1qk65 { from { opacity: 0; } to { opacity: 1; } }

.bkm-modal[b-uhn7p1qk65] {
    width: 100%;
    /* Form ridotto (cliente + risorsa + slot + prezzo): popup compatto ad altezza-contenuto. */
    max-width: 560px;
    height: auto;
    max-height: 88vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bkm-pop-b-uhn7p1qk65 0.18s ease;
}
@keyframes bkm-pop-b-uhn7p1qk65 {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.bkm-header[b-uhn7p1qk65] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Banner scuro: grigio ardesia freddo, intonato alla palette, con testi chiari per una lettura agevole */
    background: linear-gradient(160deg, #26262b 0%, #191a1d 100%);
}
.bkm-header-text[b-uhn7p1qk65] { flex: 1; min-width: 0; }
.bkm-eyebrow[b-uhn7p1qk65] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bkm-title[b-uhn7p1qk65] {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Booking code (Id) under the title — selectable + copy button */
.bkm-code[b-uhn7p1qk65] { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; max-width: 100%; }
.bkm-code-text[b-uhn7p1qk65] {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-muted);
    user-select: all;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bkm-code-copy[b-uhn7p1qk65] {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
}
.bkm-code-copy:hover[b-uhn7p1qk65] { background: var(--bg-hover); color: var(--text-primary); }
.bkm-close[b-uhn7p1qk65] {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bkm-close:hover:not(:disabled)[b-uhn7p1qk65] { background: var(--bg-hover); color: var(--danger); border-color: var(--border-strong); }
.bkm-close:disabled[b-uhn7p1qk65] { opacity: .5; cursor: not-allowed; }

/* Testi e pulsanti del banner scuro: forzati a tinte chiare, indipendenti dal tema */
.bkm-header .bkm-eyebrow[b-uhn7p1qk65] { color: #a3a3aa; }
.bkm-header .bkm-title[b-uhn7p1qk65] { color: #ffffff; }
.bkm-header .bkm-code-text[b-uhn7p1qk65] { color: #adadb4; }
.bkm-header .bkm-code-copy[b-uhn7p1qk65] { color: #adadb4; }
.bkm-header .bkm-code-copy:hover[b-uhn7p1qk65] { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
.bkm-header .bkm-close[b-uhn7p1qk65] { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #d0d0d6; }
.bkm-header .bkm-close:hover:not(:disabled)[b-uhn7p1qk65] { background: rgba(255, 255, 255, 0.13); color: #ffffff; border-color: rgba(255, 255, 255, 0.24); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */

/* Sempre visibili: i tab restano in cima (sticky + non comprimibili), il corpo è l'unica
   area che scorre. Così header e tab non spariscono mai per scroll, su qualunque altezza. */
.bkm-tabs[b-uhn7p1qk65] {
    display: flex;
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    /* Scroll orizzontale per i tab su viewport stretti, MA niente scrollbar verticale:
       con overflow-x:auto il browser promuove overflow-y a "auto" e il -1px di margine dei
       tab fa comparire la barra verticale con le frecce. La fissiamo a hidden e nascondiamo
       visivamente anche quella orizzontale (lo scroll resta possibile con trackpad/shift+wheel). */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* Edge/IE legacy */
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.bkm-tabs[b-uhn7p1qk65]::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
.bkm-tab[b-uhn7p1qk65] {
    appearance: none;
    border: 0;
    background: transparent;
    flex: 1 1 0;
    min-width: max-content;
    padding: 12px 12px;
    font: 600 12px 'Inter', sans-serif;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
    margin-bottom: -1px;
}
.bkm-tab:hover[b-uhn7p1qk65] { color: var(--text-primary); }
.bkm-tab.active[b-uhn7p1qk65] { color: var(--accent); border-bottom-color: var(--accent); }

/* Segnalazione errori nel tab: etichetta rossa + badge col numero di campi da completare.
   Definito dopo .active così un tab attivo ma in errore resta evidenziato in rosso. */
.bkm-tab.has-error[b-uhn7p1qk65] { color: var(--danger); }
.bkm-tab.has-error.active[b-uhn7p1qk65] { border-bottom-color: var(--danger); }
.bkm-tab-badge[b-uhn7p1qk65] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.bkm-scroll[b-uhn7p1qk65] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    /* min-height:0 (non 220px) così il corpo può ridursi e scorrere internamente anche su
       viewport bassi, lasciando header/tab/footer sempre a schermo. */
    min-height: 0;
}

.bkm-state[b-uhn7p1qk65] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 60px 18px;
    color: var(--text-muted);
    font-size: 14px;
    min-height: 220px;
}
.bkm-state.err[b-uhn7p1qk65] { color: var(--danger); }

.bkm-error[b-uhn7p1qk65] {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
    font-size: 12px;
}
/* Variante a blocco (dentro lo scroll): larghezza piena come le card cliente/ospite e
   distacco dal contenuto sottostante (i pulsanti). Il padding-top dello scroll fa da spazio sopra. */
.bkm-error.bkm-error-block[b-uhn7p1qk65] { margin: 0 0 14px; }

/* Avviso (ambra): salvataggio riuscito ma email di conferma non inviata. */
.bkm-warn[b-uhn7p1qk65] {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--warning);
    font-size: 12px;
}

/* Esito positivo (verde): email di conferma inviata. */
.bkm-info[b-uhn7p1qk65] {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
    font-size: 12px;
}

.bkm-section[b-uhn7p1qk65] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bkm-section[b-uhn7p1qk65]::before { content: ""; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; }
.bkm-section[b-uhn7p1qk65]::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bkm-section:first-child[b-uhn7p1qk65] { margin-top: 0; }

.bkm-fields[b-uhn7p1qk65] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.bkm-field[b-uhn7p1qk65] { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
/* Opzioni: short labels (Validità, Canale, Scadenza, Voucher) → narrower label column = wider inputs */
.bkm-fields-opts .bkm-field[b-uhn7p1qk65] { grid-template-columns: 90px minmax(0, 1fr); }
.bkm-label[b-uhn7p1qk65] { color: var(--text-muted); font-size: 12px; }
.bkm-value[b-uhn7p1qk65] { color: var(--text-primary); min-width: 0; display: flex; align-items: center; gap: 8px; }
.bkm-value .cx-input[b-uhn7p1qk65], .bkm-value .cx-select[b-uhn7p1qk65] { width: 100%; }
.bkm-value.ro[b-uhn7p1qk65] { font-size: 13px; }
.bkm-value.ro.mono[b-uhn7p1qk65] { font-family: var(--mono); font-size: 12px; }
.bkm-inline-meta[b-uhn7p1qk65] { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 720px) {
    .bkm-fields[b-uhn7p1qk65] { grid-template-columns: minmax(0, 1fr); }
}

/* Checkboxes block */
.bkm-checks[b-uhn7p1qk65] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.bkm-check[b-uhn7p1qk65] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-primary); font-size: 13px; }
.bkm-check input[b-uhn7p1qk65] { accent-color: var(--accent); cursor: pointer; }

/* Impostazioni come interruttori (toggle): checkbox nativo nascosto + traccia/pallina stilizzate,
   stessa estetica dei toggle Check-in/Check-out. Il binding @bind resta sull'input. */
.bkm-switch[b-uhn7p1qk65] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-primary); font-size: 13px; }
.bkm-switch input[b-uhn7p1qk65] { position: absolute; opacity: 0; width: 0; height: 0; }
.bkm-switch-track[b-uhn7p1qk65] {
    position: relative;
    width: 30px; height: 16px;
    border-radius: 999px;
    background: var(--border-strong, #9a9aa0);
    flex-shrink: 0;
    transition: background .15s ease;
}
.bkm-switch-track[b-uhn7p1qk65]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.bkm-switch input:checked + .bkm-switch-track[b-uhn7p1qk65] { background: var(--accent); }
.bkm-switch input:checked + .bkm-switch-track[b-uhn7p1qk65]::after { transform: translateX(14px); }
.bkm-switch input:focus-visible + .bkm-switch-track[b-uhn7p1qk65] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Notes blocks */
.bkm-fields-block[b-uhn7p1qk65] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bkm-block-label[b-uhn7p1qk65] { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.bkm-fields-block .cx-textarea[b-uhn7p1qk65] { min-height: 90px; }

/* Customer hint + placeholders */
.bkm-hint[b-uhn7p1qk65] { margin-top: 10px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.bkm-placeholder[b-uhn7p1qk65] {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
}

/* ── Child collections ───────────────────────────────────────────────────── */

.bkm-coll-head[b-uhn7p1qk65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.bkm-section-inline[b-uhn7p1qk65] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bkm-add[b-uhn7p1qk65] { height: 30px; padding: 0 10px; font-size: 12px; }

.bkm-rows[b-uhn7p1qk65] { display: flex; flex-direction: column; gap: 8px; }
.bkm-row[b-uhn7p1qk65] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-cellgroup[b-uhn7p1qk65] { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
.bkm-cellgroup.grow[b-uhn7p1qk65] { flex: 2 1 0; }
.bkm-cellgroup label[b-uhn7p1qk65] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bkm-cellgroup .cx-input[b-uhn7p1qk65], .bkm-cellgroup .cx-select[b-uhn7p1qk65] { width: 100%; }
/* Campo derivato in sola lettura (es. tariffa finale = base − sconto + extra). */
.bkm-cellgroup .cx-input.ro[b-uhn7p1qk65] { background: var(--bg-card); color: var(--text-secondary); cursor: default; }
/* Totale delle tariffe giornaliere, in calce alla tab "Tariffe". */
.bkm-rates-total[b-uhn7p1qk65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}
.bkm-rates-total .strong[b-uhn7p1qk65] { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-rm[b-uhn7p1qk65] {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    width: 32px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bkm-rm:hover[b-uhn7p1qk65] { background: rgba(239,68,68,.10); color: var(--danger); border-color: rgba(239,68,68,.3); }

/* ── Guest demographic editor (questura/ISTAT) ───────────────────────────── */
.bkm-guest[b-uhn7p1qk65] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-guest.booker[b-uhn7p1qk65] {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background: var(--accent-soft);
}
.bkm-guest.has-error[b-uhn7p1qk65] {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px var(--danger) inset;
}
.bkm-guest-head[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; }
.bkm-guest-tag[b-uhn7p1qk65] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bkm-guest-head .bkm-rm[b-uhn7p1qk65],
.bkm-guest-head .bkm-cust-icon[b-uhn7p1qk65] { margin-left: auto; }
.bkm-guest-fields[b-uhn7p1qk65] { display: flex; flex-wrap: wrap; gap: 10px; }
.bkm-guest-fields .bkm-cellgroup[b-uhn7p1qk65] { flex: 1 1 150px; min-width: 140px; }

/* Per-field error highlight set by the check-in gate. */
.bkm-cellgroup.bkm-field-err label[b-uhn7p1qk65] { color: var(--danger); }
.bkm-cellgroup.bkm-field-err .cx-input[b-uhn7p1qk65],
.bkm-cellgroup.bkm-field-err .cx-select[b-uhn7p1qk65] { border-color: var(--danger); }

/* Prenotante (Customer / capo): sola lettura + segnalazione errori multipli. */
.bkm-booker[b-uhn7p1qk65] {
    padding: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bkm-booker.has-error[b-uhn7p1qk65] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.bkm-booker-errors[b-uhn7p1qk65] {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 8px;
}
.bkm-booker-errors-title[b-uhn7p1qk65] { display: block; font-size: 12px; font-weight: 700; color: var(--danger); margin-bottom: 6px; }
/* Errori prenotante come bannerini (chip) in riga. */
.bkm-err-chips[b-uhn7p1qk65] { display: flex; flex-wrap: wrap; gap: 6px; }
.bkm-err-chip[b-uhn7p1qk65] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--danger);
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: 999px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.bkm-footer[b-uhn7p1qk65] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
/* Gruppo sinistro (Stampa) e destro (Annulla/Salva/Invia email): l'invio email resta a destra. */
.bkm-footer-left[b-uhn7p1qk65], .bkm-footer-right[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; }

/* ── Details tab: two-column layout (stay | economic summary) ──────────────── */

.bkm-details-grid[b-uhn7p1qk65] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}
.bkm-col-main[b-uhn7p1qk65], .bkm-col-econ[b-uhn7p1qk65] { min-width: 0; }
.bkm-col-econ .bkm-section[b-uhn7p1qk65] { margin-top: 0; }

/* Field that spans the full width of the 2-column .bkm-fields grid (stacked rows) */
.bkm-field-full[b-uhn7p1qk65] { grid-column: 1 / -1; }
.bkm-num-input[b-uhn7p1qk65] { width: 52px; text-align: center; }

@media (max-width: 900px) {
    .bkm-details-grid[b-uhn7p1qk65] { grid-template-columns: minmax(0, 1fr); }
}

/* Name + alias row, with the customer link icon beside the name */
.bkm-name-row[b-uhn7p1qk65] { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
.bkm-name-field[b-uhn7p1qk65] { flex: 2 1 0; min-width: 0; }
.bkm-name-alias[b-uhn7p1qk65] { flex: 1 1 0; }

/* Alias + bottone colore attaccato a destra (override colore tableau: ColorHex=sfondo, ColorText=testo).
   Input arrotondato solo a sinistra, bottone arrotondato solo a destra: formano un unico pill. */
.bkm-alias-row[b-uhn7p1qk65] { display: flex; align-items: stretch; position: relative; }
.bkm-alias-row .bkm-alias-input[b-uhn7p1qk65] {
    flex: 1 1 auto; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0;
}
.bkm-alias-color-btn[b-uhn7p1qk65] {
    flex-shrink: 0;
    width: 38px;
    border: 1px solid var(--border);
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-top-right-radius: 9px; border-bottom-right-radius: 9px;
    background: var(--bg-card-2);
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    display: inline-grid; place-items: center;
    transition: filter .12s ease;
}
.bkm-alias-color-btn:hover[b-uhn7p1qk65] { filter: brightness(1.08); }
/* Overlay trasparente per chiudere il picker col click fuori */
.bkm-color-overlay[b-uhn7p1qk65] { position: fixed; inset: 0; z-index: 19; }
/* Popover scelta colori (sfondo + testo) */
.bkm-color-pop[b-uhn7p1qk65] {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    z-index: 20;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    display: flex; flex-direction: column; gap: 8px;
    min-width: 190px;
}
.bkm-color-row[b-uhn7p1qk65] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bkm-color-lbl[b-uhn7p1qk65] { font-size: 13px; color: var(--text-muted); }
.bkm-color-input[b-uhn7p1qk65] {
    width: 46px; height: 28px;
    border: 1px solid var(--border); border-radius: 6px;
    background: transparent; cursor: pointer; padding: 0;
}
.bkm-color-clear[b-uhn7p1qk65] {
    border: 0; background: transparent; color: var(--danger);
    font-size: 12px; cursor: pointer; padding: 2px 0; text-align: right;
}
.bkm-color-clear:hover[b-uhn7p1qk65] { text-decoration: underline; }

/* Scadenza + contatore giorni: data (larghezza ridotta) e badge "Giorni N"/"SCADUTO" affiancati.
   flex-wrap: su layout stretti il badge va a capo sotto la data invece di sovrapporsi al campo Voucher. */
.bkm-exp-value[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bkm-exp-value .cx-input[b-uhn7p1qk65] { width: 128px; flex: 0 0 auto; }
.bkm-exp-days[b-uhn7p1qk65] { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.bkm-exp-days-lbl[b-uhn7p1qk65] { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bkm-exp-days-num[b-uhn7p1qk65] { font-size: 15px; font-weight: 700; text-align: center; }
/* Scaduta: al posto del numero giorni mostra "SCADUTO" in rosso (bordo/icona data gestiti in app.css) */
.bkm-exp-days-scaduto[b-uhn7p1qk65] { font-size: 12px; font-weight: 800; color: var(--danger); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.bkm-name-field .bkm-label[b-uhn7p1qk65] { margin-bottom: 4px; }
.bkm-name-field > .cx-input[b-uhn7p1qk65] { width: 100%; }
.bkm-name-input-wrap[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; }
/* Box that wraps the main name/search input so the clear (×) can sit inside it */
.bkm-name-input-box[b-uhn7p1qk65] { position: relative; flex: 1 1 auto; min-width: 0; }
.bkm-name-input-box .cx-input[b-uhn7p1qk65] { width: 100%; font-weight: 600; }
.bkm-name-input.has-clear[b-uhn7p1qk65] { padding-right: 32px; }
/* Small clear button inside the textbox: unlinks the associated customer */
.bkm-name-clear[b-uhn7p1qk65] {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-grid; place-items: center;
    border: 0; background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bkm-name-clear:hover[b-uhn7p1qk65] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.bkm-cust-icon[b-uhn7p1qk65] {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    transition: filter .12s ease, border-color .12s ease, background .12s ease;
}
.bkm-cust-icon:hover[b-uhn7p1qk65] { filter: brightness(1.1); }
.bkm-cust-icon.linked[b-uhn7p1qk65] {
    color: #16a34a;
    border-color: color-mix(in srgb, #16a34a 45%, var(--border));
    background: color-mix(in srgb, #16a34a 12%, transparent);
}
.bkm-cust-icon.unlinked[b-uhn7p1qk65] {
    color: #f59e0b;
    border-color: color-mix(in srgb, #f59e0b 50%, var(--border));
    background: color-mix(in srgb, #f59e0b 12%, transparent);
}
/* Variante con etichetta: icona + testo ("Apri scheda cliente" / "Cerca e collega cliente"),
   col testo alla destra dell'icona. Eredita le tinte da .linked/.unlinked. */
.bkm-cust-icon.has-label[b-uhn7p1qk65] {
    width: auto;
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Gruppo azioni nell'header collassabile (icona cliente + rimuovi) */
.bkm-coll-head-actions[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Inline customer picker */
.bkm-cust-picker[b-uhn7p1qk65] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
    padding: 10px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bkm-cust-results[b-uhn7p1qk65] { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.bkm-cust-item[b-uhn7p1qk65] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bkm-cust-item:hover[b-uhn7p1qk65] { border-color: var(--accent); background: var(--bg-hover); }
.bkm-cust-name[b-uhn7p1qk65] { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bkm-cust-meta[b-uhn7p1qk65] { font-size: 11px; color: var(--text-muted); }
.bkm-cust-empty[b-uhn7p1qk65] { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12px; }
/* Bottone "crea nuovo cliente" mostrato nello stato vuoto del picker */
.bkm-cust-create[b-uhn7p1qk65] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bkm-cust-create:hover[b-uhn7p1qk65] { border-color: var(--accent); background: var(--bg-hover); }
/* Risultati ricerca cliente mostrati come dropdown sotto il textbox principale */
.bkm-cust-dropdown[b-uhn7p1qk65] { margin-top: -2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }

/* Room block + change-room button */
.bkm-room-block[b-uhn7p1qk65] {
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 12px;
}
.bkm-room-block .bkm-label[b-uhn7p1qk65] { margin-bottom: 4px; }
/* Numero persone (auto, sized to the narrow box/label) + Camera + Trattamento.
   align-items:start keeps the captions on one line; equal-height controls keep the
   boxes aligned, so "Camera" (caption + box) lines up with "Numero persone". */
.bkm-rt[b-uhn7p1qk65] { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; align-items: start; }
.bkm-rt-cell[b-uhn7p1qk65] { min-width: 0; display: flex; flex-direction: column; }
.bkm-rt-cell .cx-select[b-uhn7p1qk65] { width: 100%; }
.bkm-room-line[b-uhn7p1qk65] { display: flex; min-height: 38px; }

/* Camera come pulsante unico: tutta l'area è cliccabile e apre il calendario di assegnazione. */
.bkm-room-pick[b-uhn7p1qk65] {
    appearance: none;
    /* Larghezza ~ contenuto: il pulsante NON si allarga più per riempire la colonna
       (prima flex: 1 1 auto, a tutta larghezza). Ridotto di oltre il 60%. */
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 88px;
    max-width: 140px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bkm-room-pick:hover[b-uhn7p1qk65] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--bg-hover); }
/* Camera non assegnata per l'intero periodo (manca almeno una notte): pulsante in rosso,
   invito a completare l'assegnazione giorno per giorno. */
.bkm-room-pick.missing[b-uhn7p1qk65] {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}
.bkm-room-pick.missing:hover[b-uhn7p1qk65] {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 16%, transparent);
}
.bkm-room-pick.missing .bkm-room-pick-cta[b-uhn7p1qk65],
.bkm-room-pick.missing .bkm-room-num[b-uhn7p1qk65],
.bkm-room-pick.missing .bkm-room-arrow[b-uhn7p1qk65],
.bkm-room-pick.missing .bkm-room-today[b-uhn7p1qk65] { color: var(--danger); }
.bkm-room-pick-cta[b-uhn7p1qk65] { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Camera del giorno di riferimento: etichetta "Oggi" centrata sopra il numero, col numero
   affiancato dalle frecce (camere assegnate per i giorni precedenti/successivi). */
.bkm-room-switch-col[b-uhn7p1qk65] { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.bkm-room-switch-line[b-uhn7p1qk65] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bkm-room-today[b-uhn7p1qk65] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}
.bkm-room-num[b-uhn7p1qk65] { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkm-room-arrow[b-uhn7p1qk65] { font-size: 17px; font-weight: 700; line-height: 1; color: var(--accent); flex-shrink: 0; }

@media (max-width: 560px) { .bkm-rt[b-uhn7p1qk65] { grid-template-columns: 1fr; } }

/* Stay grid: dates stacked (left), nights centered spanning both rows, check blocks right-aligned */
.bkm-stay[b-uhn7p1qk65] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "arr nights chkin"
        "dep nights chkout";
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 10px;
}
.bkm-stay-arr[b-uhn7p1qk65] { grid-area: arr; }
.bkm-stay-dep[b-uhn7p1qk65] { grid-area: dep; }
.bkm-nights[b-uhn7p1qk65]   { grid-area: nights; }
.bkm-chkin[b-uhn7p1qk65]    { grid-area: chkin; }
.bkm-chkout[b-uhn7p1qk65]   { grid-area: chkout; }
.bkm-stay-date[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; }
.bkm-stay-date .bkm-label[b-uhn7p1qk65] { width: 86px; flex-shrink: 0; }
.bkm-date-sm[b-uhn7p1qk65] { max-width: 140px; }

/* Nights: label above, bold number below (two lines), centered between the dates */
.bkm-nights[b-uhn7p1qk65] { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding: 0 6px; }
.bkm-nights-lbl[b-uhn7p1qk65] { font-size: 11px; color: var(--text-muted); }
.bkm-nights-num[b-uhn7p1qk65] { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* Check blocks: toggle + reserved space for date & time, aligned to the right edge */
.bkm-stay-check[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; justify-self: end; }
/* Fixed-width toggles so "Check-in" and "Check-out" pills are identical and line up
   (otherwise the shorter label makes the two pills start at different x). Uses width, not
   min-width: the .bkm-toggle.sm rule below resets min-width to 0 with equal specificity. */
.bkm-stay-check .bkm-toggle[b-uhn7p1qk65] { width: 124px; justify-content: flex-start; flex-shrink: 0; }
.bkm-check-dt[b-uhn7p1qk65] { display: flex; gap: 6px; width: 232px; flex-shrink: 0; }
.bkm-check-dt .cx-input[b-uhn7p1qk65] { min-width: 0; }

@media (max-width: 640px) {
    .bkm-stay[b-uhn7p1qk65] { grid-template-columns: 1fr; grid-template-areas: "arr" "dep" "nights" "chkin" "chkout"; }
    .bkm-stay-check[b-uhn7p1qk65] { justify-self: start; }
    .bkm-check-dt[b-uhn7p1qk65] { width: auto; }
}

/* Check-in / check-out toggles */
.bkm-toggle[b-uhn7p1qk65] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 140px;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.bkm-toggle-knob[b-uhn7p1qk65] {
    width: 30px; height: 16px;
    border-radius: 999px;
    background: var(--border-strong, #9a9aa0);
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease;
}
.bkm-toggle-knob[b-uhn7p1qk65]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.bkm-toggle.on[b-uhn7p1qk65] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.bkm-toggle.on .bkm-toggle-knob[b-uhn7p1qk65] { background: var(--accent); }
.bkm-toggle.on .bkm-toggle-knob[b-uhn7p1qk65]::after { transform: translateX(14px); }
.bkm-toggle.sm[b-uhn7p1qk65] { min-width: 0; padding: 4px 10px 4px 6px; font-size: 11px; gap: 6px; }
.bkm-toggle.sm .bkm-toggle-knob[b-uhn7p1qk65] { width: 26px; height: 14px; }
.bkm-toggle.sm .bkm-toggle-knob[b-uhn7p1qk65]::after { width: 10px; height: 10px; }
.bkm-toggle.sm.on .bkm-toggle-knob[b-uhn7p1qk65]::after { transform: translateX(12px); }
.bkm-dt-date[b-uhn7p1qk65] { flex: 0 0 130px; max-width: 130px; }
.bkm-dt-time[b-uhn7p1qk65] { flex: 0 0 96px; max-width: 96px; }

/* Inline confirm (uncheck) */
.bkm-confirm[b-uhn7p1qk65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0 10px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    font-size: 13px;
    color: var(--text-primary);
}
.bkm-confirm-actions[b-uhn7p1qk65] { display: flex; gap: 6px; flex-shrink: 0; }
.bkm-confirm-actions .btn[b-uhn7p1qk65] { height: 30px; padding: 0 12px; font-size: 12px; }

/* Economic summary card */
.bkm-econ-card[b-uhn7p1qk65] {
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    position: sticky;
    top: 0;
}
.bkm-seg[b-uhn7p1qk65] {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.bkm-seg-btn[b-uhn7p1qk65] {
    flex: 1 1 0;
    padding: 7px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.bkm-seg-btn:hover[b-uhn7p1qk65] { color: var(--text-primary); }
.bkm-seg-btn.active[b-uhn7p1qk65] { background: var(--accent); color: #fff; }
/* Pulsante "Giorno per giorno" accanto a "Prezzo totale": non si allarga come i segmenti. */
.bkm-seg-daily[b-uhn7p1qk65] {
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.bkm-seg-daily:hover:not(:disabled)[b-uhn7p1qk65] { color: var(--text-primary); }
.bkm-seg-daily.active[b-uhn7p1qk65] { background: var(--accent); color: #fff; }
.bkm-seg-daily:disabled[b-uhn7p1qk65] { opacity: .4; cursor: default; }
/* Nota sotto il totale (× notti, "da tariffe giornaliere"). */
.bkm-econ-hint[b-uhn7p1qk65] {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bkm-econ-pricelist[b-uhn7p1qk65] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bkm-econ-pricelist .cx-select[b-uhn7p1qk65] { flex: 1 1 auto; }
.bkm-econ-warn[b-uhn7p1qk65] {
    font-size: 11.5px;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
}
.bkm-econ-rows[b-uhn7p1qk65] { display: flex; flex-direction: column; gap: 8px; }
.bkm-econ-row[b-uhn7p1qk65] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bkm-econ-lbl[b-uhn7p1qk65] { font-size: 12px; color: var(--text-muted); }
.bkm-econ-val[b-uhn7p1qk65] { font-size: 13px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-econ-val.strong[b-uhn7p1qk65] { font-weight: 700; }
.bkm-econ-row.total .bkm-econ-lbl[b-uhn7p1qk65],
.bkm-econ-row.balance .bkm-econ-lbl[b-uhn7p1qk65] { font-weight: 700; color: var(--text-secondary); }
.bkm-econ-row.balance .bkm-econ-val[b-uhn7p1qk65] { color: var(--accent); }
.bkm-econ-sep[b-uhn7p1qk65] { height: 1px; background: var(--border); margin: 2px 0; }

/* Importi stile "hotel bureau": la colonna dei controlli a destra (pulsanti, textbox,
   valore in sola lettura) condivide la stessa larghezza, così i bordi restano allineati
   verticalmente. */
.bkm-econ-in[b-uhn7p1qk65],
.bkm-econ-ctrl[b-uhn7p1qk65] { width: 130px; max-width: 130px; flex: 0 0 130px; text-align: right; }

/* Importo come pulsante cliccabile (apre il dettaglio). */
.bkm-econ-btn[b-uhn7p1qk65] {
    appearance: none;
    width: 130px;
    flex: 0 0 130px;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.bkm-econ-btn:hover[b-uhn7p1qk65] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--bg-hover); }
.bkm-econ-btn.active[b-uhn7p1qk65] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Acconti / Depositi in rosso, come nell'immagine di riferimento. */
.bkm-econ-btn.danger[b-uhn7p1qk65] { color: var(--danger); }
.bkm-econ-btn.danger:hover[b-uhn7p1qk65] { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.bkm-econ-btn.danger.active[b-uhn7p1qk65] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

/* Pannello di dettaglio dell'importo selezionato (drill-down). */
.bkm-econ-detail[b-uhn7p1qk65] {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 10px 12px;
}
.bkm-econ-detail-head[b-uhn7p1qk65] { display: flex; align-items: center; gap: 10px; }
.bkm-econ-detail-title[b-uhn7p1qk65] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.bkm-econ-detail-val[b-uhn7p1qk65] { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bkm-econ-detail-close[b-uhn7p1qk65] {
    appearance: none;
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: inline-grid; place-items: center;
    border: 0; background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bkm-econ-detail-close:hover[b-uhn7p1qk65] { background: var(--bg-hover); color: var(--text-primary); }
.bkm-econ-detail-empty[b-uhn7p1qk65] { margin-top: 8px; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Guests tab: booker row (first guest) highlighted, with link icon and no remove button */
.bkm-row.booker[b-uhn7p1qk65] { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); }
.bkm-rm-spacer[b-uhn7p1qk65] { width: 32px; flex-shrink: 0; }

/* ── Popup "Stampa prenotazione": selezione parti da stampare ──────────────── */
.bkm-print-backdrop[b-uhn7p1qk65] {
    position: fixed;
    inset: 0;
    z-index: 1300; /* sopra il modal prenotazione (1200) */
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: bkm-fade-b-uhn7p1qk65 0.15s ease;
}
.bkm-print-modal[b-uhn7p1qk65] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bkm-pop-b-uhn7p1qk65 0.18s ease;
}
.bkm-print-head[b-uhn7p1qk65] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.bkm-print-head h3[b-uhn7p1qk65] { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.bkm-print-subtitle[b-uhn7p1qk65] { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.bkm-print-body[b-uhn7p1qk65] { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.bkm-print-opt[b-uhn7p1qk65] { font-size: 13px; }
.bkm-print-opt.is-disabled[b-uhn7p1qk65] { opacity: .5; cursor: default; }
.bkm-print-sep[b-uhn7p1qk65] { height: 1px; background: var(--border); margin: 2px 0; }
.bkm-print-foot[b-uhn7p1qk65] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
/* Stato "PDF pronto": messaggio positivo + pulsante di download a piena larghezza. */
.bkm-print-ready[b-uhn7p1qk65] {
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
    font-size: 12px;
}
.bkm-print-download[b-uhn7p1qk65] { width: 100%; justify-content: center; text-decoration: none; }
.bkm-print-error[b-uhn7p1qk65] {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
    font-size: 12px;
}
/* /Components/Pages/Bookings/StayDateRangePicker.razor.rz.scp.css */
/* Scoped styles for StayDateRangePicker.razor — two-month range calendar popover.
   Opens above BookingDetailModal. Uses only the global theme variables (app.css). */

.sdp-backdrop[b-jf0aou8cjg] {
    position: fixed;
    inset: 0;
    z-index: 1350;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 45%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 24px 24px;
    animation: sdp-fade-b-jf0aou8cjg 0.15s ease;
}
@keyframes sdp-fade-b-jf0aou8cjg { from { opacity: 0; } to { opacity: 1; } }

.sdp-pop[b-jf0aou8cjg] {
    width: 100%;
    max-width: 640px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.6));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sdp-pop-b-jf0aou8cjg 0.18s ease;
}
@keyframes sdp-pop-b-jf0aou8cjg {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.sdp-head[b-jf0aou8cjg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sdp-head-text[b-jf0aou8cjg] { flex: 1; min-width: 0; }
.sdp-eyebrow[b-jf0aou8cjg] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sdp-title[b-jf0aou8cjg] { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sdp-close[b-jf0aou8cjg] {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: var(--bg-hover);
    color: var(--text-secondary);
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .12s ease, background .12s ease;
}
.sdp-close:hover[b-jf0aou8cjg] { color: var(--text-primary); background: var(--bg-active); }

/* ── Body / months ──────────────────────────────────────────────────────────── */
.sdp-body[b-jf0aou8cjg] { padding: 14px 18px; }
.sdp-months[b-jf0aou8cjg] { display: flex; gap: 28px; }
.sdp-month[b-jf0aou8cjg] { flex: 1 1 0; min-width: 0; }

.sdp-month-head[b-jf0aou8cjg] { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.sdp-navslot[b-jf0aou8cjg] { width: 28px; flex-shrink: 0; display: flex; }
.sdp-navslot-end[b-jf0aou8cjg] { justify-content: flex-end; }
.sdp-month-title[b-jf0aou8cjg] { flex: 1; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.sdp-navbtn[b-jf0aou8cjg] {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    width: 28px; height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.sdp-navbtn:hover:not(:disabled)[b-jf0aou8cjg] { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-strong); }
.sdp-navbtn:disabled[b-jf0aou8cjg] { opacity: 0.35; cursor: default; }

/* Grid: 7 columns, no gap so selected ranges read as a continuous band within a week row. */
.sdp-grid[b-jf0aou8cjg] { display: grid; grid-template-columns: repeat(7, 1fr); }
.sdp-dow[b-jf0aou8cjg] {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0 6px;
}
.sdp-cell[b-jf0aou8cjg] {
    appearance: none;
    border: none;
    background: transparent;
    min-height: 36px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    display: inline-grid;
    place-items: center;
    transition: background .1s ease, color .1s ease;
}
.sdp-cell.empty[b-jf0aou8cjg] { visibility: hidden; cursor: default; }
.sdp-cell:hover:not(:disabled):not(.sel-start):not(.sel-end)[b-jf0aou8cjg] {
    background: var(--bg-hover);
    border-radius: 8px;
}
.sdp-cell.weekend[b-jf0aou8cjg] { background: var(--bg-subtle); }
/* Today: accent number (screenshot); overridden by selection colours below. */
.sdp-cell.today[b-jf0aou8cjg] { color: var(--accent); font-weight: 800; }
/* In-range band + rounded start/end caps. */
.sdp-cell.in-range[b-jf0aou8cjg] { background: var(--accent-soft); color: var(--text-primary); }
.sdp-cell.sel-start[b-jf0aou8cjg], .sdp-cell.sel-end[b-jf0aou8cjg] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
.sdp-cell.sel-start[b-jf0aou8cjg] { border-radius: 8px 0 0 8px; }
.sdp-cell.sel-end[b-jf0aou8cjg] { border-radius: 0 8px 8px 0; }
.sdp-cell.sel-single[b-jf0aou8cjg] { border-radius: 8px; }
.sdp-cell:disabled[b-jf0aou8cjg] { opacity: 0.3; cursor: default; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.sdp-footer[b-jf0aou8cjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.sdp-nights[b-jf0aou8cjg] { display: flex; align-items: baseline; gap: 6px; min-height: 22px; }
.sdp-nights-num[b-jf0aou8cjg] { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.sdp-nights-lbl[b-jf0aou8cjg] { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sdp-footer-actions[b-jf0aou8cjg] { display: flex; gap: 8px; }

/* ── Responsive: stack to a single month on narrow viewports ─────────────────── */
@media (max-width: 640px) {
    .sdp-months[b-jf0aou8cjg] { flex-direction: column; gap: 18px; }
    .sdp-backdrop[b-jf0aou8cjg] { padding: 4vh 12px 12px; }
}
/* /Components/Pages/Configurations/DocumentTypesConfig.razor.rz.scp.css */
/* DocumentTypesConfig — MT9b. Guscio .panel-full overflow:hidden → corpo in .dtc-body.
   Controlli base (.cx-input, .btn*, .grid, .alert, .mono, .spinner) da app.css. */

.dtc-header-actions[b-s2cvbv54ul] { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dtc-body[b-s2cvbv54ul] { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 22px; min-height: 0; }
.dtc-empty[b-s2cvbv54ul] { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.dtc-hint[b-s2cvbv54ul] { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.btn-xs[b-s2cvbv54ul] { padding: 3px 9px; height: 26px; font-size: 11.5px; border-radius: 7px; }
.chip-mini[b-s2cvbv54ul] {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 600; background: var(--accent-soft); color: var(--accent);
}

.dtc-table[b-s2cvbv54ul] { width: 100%; }
.dtc-table th[b-s2cvbv54ul] { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-align: left; }
.dtc-table td[b-s2cvbv54ul] { padding: 8px 10px; font-size: 13px; vertical-align: middle; }
.dtc-c[b-s2cvbv54ul] { text-align: center; width: 72px; }
.dtc-c input[type=checkbox][b-s2cvbv54ul] { accent-color: var(--accent); cursor: pointer; }
.dtc-order[b-s2cvbv54ul] { width: 70px; height: 30px; padding: 2px 8px; text-align: right; }
.dtc-off[b-s2cvbv54ul] { opacity: 0.55; }

.dtc-name[b-s2cvbv54ul] { font-weight: 650; }
.dtc-sub[b-s2cvbv54ul] { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Anteprima del pulsante come apparirà in cassa (colori per-org). */
.dtc-chip[b-s2cvbv54ul] { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px;
    font-size: 12.5px; font-weight: 650; white-space: nowrap;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

/* Editor colori: swatch rapidi + due hex liberi. */
.dtc-colors[b-s2cvbv54ul] { display: flex; flex-direction: column; gap: 6px; }
.dtc-swatches[b-s2cvbv54ul] { display: flex; flex-wrap: wrap; gap: 4px; }
.dtc-swatch[b-s2cvbv54ul] { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-weight: 800; font-size: 12px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent); display: inline-flex; align-items: center; justify-content: center; }
.dtc-swatch:disabled[b-s2cvbv54ul] { cursor: not-allowed; opacity: .5; }
.dtc-hex[b-s2cvbv54ul] { display: flex; gap: 6px; }
.dtc-hex .cx-input[b-s2cvbv54ul] { width: 96px; height: 30px; padding: 2px 8px; font-size: 12px; }
/* /Components/Pages/Configurations/DuplicatePriceListModal.razor.rz.scp.css */
/* Scoped styling for DuplicatePriceListModal — single-form modal over a full-viewport
   backdrop. Reuses global utilities (.cx-input, .cx-color-picker, .btn, .spinner) + theme tokens. */

.dup-backdrop[b-rxqsuyrfm5] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.dup-modal[b-rxqsuyrfm5] {
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dup-header[b-rxqsuyrfm5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.dup-eyebrow[b-rxqsuyrfm5] {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.dup-title[b-rxqsuyrfm5] {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dup-close[b-rxqsuyrfm5] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.dup-close:hover:not(:disabled)[b-rxqsuyrfm5] { color: var(--text-primary); border-color: var(--border-strong); }
.dup-close:disabled[b-rxqsuyrfm5] { opacity: .55; cursor: not-allowed; }

.dup-error[b-rxqsuyrfm5] {
    margin: 12px 20px 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(229, 72, 77, 0.12);
    border: 1px solid rgba(229, 72, 77, 0.4);
    color: var(--danger, #e5484d);
    font-size: 13px;
}

.dup-scroll[b-rxqsuyrfm5] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 20px 20px;
    min-height: 0;
}

.dup-section[b-rxqsuyrfm5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.dup-section:first-child[b-rxqsuyrfm5] { margin-top: 0; }
.dup-section[b-rxqsuyrfm5]::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.dup-field[b-rxqsuyrfm5] { margin-bottom: 12px; }

.dup-label[b-rxqsuyrfm5] {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.dup-row2[b-rxqsuyrfm5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.dup-radio[b-rxqsuyrfm5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    padding: 4px 0;
    cursor: pointer;
}

.dup-hint[b-rxqsuyrfm5] {
    font-size: 11px;
    color: var(--text-muted);
}

.dup-note[b-rxqsuyrfm5] {
    font-size: 12px;
    color: var(--text-muted);
    margin: -2px 0 6px;
}

.dup-periods[b-rxqsuyrfm5] {
    max-height: 180px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--bg-card-2);
}

.dup-period[b-rxqsuyrfm5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    padding: 3px 0;
    cursor: pointer;
}

.dup-summary[b-rxqsuyrfm5] {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dup-preview[b-rxqsuyrfm5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dup-preview th[b-rxqsuyrfm5] {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}

.dup-preview td[b-rxqsuyrfm5] {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.dup-preview td.num[b-rxqsuyrfm5] { text-align: right; font-variant-numeric: tabular-nums; }
.dup-preview td.arrow[b-rxqsuyrfm5] { text-align: center; color: var(--text-muted); width: 24px; }
.dup-preview td.new[b-rxqsuyrfm5] { font-weight: 700; }

.dup-footer[b-rxqsuyrfm5] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .dup-row2[b-rxqsuyrfm5] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Configurations/TouristTaxRulesConfig.razor.rz.scp.css */
/* Master stretto / dettaglio largo: la griglia delle regole ha poche colonne
   (nome + attiva), mentre la scheda contiene i grid di periodi tariffari ed
   esenzioni che hanno bisogno di spazio. Inverte le proporzioni globali
   (.cx-master 60% / .cx-detail fisso 620px) di app.css. */
.cx-master[b-7xxag3c2s1] {
    flex: 0 0 340px;
    min-width: 300px;
    max-width: 380px;
}

.cx-detail[b-7xxag3c2s1] {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
}

/* Nella colonna stretta la toolbar va a capo: titolo sopra, ricerca + azioni sotto. */
.cx-master .cx-toolbar[b-7xxag3c2s1] {
    flex-wrap: wrap;
}

.cx-master .cx-search[b-7xxag3c2s1] {
    width: 100%;
    flex: 1 1 120px;
}

/* Con il dettaglio largo i campi scalari si dispongono su due coppie label+valore
   per riga; sotto i 900px si torna alla colonna singola. Le grid di periodi ed
   esenzioni restano a piena larghezza. */
.cx-detail .field-group[b-7xxag3c2s1] {
    grid-template-columns: 150px minmax(160px, 1fr) 150px minmax(160px, 1fr);
}

@media (max-width: 1400px) {
    .cx-detail .field-group[b-7xxag3c2s1] {
        grid-template-columns: 140px 1fr;
    }
}
/* /Components/Pages/Contabilita/ContatoriFiscali.razor.rz.scp.css */
/* Contatori fiscali (Contabilità) — MT9a. Guscio .panel-full overflow:hidden → corpo in .cnt-body.
   Controlli base (.cx-input, .btn*, .grid, .alert, .mono, .spinner) da app.css. */

.cnt-header-actions[b-7g0cxzetic] { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cnt-body[b-7g0cxzetic] { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 22px; min-height: 0; }
.cnt-empty[b-7g0cxzetic] { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.cnt-hint[b-7g0cxzetic] { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.btn-xs[b-7g0cxzetic] { padding: 3px 9px; height: 26px; font-size: 11.5px; border-radius: 7px; }

.cnt-table[b-7g0cxzetic] { width: 100%; }
.cnt-table th[b-7g0cxzetic] { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-align: left; }
.cnt-table td[b-7g0cxzetic] { padding: 6px 10px; font-size: 13px; vertical-align: middle; }
.cnt-num[b-7g0cxzetic] { text-align: right; }
.cnt-input[b-7g0cxzetic] { height: 30px; padding: 2px 8px; }
.cnt-input-num[b-7g0cxzetic] { width: 70px; text-align: right; }
.cnt-preview[b-7g0cxzetic] { color: var(--accent); }
/* /Components/Pages/Contabilita/Pagamenti.razor.rz.scp.css */
/* Pagamenti (cassa Contabilità) — redesign "cassa a due pannelli".
   Guscio .panel-full overflow:hidden → corpo scorre in .pay-body. Controlli base
   (.cx-input/.cx-select/.cx-textarea, .btn*, .chip, .alert, .status, .spinner) da app.css;
   qui il layout a due colonne, le sezioni, la tabella righe, il riepilogo e l'anteprima "carta". */

/* Scala tipografica — base 14px, allineata agli standard delle web-app gestionali
   (Ant Design/Material/Tailwind: corpo 14, secondari 12-13, titoli 16, controlli ~34-40px):
     corpo/righe/celle/controlli 14 · secondari/meta 13 · micro-kicker maiuscoli 11
     titolo sezione 16 · sottotitolo/nome 15 · totale grande 28.
   Le anteprime "carta" (fattura/scontrino) restano a scala di stampa reale. */
.pay-body[b-fltzqlwoxf] { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 16px 18px 22px; font-size: 14px; line-height: 1.5; }

.pay-reg-btn[b-fltzqlwoxf] { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.pay-reg-count[b-fltzqlwoxf] {
    min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px;
    background: var(--accent); color: var(--on-accent, #fff);
    font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* helper non globali */
.cx-field-label[b-fltzqlwoxf] { color: color-mix(in srgb, var(--text-muted) 88%, transparent); font-size: 12px;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; margin-bottom: 6px; }
.btn-xs[b-fltzqlwoxf] { padding: 4px 11px; height: 30px; font-size: 13px; border-radius: 7px; }
.cx-field[b-fltzqlwoxf] { margin-bottom: 13px; }
.mono[b-fltzqlwoxf] { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.chip-x[b-fltzqlwoxf] { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-muted);
    font-size: 16px; line-height: 1; padding: 0 0 0 4px; }
.chip-x:hover[b-fltzqlwoxf] { color: var(--danger); }

/* ── Layout a due pannelli ─────────────────────────────────────────────── */
/* Colonna destra (riepilogo + anteprima): floor 470px, cresce fino a ~0.6fr sugli schermi
   larghi così l'anteprima del conto ha più respiro invece di lasciar dilatare l'editor.
   Floor allargato per accogliere l'anteprima scontrino ingrandita (≈425px + margini). */
.pay-grid[b-fltzqlwoxf] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(470px, 0.6fr); gap: 16px; align-items: start; }
.pay-editor[b-fltzqlwoxf] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pay-summary[b-fltzqlwoxf] { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }

/* ── Card sezione ──────────────────────────────────────────────────────── */
.pay-card[b-fltzqlwoxf] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pay-card.quiet[b-fltzqlwoxf] { opacity: .55; }
/* Intestazione blocco (origine, righe, intestatario, incasso…): banda evidente con separatore,
   badge numerato pieno e titolo marcato — per distinguere nettamente i blocchi. */
.pay-sec-head[b-fltzqlwoxf] { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%;
    background: var(--bg-card-2); border: 0; border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; text-align: left; min-height: 54px; }
.pay-sec-btn[b-fltzqlwoxf] { cursor: pointer; }
.pay-step[b-fltzqlwoxf] { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--accent);
    color: var(--on-accent, #fff); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.pay-step.done[b-fltzqlwoxf] { background: var(--success); color: #fff; box-shadow: none; }
.pay-step.off[b-fltzqlwoxf] { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-strong); box-shadow: none; }
.pay-sec-title[b-fltzqlwoxf] { font-size: 16px; font-weight: 750; letter-spacing: .005em; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-sec-meta[b-fltzqlwoxf] { margin-left: auto; font-size: 13px; color: var(--text-muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pay-sec-body[b-fltzqlwoxf] { padding: 16px; }

/* Blocco che impedisce l'emissione: bordo/anello rosso + banda header rossa → evidenzia l'oggetto in errore. */
.pay-card-err[b-fltzqlwoxf] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); }
.pay-card-err > .pay-sec-head[b-fltzqlwoxf] { background: color-mix(in srgb, var(--danger) 10%, var(--bg-card-2));
    border-bottom-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.pay-card-err > .pay-sec-head .pay-sec-title[b-fltzqlwoxf] { color: var(--danger); }
.pay-card-err > .pay-sec-head .pay-step:not(.done)[b-fltzqlwoxf] { background: var(--danger); color: #fff; border: 0; box-shadow: none; }
.pay-chev[b-fltzqlwoxf] { margin-left: auto; color: var(--text-muted); transition: transform .25s ease; }
.pay-card.open .pay-chev[b-fltzqlwoxf] { transform: rotate(180deg); }
.pay-adv-wrap[b-fltzqlwoxf] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.pay-card.open .pay-adv-wrap[b-fltzqlwoxf] { grid-template-rows: 1fr; }
.pay-adv-wrap > div[b-fltzqlwoxf] { overflow: hidden; }

.pay-hint[b-fltzqlwoxf] { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px;
    border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-card-2); }

/* Editor bloccato dopo l'emissione: non modificabile (inert) + affievolito. */
.pay-editor.pay-locked[b-fltzqlwoxf] { opacity: .5; pointer-events: none; filter: saturate(.85); }
.pay-lock-note[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 11px 14px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600;
    color: var(--text-secondary); background: var(--bg-card-2);
    border: 1px solid var(--border); border-left: 3px solid var(--success); }

/* ── Ricerca + dropdown ────────────────────────────────────────────────── */
/* Input e "Mostra tutti" sulla stessa riga: basis 0 (il width:100% globale di .cx-input
   farebbe andare a capo il bottone), niente wrap. */
.pay-search[b-fltzqlwoxf] { position: relative; display: flex; gap: 8px; align-items: center; }
.pay-search > .cx-input[b-fltzqlwoxf] { flex: 1 1 0; min-width: 0; }
.pay-search > .btn[b-fltzqlwoxf] { flex-shrink: 0; white-space: nowrap; }
.pay-dd[b-fltzqlwoxf] { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; max-height: 320px; overflow-y: auto; }
.pay-dd-kick[b-fltzqlwoxf] { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted); padding: 10px 12px 4px; }
.pay-dd-row[b-fltzqlwoxf] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; }
.pay-dd-row:hover[b-fltzqlwoxf] { background: var(--bg-hover); }
.pay-rm[b-fltzqlwoxf] { flex-shrink: 0; font-size: 12px; font-weight: 700; background: var(--bg-card-2);
    border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; min-width: 26px; text-align: center; }
.pay-dd-grow[b-fltzqlwoxf] { flex: 1; min-width: 0; }
.pay-dd-grow b[b-fltzqlwoxf] { display: block; font-weight: 650; font-size: 14px; }
.pay-dd-grow span[b-fltzqlwoxf] { display: block; font-size: 12.5px; color: var(--text-muted); }
.pay-dd-acts[b-fltzqlwoxf] { display: flex; gap: 6px; flex-shrink: 0; }
.pay-empty[b-fltzqlwoxf] { padding: 12px; font-size: 13.5px; color: var(--text-muted); text-align: center; }
.pay-chips[b-fltzqlwoxf] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Chip selezione ben evidenti: colori invertiti rispetto al tema (scuri su tema chiaro,
   chiari su tema scuro), stesso schema di .pay-rec-av. */
.pay-chips .chip[b-fltzqlwoxf] { background: color-mix(in srgb, var(--text-primary) 92%, var(--bg-card));
    border-color: transparent; color: var(--bg-card); font-weight: 600; cursor: default; }
.pay-chips .chip:hover[b-fltzqlwoxf] { color: var(--bg-card); }
.pay-chips .chip-x[b-fltzqlwoxf] { color: color-mix(in srgb, var(--bg-card) 72%, transparent); }
.pay-chips .chip-x:hover[b-fltzqlwoxf] { color: var(--bg-card); }
.pay-src-hint[b-fltzqlwoxf] { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }

/* ── Segmented ─────────────────────────────────────────────────────────── */
.pay-seg[b-fltzqlwoxf] { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-card-2);
    border: 1px solid var(--border); border-radius: 9px; height: 38px; padding: 2px; gap: 2px; margin-bottom: 12px; }
.pay-seg.pay-seg-3[b-fltzqlwoxf] { max-width: 400px; }
.pay-seg.pay-seg-2[b-fltzqlwoxf] { max-width: 360px; margin-bottom: 4px; margin-top: 2px; }
.pay-billto-lbl[b-fltzqlwoxf] { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 10px; margin-bottom: 4px; }
.pay-seg button[b-fltzqlwoxf] { border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; cursor: pointer; }
.pay-seg button.on[b-fltzqlwoxf] { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-strong); }
.pay-seg button:disabled[b-fltzqlwoxf] { color: var(--text-muted); cursor: not-allowed; opacity: .6; }
.pay-seg.amber[b-fltzqlwoxf] { border-color: var(--req); background: var(--req-soft); }

/* ── Acconto ───────────────────────────────────────────────────────────── */
.pay-acc[b-fltzqlwoxf] { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-card-2); padding: 14px; }
.pay-acc .cx-field[b-fltzqlwoxf] { margin-bottom: 0; }
.pay-acc-amt[b-fltzqlwoxf] { width: 170px; font-size: 20px; font-weight: 700; height: 46px; }
.pay-acc-note[b-fltzqlwoxf] { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* ── Tabella righe ─────────────────────────────────────────────────────── */
.pay-linetable[b-fltzqlwoxf] { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.pay-lt-head[b-fltzqlwoxf], .pay-lt-row[b-fltzqlwoxf] {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) 58px 66px 148px; align-items: center; }
.pay-lt-head[b-fltzqlwoxf] { height: 32px; background: var(--bg-card-2); border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.pay-lt-head > div[b-fltzqlwoxf], .pay-lt-row > div[b-fltzqlwoxf] { padding: 0 10px; min-width: 0; }
.pay-lt-head .r[b-fltzqlwoxf], .pay-lt-row .r[b-fltzqlwoxf] { text-align: right; }
.pay-lt-group[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
    background: var(--bg-card-2); border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); }
.pay-lt-gm[b-fltzqlwoxf] { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600;
    color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pay-lt-row[b-fltzqlwoxf] { height: 50px; font-size: 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    cursor: pointer; position: relative; }
.pay-lt-row:last-child[b-fltzqlwoxf] { border-bottom: 0; }
.pay-lt-row:hover[b-fltzqlwoxf] { background: var(--bg-hover); }
.pay-lt-row.sel[b-fltzqlwoxf]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.pay-lt-row.off .pay-lt-desc[b-fltzqlwoxf], .pay-lt-row.off .mono[b-fltzqlwoxf] { opacity: .42; }
.pay-lt-desc[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.pay-lt-desc .t[b-fltzqlwoxf] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
/* Importo riga: allineato a destra, cifre tabellari incolonnate, spazio garantito (no ellissi). */
.pay-lt-row .r.mono[b-fltzqlwoxf] { font-size: 14px; }
.pay-money[b-fltzqlwoxf] { font-weight: 650; font-size: 14px; }
.pay-cbx[b-fltzqlwoxf] { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; margin: 0 auto; }
.pay-cbx.on[b-fltzqlwoxf] { background: var(--accent); border-color: var(--accent); }
.cc[b-fltzqlwoxf] { flex-shrink: 0; display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cc-room[b-fltzqlwoxf] { background: var(--accent-soft); color: var(--accent); }
.cc-fnb[b-fltzqlwoxf] { background: color-mix(in srgb, #0891B2 14%, transparent); color: #0e7490; }
.cc-city[b-fltzqlwoxf] { background: color-mix(in srgb, #7C3AED 14%, transparent); color: #6d28d9; }
.cc-dep[b-fltzqlwoxf] { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.cc-extra[b-fltzqlwoxf] { background: var(--bg-card-2); color: var(--text-secondary); border: 1px solid var(--border); }

.pay-dep-sub[b-fltzqlwoxf] { border: 1px solid var(--border); border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn, #d97706) 7%, var(--bg-card)); padding: 8px 12px; margin-bottom: 10px; }
.pay-dep-kick[b-fltzqlwoxf] { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--warn, #d97706); margin-bottom: 4px; }
.pay-dep-row[b-fltzqlwoxf] { display: flex; align-items: center; gap: 10px; height: 36px; cursor: pointer; font-size: 13.5px; }
.pay-dep-date[b-fltzqlwoxf] { color: var(--text-muted); font-size: 12.5px; }
.pay-dep-neg[b-fltzqlwoxf] { margin-left: auto; font-weight: 700; color: var(--success); }

.pay-selbar[b-fltzqlwoxf] { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); padding-top: 8px; }
.pay-selbar button[b-fltzqlwoxf] { background: none; border: 0; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 13.5px; }
.pay-selbar-sp[b-fltzqlwoxf] { flex: 1; }
.pay-split-soon[b-fltzqlwoxf] { color: var(--text-muted) !important; cursor: not-allowed; opacity: .6;
    border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; background: none; }
.pay-soon[b-fltzqlwoxf], .pay-est[b-fltzqlwoxf], .pay-sugg[b-fltzqlwoxf] { font-weight: 800; }
.pay-soon[b-fltzqlwoxf] { font-size: 9.5px; letter-spacing: .06em; background: color-mix(in srgb, #7C3AED 14%, transparent);
    color: #6d28d9; border-radius: 4px; padding: 1px 5px; text-transform: uppercase; }

.pay-skel[b-fltzqlwoxf] { height: 38px; border-radius: 8px; margin: 6px 0;
    background: linear-gradient(100deg, var(--bg-card-2) 40%, color-mix(in srgb, var(--accent) 8%, var(--bg-card-2)) 50%, var(--bg-card-2) 60%);
    background-size: 200% 100%; animation: pay-shimmer-b-fltzqlwoxf 1.4s infinite linear; }
@keyframes pay-shimmer-b-fltzqlwoxf { from { background-position: 120% 0; } to { background-position: -80% 0; } }
.pay-loading-note[b-fltzqlwoxf] { font-size: 12px; color: var(--text-muted); padding: 4px 2px; }

/* ── Tipo documento ────────────────────────────────────────────────────── */
.pay-dtypes[b-fltzqlwoxf] { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-dtype[b-fltzqlwoxf] { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; }
.pay-dtype:hover[b-fltzqlwoxf] { border-color: var(--border-strong); }
.pay-dtype.on[b-fltzqlwoxf] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pay-dtype.ghost[b-fltzqlwoxf] { border-style: dashed; }
.pay-sugg[b-fltzqlwoxf] { color: var(--accent); }

/* Tipi documento con colori per-org: color/background arrivano inline (style="…"), quindi
   qui deriviamo solo bordo e anello di selezione da currentColor (= colore testo del tipo).
   Il selettore [style] colpisce solo i pulsanti che hanno colori impostati; quelli senza
   ricadono sul tema. Nota dark-mode: gli sfondi sono hex chiari scelti dall'org (tag brand). */
.pay-dtype[style][b-fltzqlwoxf] { border-color: color-mix(in srgb, currentColor 26%, transparent); }
.pay-dtype[style]:hover[b-fltzqlwoxf] { border-color: color-mix(in srgb, currentColor 46%, transparent); }
.pay-dtype[style].on[b-fltzqlwoxf] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; font-weight: 700; }
/* Toggle "+ Altri documenti" e area secondari. */
.pay-dtype-more[b-fltzqlwoxf] { border-style: dashed; color: var(--text-muted); }
.pay-dtypes-sec[b-fltzqlwoxf] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--border); }
.pay-dnum[b-fltzqlwoxf] { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-muted); margin-top: 10px; align-items: center; }
.monochip[b-fltzqlwoxf] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--text-primary); }
.pay-est[b-fltzqlwoxf] { cursor: help; }
.pay-lock[b-fltzqlwoxf] { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }

/* ── Intestatario card ─────────────────────────────────────────────────── */
.pay-warnnote[b-fltzqlwoxf] { display: flex; gap: 8px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--req) 40%, transparent);
    background: var(--req-soft); border-radius: 9px; padding: 10px 12px; font-size: 12.5px;
    color: color-mix(in srgb, var(--req) 70%, var(--text-primary)); line-height: 1.5; margin-top: 8px; }
.pay-reccard[b-fltzqlwoxf] { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card-2); padding: 12px 14px; margin-top: 8px; }
.pay-rec-top[b-fltzqlwoxf] { display: flex; align-items: flex-start; gap: 10px; }
.pay-rec-av[b-fltzqlwoxf] { width: 38px; height: 38px; border-radius: 9px; background: color-mix(in srgb, var(--text-primary) 82%, var(--accent));
    color: var(--bg-card); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-rec-who[b-fltzqlwoxf] { flex: 1; min-width: 0; }
.pay-rec-who b[b-fltzqlwoxf] { display: block; font-size: 15px; font-weight: 700; }
.pay-rec-who span[b-fltzqlwoxf] { font-size: 13px; color: var(--text-muted); }
.pay-badges[b-fltzqlwoxf] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pay-badge[b-fltzqlwoxf] { height: 22px; padding: 0 10px; border-radius: var(--badge-radius); font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; }
.pay-badge.ok[b-fltzqlwoxf] { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pay-badge.warn[b-fltzqlwoxf] { background: var(--req-soft); color: var(--req); }
.pay-recform[b-fltzqlwoxf] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.pay-recform .cx-field[b-fltzqlwoxf] { margin-bottom: 0; }
.pay-recform-wide[b-fltzqlwoxf] { grid-column: 1 / -1; }

/* ── Incasso ───────────────────────────────────────────────────────────── */
.pay-check[b-fltzqlwoxf] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    color: var(--text-primary); font-size: 14px; }
.pay-check input[b-fltzqlwoxf] { accent-color: var(--accent); cursor: pointer; }
.pay-pay-row[b-fltzqlwoxf] { display: grid; grid-template-columns: 1fr 120px 150px 24px; gap: 8px; align-items: center; margin-bottom: 8px; }
.pay-pay-row .cx-input.right[b-fltzqlwoxf] { text-align: right; }
.pay-pay-email[b-fltzqlwoxf] { grid-column: 1 / -1; }
.pay-pay-tools[b-fltzqlwoxf] { display: flex; gap: 8px; margin: 2px 0 8px; }
.pay-cash[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-secondary); margin-bottom: 10px; }
.pay-cash .cx-input[b-fltzqlwoxf] { width: 120px; height: 34px; }
.pay-resto[b-fltzqlwoxf] { color: var(--success); }
.pay-uncnote[b-fltzqlwoxf] { border: 1px dashed var(--border-strong); border-radius: 9px; padding: 12px; font-size: 12.5px;
    color: var(--text-secondary); background: var(--bg-card-2); line-height: 1.5; }
.pay-residuo[b-fltzqlwoxf] { margin-top: 6px; }
.pay-res-track[b-fltzqlwoxf] { height: 4px; border-radius: 99px; background: var(--bg-card-2); border: 1px solid var(--border); overflow: hidden; }
.pay-res-fill[b-fltzqlwoxf] { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .32s ease; }
.pay-res-fill.over[b-fltzqlwoxf] { background: var(--danger); }
.pay-res-cap[b-fltzqlwoxf] { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.pay-res-cap b[b-fltzqlwoxf] { font-weight: 700; }
.pay-res-due[b-fltzqlwoxf] { color: var(--req); }
.pay-res-ok[b-fltzqlwoxf] { color: var(--success); font-weight: 700; }
.pay-res-over[b-fltzqlwoxf] { color: var(--danger); font-weight: 700; }

/* ── Riepilogo (colonna destra) ────────────────────────────────────────── */
.pay-totcard[b-fltzqlwoxf] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.pay-tot-head[b-fltzqlwoxf] { display: flex; align-items: center; gap: 9px; }
.pay-tot-ic[b-fltzqlwoxf] { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center; font-size: 17px; }
.pay-tot-tt b[b-fltzqlwoxf] { display: block; font-size: 16px; font-weight: 700; }
.pay-tot-tt span[b-fltzqlwoxf] { font-size: 13px; color: var(--text-muted); }
.pay-ghair[b-fltzqlwoxf] { height: 1px; margin: 10px 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }
.pay-trow[b-fltzqlwoxf] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 28px; font-size: 14px; color: var(--text-secondary); }
.pay-trow > span:first-child[b-fltzqlwoxf] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-trow > span:last-child[b-fltzqlwoxf] { flex-shrink: 0; text-align: right; }
.pay-trow .mono[b-fltzqlwoxf] { font-weight: 650; color: var(--text-primary); }
.pay-trow.pay-mut[b-fltzqlwoxf] { color: var(--text-muted); }
.pay-pos[b-fltzqlwoxf] { color: var(--success) !important; }
.pay-warnc[b-fltzqlwoxf] { color: var(--req) !important; }
.pay-iva-head[b-fltzqlwoxf] { display: grid; grid-template-columns: minmax(0, 1fr) 126px 112px; font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 2px 0 4px; }
.pay-iva-head .r[b-fltzqlwoxf] { text-align: right; }
.pay-iva-row[b-fltzqlwoxf] { display: grid; grid-template-columns: minmax(0, 1fr) 126px 112px; font-size: 13.5px; min-height: 26px; align-items: center; color: var(--text-secondary); }
.pay-iva-row > span:first-child[b-fltzqlwoxf] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-iva-row .r[b-fltzqlwoxf] { text-align: right; font-weight: 600; color: var(--text-primary); }
.pay-grand[b-fltzqlwoxf] { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 4px; }
.pay-grand .k[b-fltzqlwoxf] { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); min-width: 0; }
.pay-grand .v[b-fltzqlwoxf] { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; flex-shrink: 0; text-align: right; }
.pay-tot-empty[b-fltzqlwoxf] { font-size: 13px; color: var(--text-muted); padding: 12px 0; text-align: center; }
.pay-emit-wrap[b-fltzqlwoxf] { margin-top: 14px; }
.pay-emit-wrap .btn-primary[b-fltzqlwoxf] { width: 100%; height: 46px; font-size: 15px; }
/* Suggerimento neutro pre-tentativo (cosa manca); a tentativo fatto l'errore è nel banner .pay-err-top. */
.pay-emit-reason[b-fltzqlwoxf] { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* ── Banner errore (colonna destra, sopra il riepilogo) ─────────────────── */
.pay-err-top[b-fltzqlwoxf] { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    border-left: 3px solid var(--danger); border-radius: var(--radius-lg); }
.pay-err-ic[b-fltzqlwoxf] { flex-shrink: 0; font-size: 17px; line-height: 1.3; color: var(--danger); }
.pay-err-bd[b-fltzqlwoxf] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-err-bd b[b-fltzqlwoxf] { font-size: 14px; font-weight: 750; color: var(--danger); }
.pay-err-bd > span[b-fltzqlwoxf] { font-size: 13px; color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.pay-err-hint[b-fltzqlwoxf] { color: var(--text-muted) !important; font-size: 12px !important; }

/* ── Successo ──────────────────────────────────────────────────────────── */
.pay-success[b-fltzqlwoxf] { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 10%, var(--bg-card)), var(--bg-card) 55%);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: var(--radius-lg); padding: 20px 16px; text-align: center; }
.pay-ok-circ[b-fltzqlwoxf] { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 999px; border: 2px solid var(--success);
    color: var(--success); font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pay-success h3[b-fltzqlwoxf] { margin: 0; font-size: 17px; font-weight: 750; }
.pay-success-amt[b-fltzqlwoxf] { font-size: 13.5px; color: var(--text-secondary); margin-top: 4px; }
.pay-success-amt b[b-fltzqlwoxf] { color: var(--text-primary); }
.pay-success-status[b-fltzqlwoxf] { margin-top: 8px; }
.pay-success-acts[b-fltzqlwoxf] { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.pay-slink[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--bg-card-2);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }
.pay-slink a[b-fltzqlwoxf] { color: var(--accent); word-break: break-all; }
.pay-swarn[b-fltzqlwoxf] { font-size: 12px; color: var(--warn, #d97706); background: var(--req-soft); border-radius: 8px; padding: 8px 10px; margin-top: 8px; text-align: left; }
.pay-success-cta[b-fltzqlwoxf] { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pay-success-cta .btn[b-fltzqlwoxf] { width: 100%; }

/* ── Anteprima "carta" ─────────────────────────────────────────────────── */
.pay-papercard[b-fltzqlwoxf] { background: none; }
.pay-paper-h[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px; font-size: 12px;
    font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pay-live[b-fltzqlwoxf] { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--success);
    text-transform: none; letter-spacing: 0; font-weight: 700; }
.pay-live i[b-fltzqlwoxf] { width: 6px; height: 6px; border-radius: 99px; background: var(--success); }
.pay-sheet[b-fltzqlwoxf] { position: relative; background: #fff; color: #141821; border-radius: 3px;
    box-shadow: 0 1px 2px rgba(30,41,59,.14), 0 14px 44px rgba(30,41,59,.20); padding: 20px 22px; overflow: hidden; }
.pay-sheet[b-fltzqlwoxf]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(180deg, rgba(29,78,216,.30), transparent); }
.pay-wm[b-fltzqlwoxf] { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-22deg);
    font-size: 30px; font-weight: 800; letter-spacing: .18em; color: rgba(30,41,59,.06); pointer-events: none; white-space: nowrap; }
.pay-ph-top[b-fltzqlwoxf] { display: flex; justify-content: space-between; gap: 12px; }
.pay-ph-org b[b-fltzqlwoxf] { font-size: 12px; font-weight: 750; }
.pay-ph-doc[b-fltzqlwoxf] { text-align: right; }
.pay-ph-doc .k[b-fltzqlwoxf] { font-size: 8.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #1D4ED8; }
.pay-ph-doc .n[b-fltzqlwoxf] { font-size: 13px; font-weight: 750; }
.pay-ph-doc .d[b-fltzqlwoxf] { font-size: 8.5px; color: #8a919c; }
.pay-ph-dest[b-fltzqlwoxf] { margin: 14px 0 0 auto; width: 60%; font-size: 8.6px; line-height: 1.55; color: #3f4650; }
.pay-ph-dest .k[b-fltzqlwoxf] { font-size: 7.4px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: #8a919c; }
.pay-ph-dest b[b-fltzqlwoxf] { display: block; font-size: 10px; color: #141821; }
.pay-ptab[b-fltzqlwoxf] { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 8.8px; }
.pay-ptab th[b-fltzqlwoxf] { text-align: left; font-size: 7.2px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
    color: #8a919c; padding: 3px 4px; border-bottom: 1.5px solid #141821; }
.pay-ptab th.r[b-fltzqlwoxf], .pay-ptab td.r[b-fltzqlwoxf] { text-align: right; }
.pay-ptab td[b-fltzqlwoxf] { padding: 3.5px 4px; border-bottom: 1px solid #e4e7ec; color: #3f4650; }
.pay-ptab td:first-child[b-fltzqlwoxf] { color: #141821; }
.pay-ptab tr.negp td[b-fltzqlwoxf] { color: #047857; }
/* colonna Sconto: verde come le righe di scomputo (colori fissi: il foglio simula carta stampata) */
.pay-ptab td.disc[b-fltzqlwoxf] { color: #047857; }
.pay-ph-tot[b-fltzqlwoxf] { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px;
    border-top: 3px double #141821; padding-top: 5px; font-size: 9px; color: #3f4650; }
.pay-ph-tot b[b-fltzqlwoxf] { font-size: 12px; font-weight: 800; color: #141821; }
.pay-pdisc[b-fltzqlwoxf] { font-size: 11.5px; color: var(--text-muted); text-align: center; padding: 10px 6px 0; font-style: italic; }
/* ── Anteprima scontrino RT — rotolo termico 80mm ─────────────────────── */
.pay-rt-wrap[b-fltzqlwoxf] { display: flex; justify-content: center; padding: 6px 0 16px; }
.pay-rt[b-fltzqlwoxf] {
    width: 300px;                 /* ≈ 80 mm (geometria reale) */
    zoom: 1.25;                   /* ingrandimento uniforme dell'anteprima (scala e rifluisce nel riquadro) */
    flex-shrink: 0;               /* mai comprimere: mantiene proporzioni reali anche a colonna stretta */
    color: #2b2b26;               /* inchiostro termico grigio-nero */
    font-family: var(--mono);
    font-size: 10.5px; line-height: 1.62;
    padding: 26px 20px 16px;
    position: relative;
    border-radius: 2px;
    /* carta termica: base calda + banding di stampa orizzontale + leggera ombreggiatura ai bordi */
    background-color: #f5f4ee;
    background-image:
        repeating-linear-gradient(0deg, rgba(0,0,0,.020) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, rgba(0,0,0,.06), transparent 10%, transparent 90%, rgba(0,0,0,.06));
    box-shadow: 0 1px 2px rgba(30,41,59,.16), 0 3px 6px rgba(30,41,59,.10), 0 24px 52px rgba(30,41,59,.30);
    -webkit-font-smoothing: none;
}
/* curl del rotolo in alto: bordo scuro che sfuma + taglio netto */
.pay-rt[b-fltzqlwoxf]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.03) 55%, transparent);
    border-top: 1px solid rgba(0,0,0,.12); }
/* bordo strappato/perforato in basso */
.pay-rt[b-fltzqlwoxf]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px;
    background:
        linear-gradient(-45deg, transparent 33.33%, #f5f4ee 33.33% 66.66%, transparent 66.66%),
        linear-gradient(45deg, transparent 33.33%, #f5f4ee 33.33% 66.66%, transparent 66.66%);
    background-size: 11px 18px; background-position: 0 -9px;
    filter: drop-shadow(0 2px 1px rgba(30,41,59,.12)); }
.pay-rt-head[b-fltzqlwoxf] { text-align: center; }
.pay-rt-org[b-fltzqlwoxf] { font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.pay-rt-head > div:not(.pay-rt-org)[b-fltzqlwoxf] { font-size: 8.5px; color: #6a6a62; letter-spacing: .02em; }
.pay-rt-sep[b-fltzqlwoxf] { border-top: 1px dashed #a9a89f; margin: 7px 0; }
.pay-rt-r[b-fltzqlwoxf] { display: flex; justify-content: space-between; gap: 8px; }
.pay-rt-r > span:last-child[b-fltzqlwoxf] { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.pay-rt-hd[b-fltzqlwoxf] { font-size: 8.5px; letter-spacing: .08em; color: #6a6a62; }
.pay-rt-3 > span[b-fltzqlwoxf] { flex: 1; text-align: right; }
.pay-rt-3 > span:first-child[b-fltzqlwoxf] { text-align: left; }
.pay-rt-sub[b-fltzqlwoxf] { font-size: 8.5px; color: #7a7a72; padding-left: 2px; }
.pay-rt-title[b-fltzqlwoxf] { text-align: center; font-weight: 700; letter-spacing: .09em; }
.pay-rt-title-sm[b-fltzqlwoxf] { font-weight: 400; font-size: 9.5px; letter-spacing: .02em; }
.pay-rt-tot[b-fltzqlwoxf] { font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.pay-rt-small[b-fltzqlwoxf] { font-size: 9.5px; color: #6a6a62; }
.pay-rt-foot[b-fltzqlwoxf] { text-align: center; font-size: 8.8px; color: #55554e; line-height: 1.8; margin-top: 2px; }
/* QR di verifica (come sui documenti commerciali reali) */
.pay-rt-qrwrap[b-fltzqlwoxf] { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 4px; }
/* Il QR è iniettato via MarkupString (senza attributo di scope) → ::deep per raggiungerlo. */
.pay-rt-qrwrap[b-fltzqlwoxf]  svg { width: 74px; height: 74px; image-rendering: pixelated; }
.pay-rt-qcap[b-fltzqlwoxf] { font-size: 8px; color: #6a6a62; text-align: center; letter-spacing: .02em; max-width: 200px; }
.pay-rt-sim[b-fltzqlwoxf] { text-align: center; font-weight: 700; letter-spacing: .24em; color: #9a9a90; margin-top: 4px; font-size: 9px; }
.pay-rt-bye[b-fltzqlwoxf] { text-align: center; font-size: 9.5px; letter-spacing: .12em; margin-top: 2px; }

/* ── Drawer registro ───────────────────────────────────────────────────── */
.pay-backdrop[b-fltzqlwoxf] { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 900; opacity: 0;
    pointer-events: none; transition: opacity .25s; }
.pay-backdrop.on[b-fltzqlwoxf] { opacity: 1; pointer-events: auto; }
.pay-drawer[b-fltzqlwoxf] { position: fixed; top: 0; right: 0; bottom: 0; width: 600px; max-width: 96vw; z-index: 910;
    background: var(--bg-card); box-shadow: var(--shadow-lg); transform: translateX(102%);
    transition: transform .32s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; }
.pay-drawer.on[b-fltzqlwoxf] { transform: none; }
.pay-dr-head[b-fltzqlwoxf] { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pay-dr-head b[b-fltzqlwoxf] { font-size: 16px; font-weight: 700; }
.pay-dr-filters[b-fltzqlwoxf] { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); flex-wrap: wrap; }
.pay-dr-filters button[b-fltzqlwoxf] { font-size: 12px; font-weight: 650; color: var(--text-secondary); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 12px; background: none; cursor: pointer; }
.pay-dr-filters button.on[b-fltzqlwoxf] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pay-dr-body[b-fltzqlwoxf] { flex: 1; overflow-y: auto; padding: 6px 10px 20px; }
/* riga documento a 3 colonne: [identità] [valori] [azioni verticali] */
.pay-regrow[b-fltzqlwoxf] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; column-gap: 16px; row-gap: 6px;
    align-items: start; border-radius: 10px; padding: 11px 12px; }
.pay-regrow:hover[b-fltzqlwoxf] { background: var(--bg-hover); }
.pay-reg-c1[b-fltzqlwoxf] { grid-column: 1; grid-row: 1; min-width: 0; }
.pay-reg-c2[b-fltzqlwoxf] { grid-column: 2; grid-row: 1; min-width: 0; }
/* altre info sotto le prime due colonne */
.pay-reg-info[b-fltzqlwoxf] { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
/* col 1 · identità */
.pay-reg-type[b-fltzqlwoxf] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-reg-tname[b-fltzqlwoxf] { font-size: 14px; font-weight: 700; color: var(--text-primary); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-reg-tname.strike[b-fltzqlwoxf] { text-decoration: line-through; color: var(--text-muted); }
.pay-reg-recipient[b-fltzqlwoxf] { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-reg-recipient.muted[b-fltzqlwoxf] { color: var(--text-muted); font-style: italic; }
/* col 2 · valori */
.pay-reg-date[b-fltzqlwoxf] { font-size: 13px; color: var(--text-secondary); }
.pay-reg-amt[b-fltzqlwoxf] { margin-top: 3px; font-weight: 700; font-size: 14px; color: var(--text-primary); }
/* col 3 · azioni verticali */
.pay-reg-acts[b-fltzqlwoxf] { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px;
    align-items: stretch; min-width: 96px; }
.pay-reg-acts .btn[b-fltzqlwoxf] { width: 100%; justify-content: center; }
/* altre info · numero + stato */
.pay-reg-n[b-fltzqlwoxf] { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.pay-reg-n.strike[b-fltzqlwoxf] { text-decoration: line-through; }
.pay-reg-td[b-fltzqlwoxf] { font-size: 10px; font-weight: 750; color: var(--text-muted); background: var(--bg-card-2);
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.pay-modal-backdrop[b-fltzqlwoxf] { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: grid; place-items: center;
    z-index: 1000; padding: 16px; }
.pay-modal[b-fltzqlwoxf] { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; }
.pay-modal-head[b-fltzqlwoxf] { font-size: 17.5px; font-weight: 750; color: var(--text-primary); margin-bottom: 14px; }
.pay-mo-sum[b-fltzqlwoxf] { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pay-mo-sum .r[b-fltzqlwoxf] { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.pay-mo-sum .r:last-child[b-fltzqlwoxf] { border-bottom: 0; }
.pay-mo-sum .k[b-fltzqlwoxf] { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pay-mo-sum .v[b-fltzqlwoxf] { font-weight: 650; text-align: right; }
.pay-mo-warn[b-fltzqlwoxf] { display: flex; gap: 8px; align-items: flex-start; background: var(--req-soft);
    border-left: 3px solid var(--warn, #d97706); border-radius: 8px; padding: 12px; font-size: 12.5px;
    color: color-mix(in srgb, var(--warn, #d97706) 60%, var(--text-primary)); line-height: 1.5; margin-top: 12px; }
.pay-mo-warn.info[b-fltzqlwoxf] { background: var(--accent-soft); border-left-color: var(--accent);
    color: color-mix(in srgb, var(--accent) 55%, var(--text-primary)); }
.pay-modal-foot[b-fltzqlwoxf] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .pay-grid[b-fltzqlwoxf] { grid-template-columns: 1fr; }
    .pay-summary[b-fltzqlwoxf] { position: static; }
}
@media (max-width: 620px) {
    .pay-lt-head[b-fltzqlwoxf], .pay-lt-row[b-fltzqlwoxf] { grid-template-columns: 36px minmax(0,1fr) 52px 136px; }
    .pay-hide-sm[b-fltzqlwoxf] { display: none; }
    .pay-pay-row[b-fltzqlwoxf] { grid-template-columns: 1fr 100px 24px; }
    .pay-pay-row .cx-select:nth-child(3)[b-fltzqlwoxf] { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .pay-skel[b-fltzqlwoxf], .pay-res-fill[b-fltzqlwoxf], .pay-adv-wrap[b-fltzqlwoxf], .pay-drawer[b-fltzqlwoxf], .pay-chev[b-fltzqlwoxf] { animation: none !important; transition: none !important; }
}

/* ── Aggiunta articoli + sconto di riga ─────────────────────────────────── */
.pay-additem-btn[b-fltzqlwoxf] { color: var(--accent) !important; font-weight: 700; border: 1px solid var(--accent);
    border-radius: 7px; padding: 3px 10px; background: var(--accent-soft); cursor: pointer; }
.pay-additem-btn:hover[b-fltzqlwoxf] { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Chip sconto applicato + pulsante % sulla riga */
.pay-disc-badge[b-fltzqlwoxf] { flex-shrink: 0; display: inline-flex; align-items: center; height: 21px; padding: 0 7px;
    border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em;
    background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.pay-disc-btn[b-fltzqlwoxf] { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary);
    font-weight: 800; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.pay-disc-btn:hover[b-fltzqlwoxf] { border-color: var(--accent); color: var(--accent); }
.pay-disc-btn.on[b-fltzqlwoxf] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

/* Modale aggiunta articolo */
.pay-modal-sm[b-fltzqlwoxf] { max-width: 380px; }
.pay-add-grid[b-fltzqlwoxf] { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 10px; }
.pay-add-disc[b-fltzqlwoxf] { display: flex; align-items: center; gap: 10px; }
.pay-add-disc .pay-seg[b-fltzqlwoxf] { margin-bottom: 0; flex: 1; }
.pay-add-disc .cx-input[b-fltzqlwoxf] { width: 120px; }
.pay-add-net[b-fltzqlwoxf] { margin-top: 12px; font-size: 13.5px; color: var(--text-secondary); }
@media (max-width: 620px) {
    .pay-add-grid[b-fltzqlwoxf] { grid-template-columns: 1fr 1fr; }
}
/* /Components/Pages/Contabilita/Sospesi.razor.rz.scp.css */
/* Sospesi (Contabilità) — MT8. Il guscio .panel-full è overflow:hidden → il corpo scorre in
   .sos-body. Controlli base (.cx-input/.cx-select, .btn*, .status, .alert, .spinner) da app.css;
   qui le classi di pagina + i helper non globali (.cx-field-label, .btn-xs, .chip-mini). */

.panel-header-actions[b-yf6y6gbb4e] { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.sos-body[b-yf6y6gbb4e] { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 22px; min-height: 0; }
.sos-empty[b-yf6y6gbb4e] { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

.cx-field-label[b-yf6y6gbb4e] {
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 4px;
}
.btn-xs[b-yf6y6gbb4e] { padding: 3px 9px; height: 26px; font-size: 11.5px; border-radius: 7px; }
.chip-mini[b-yf6y6gbb4e] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent);
}

/* Ogni sospeso è una CARD: testata (documento + Totale/Incassato/Residuo + azioni) e, sotto,
   l'elenco degli incassi (data · metodo/canale · importo · stato). I link Stripe non confermati
   portano il pulsante "reinvia" sulla propria riga, non sulla testata. I pannelli
   incasso/annullo/NC sono in coda alla card. Colonne numeriche + azioni a larghezza fissa così
   Totale/Incassato/Residuo restano incolonnati anche fra card diverse. */
.sos-list[b-yf6y6gbb4e] { display: flex; flex-direction: column; gap: 12px; }

.sos-card[b-yf6y6gbb4e] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card-2);
    overflow: hidden;
}

/* La testata E le righe incasso condividono la STESSA griglia a colonne fisse: così ogni
   importo incassato cade esattamente sotto la colonna INCASSATO e le azioni sotto le azioni. */
.sos-card-head[b-yf6y6gbb4e],
.sos-pay-row[b-yf6y6gbb4e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px 112px 116px 300px;
    align-items: center;
}
.sos-card-head[b-yf6y6gbb4e] { padding: 10px 12px; }
.sos-card-head > *[b-yf6y6gbb4e] { min-width: 0; }

.sos-main[b-yf6y6gbb4e] { padding-inline: 0 8px; }
.sos-head[b-yf6y6gbb4e] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sos-head b[b-yf6y6gbb4e] { font-size: 13px; color: var(--text-primary); font-family: var(--mono); }
.sos-meta[b-yf6y6gbb4e] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
/* Nome cliente/azienda leggermente più grande e in evidenza rispetto alla data. */
.sos-client[b-yf6y6gbb4e] { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* Colonne numeriche allineate a destra: Totale + Incassato + Residuo */
.sos-amount[b-yf6y6gbb4e], .sos-residual[b-yf6y6gbb4e] { display: flex; flex-direction: column; align-items: flex-end; padding-inline: 8px; white-space: nowrap; }
.sos-amount-label[b-yf6y6gbb4e], .sos-residual-label[b-yf6y6gbb4e] { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.sos-amount-val b[b-yf6y6gbb4e] { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sos-residual b[b-yf6y6gbb4e] { font-size: 15px; color: var(--text-primary); }
/* Mostrata solo quando ci sono incassi in attesa: chiarisce quanto è davvero incassabile e
   perché "Incassa" può essere disabilitato (impegnabile = residuo − pendenti). */
.sos-committable[b-yf6y6gbb4e] { margin-top: 2px; font-size: 10px; white-space: nowrap; color: var(--req, var(--text-secondary)); }

/* Azioni testata: nella colonna azioni, allineate a destra. L'annullo è DE-ENFATIZZATO
   (ghost + testo rosso) per non rubare risalto all'azione principale. */
.sos-actions[b-yf6y6gbb4e] { grid-column: 5; display: flex; gap: 6px; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; }
.sos-void[b-yf6y6gbb4e] { color: var(--danger, #e5484d); }
.sos-void:hover:not(:disabled)[b-yf6y6gbb4e] { background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent); }

/* Elenco incassi della card */
.sos-payments[b-yf6y6gbb4e] {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    background: color-mix(in srgb, var(--bg-card) 45%, transparent);
    padding: 2px 12px;
}
.sos-pay-empty[b-yf6y6gbb4e] { font-size: 12px; color: var(--text-muted); padding: 9px 0; }
.sos-pay-row[b-yf6y6gbb4e] { padding-block: 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 32%, transparent); }
.sos-pay-row:last-child[b-yf6y6gbb4e] { border-bottom: 0; }
.sos-pay-info[b-yf6y6gbb4e] { grid-column: 1; display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.sos-pay-when[b-yf6y6gbb4e] { flex: 0 0 auto; min-width: 84px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sos-pay-method[b-yf6y6gbb4e] { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sos-pay-name[b-yf6y6gbb4e] { font-size: 12.5px; color: var(--text-primary); }
.sos-pay-email[b-yf6y6gbb4e] { font-size: 11.5px; color: var(--text-muted); }
/* Importo del singolo incasso: colonna 3 = sotto INCASSATO, stesso padding destro della testata. */
.sos-pay-amount[b-yf6y6gbb4e] { grid-column: 3; text-align: right; padding-inline: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sos-pay-action[b-yf6y6gbb4e] { grid-column: 5; display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.sos-pay-confirm[b-yf6y6gbb4e] { font-size: 11.5px; color: var(--text-secondary); }
.sos-pay-del[b-yf6y6gbb4e] { color: var(--danger, #e5484d); padding-inline: 9px; }
.sos-pay-row.pending .sos-pay-amount[b-yf6y6gbb4e] { color: var(--text-muted); }

.sos-panel[b-yf6y6gbb4e] {
    padding: 10px 12px 12px;
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
    border-top: 1px solid var(--border);
}
.sos-panel-title[b-yf6y6gbb4e] { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.sos-panel-row[b-yf6y6gbb4e] { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sos-panel-row > .cx-field[b-yf6y6gbb4e] { flex: 1 1 160px; margin-bottom: 0; }
.sos-panel-row > .cx-input[b-yf6y6gbb4e] { flex: 1 1 220px; }
.sos-panel-foot[b-yf6y6gbb4e] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Sotto una certa larghezza le griglie a colonne non hanno spazio: testata e righe si impilano. */
@media (max-width: 820px) {
    .sos-card-head[b-yf6y6gbb4e], .sos-pay-row[b-yf6y6gbb4e] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
    .sos-main[b-yf6y6gbb4e] { flex: 1 1 100%; padding-inline: 0; }
    .sos-amount[b-yf6y6gbb4e], .sos-residual[b-yf6y6gbb4e] { align-items: flex-start; padding-inline: 0; }
    .sos-actions[b-yf6y6gbb4e] { flex: 1 1 100%; justify-content: flex-start; }
    .sos-pay-info[b-yf6y6gbb4e] { flex: 1 1 100%; }
    .sos-pay-when[b-yf6y6gbb4e] { min-width: 72px; }
    .sos-pay-amount[b-yf6y6gbb4e] { padding-inline: 0; }
    .sos-pay-action[b-yf6y6gbb4e] { justify-content: flex-start; }
}
/* /Components/Pages/Customers/CompaniesList.razor.rz.scp.css */
/* Scoped styles for CompaniesList.razor — replicates the master/detail shell
   used by CustomersList. Kept self-contained so the two pages can evolve
   independently; common controls (.cx-input, .cx-select, .cx-flag, .grid
   table) continue to live in the global app.css. */

/* ── Shell layout ────────────────────────────────────────────────────────── */
.cx-shell[b-ny7x35kddo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}
.cx-shell-row[b-ny7x35kddo] {
    display: flex;
    flex: 1 1 auto;
    gap: 16px;
    min-width: 0;
    min-height: 0;
}

.cx-master[b-ny7x35kddo] {
    flex: 1 1 60%;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.cx-detail[b-ny7x35kddo] {
    flex: 0 0 620px;
    max-width: 720px;
    min-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.cx-toolbar[b-ny7x35kddo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
.cx-toolbar-title[b-ny7x35kddo] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cx-toolbar-title b[b-ny7x35kddo] { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cx-toolbar-title span[b-ny7x35kddo] { font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.cx-toolbar-actions[b-ny7x35kddo] { display: flex; gap: 8px; align-items: center; }

.cx-search-group[b-ny7x35kddo] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card-2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}
.cx-search-group:hover[b-ny7x35kddo] { border-color: var(--border-strong); background: var(--bg-card); }
.cx-search-group:focus-within[b-ny7x35kddo] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    background: var(--bg-card);
}
.cx-search[b-ny7x35kddo] {
    width: 220px;
    min-width: 0;
    padding: 0 12px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: 500 13px 'Inter', sans-serif;
    outline: none;
}
.cx-search[b-ny7x35kddo]::placeholder { color: var(--text-muted); opacity: .75; font-weight: 400; }

.cx-primary-btn[b-ny7x35kddo] {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 0 14px;
    height: 36px;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--on-accent);
    font: 600 12.5px 'Inter', sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 14px var(--accent-glow);
    transition: filter 0.12s ease, transform 0.12s ease;
}
.cx-primary-btn:hover[b-ny7x35kddo] { filter: brightness(1.1); }
.cx-primary-btn:active[b-ny7x35kddo] { transform: translateY(1px); }
.cx-primary-btn svg[b-ny7x35kddo] { display: block; }

.cx-alert[b-ny7x35kddo] {
    margin: 12px 18px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.cx-alert.info[b-ny7x35kddo] { background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.3); color: var(--info); }
.cx-alert.err[b-ny7x35kddo]  { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: var(--danger); }

/* ── Detail hero ─────────────────────────────────────────────────────────── */
.cx-hero[b-ny7x35kddo] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(160deg, var(--accent-soft), transparent 60%);
    border-bottom: 1px solid var(--border);
}
.cx-hero-row[b-ny7x35kddo] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}
.cx-hero-actions[b-ny7x35kddo] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
.cx-hero-btn[b-ny7x35kddo] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    font: 600 12px 'Inter', sans-serif;
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.cx-hero-btn:hover[b-ny7x35kddo] {
    background: var(--bg-card);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.cx-hero-btn:active[b-ny7x35kddo] { transform: translateY(1px); }
.cx-hero-btn svg[b-ny7x35kddo] { width: 13px; height: 13px; flex-shrink: 0; }
.cx-hero-btn.disabled[b-ny7x35kddo],
.cx-hero-btn[href=""][b-ny7x35kddo] {
    pointer-events: none;
    opacity: 0.4;
}
.cx-hero-btn-primary[b-ny7x35kddo] {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    border-color: transparent;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.cx-hero-btn-primary:hover[b-ny7x35kddo] {
    color: var(--on-accent);
    border-color: transparent;
    filter: brightness(1.08);
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}

.cx-avatar[b-ny7x35kddo] {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    display: grid; place-items: center;
    font-weight: 800; font-size: 16px;
    box-shadow: 0 8px 18px var(--accent-glow);
    flex-shrink: 0;
}

.cx-hero-body[b-ny7x35kddo] { min-width: 0; flex: 1; }
.cx-hero-name[b-ny7x35kddo] {
    margin: 0; font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-hero-meta[b-ny7x35kddo] {
    font-size: 11px; color: var(--text-muted);
    font-family: var(--mono);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cx-badges[b-ny7x35kddo] { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-badge[b-ny7x35kddo] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: var(--badge-radius);
    font-size: 10.5px; font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
}
.cx-badge[b-ny7x35kddo]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-badge.ok[b-ny7x35kddo]   { color: var(--success); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.3); }
.cx-badge.err[b-ny7x35kddo]  { color: var(--danger);  background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); }
.cx-badge.info[b-ny7x35kddo] { color: var(--info);    background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.3); }
.cx-badge.mute[b-ny7x35kddo] { color: var(--text-muted); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.cx-tabs[b-ny7x35kddo] {
    display: flex;
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.cx-tab[b-ny7x35kddo] {
    appearance: none;
    border: 0;
    background: transparent;
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 4px;
    font: 600 11.5px 'Inter', sans-serif;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
    margin-bottom: -1px;
}
.cx-tab:hover[b-ny7x35kddo] { color: var(--text-primary); }
.cx-tab.active[b-ny7x35kddo] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Detail body ─────────────────────────────────────────────────────────── */
.cx-section[b-ny7x35kddo] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 22px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cx-section[b-ny7x35kddo]::before {
    content: "";
    width: 3px;
    height: 13px;
    background: var(--accent);
    border-radius: 2px;
}
.cx-section[b-ny7x35kddo]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.cx-section:first-child[b-ny7x35kddo] { margin-top: 0; }

.cx-scroll[b-ny7x35kddo] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    min-height: 0;
}

.cx-fields[b-ny7x35kddo] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 14px;
    margin-bottom: 14px;
}
.cx-field[b-ny7x35kddo] {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 8px 16px;
    padding: 6px 0;
    align-items: start;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 55%, transparent);
    font-size: 13px;
}
.cx-detail.editing .cx-field[b-ny7x35kddo] { padding: 3px 0; gap: 6px 16px; }
.cx-detail.editing .cx-section[b-ny7x35kddo] { margin: 14px 0 6px; }
.cx-field:last-child[b-ny7x35kddo] { border-bottom: 0; }
.cx-field-label[b-ny7x35kddo] {
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    font-size: 12px;
    line-height: 1.45;
    padding-top: 2px;
}
.cx-field-value[b-ny7x35kddo] { color: var(--text-primary); word-break: break-word; }
.cx-field-value.mono[b-ny7x35kddo] { font-family: var(--mono); font-size: 12px; }

.cx-check[b-ny7x35kddo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--text-primary);
}
.cx-check input[b-ny7x35kddo] { accent-color: var(--accent); cursor: pointer; }

/* Compact "input + icon button" cluster — used by the P.IVA field to host the
   OpenAPI lookup trigger. The input keeps its full width; the button sits to the
   right with a square footprint matching the input height. */
.cx-input-row[b-ny7x35kddo] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.cx-input-row > .cx-input[b-ny7x35kddo] { flex: 1 1 auto; min-width: 0; }
.cx-input-row > .cx-icon-btn[b-ny7x35kddo] {
    flex: 0 0 auto;
    width: 32px;
    height: auto;
    min-height: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card-2);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cx-input-row > .cx-icon-btn:hover:not(:disabled)[b-ny7x35kddo] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}
.cx-input-row > .cx-icon-btn:disabled[b-ny7x35kddo] {
    opacity: 0.45;
    cursor: not-allowed;
}
.cx-input-row > .cx-icon-btn svg[b-ny7x35kddo] { display: block; }

.cx-readonly[b-ny7x35kddo] {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    margin-left: 8px;
}
.cx-readonly b[b-ny7x35kddo] { font-style: normal; color: var(--text-secondary); font-weight: 600; }

.cx-save-error[b-ny7x35kddo] {
    margin: 0 18px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
    font-size: 12px;
}

.cx-footer[b-ny7x35kddo] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.cx-empty-detail[b-ny7x35kddo] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}
.cx-empty-detail h4[b-ny7x35kddo] { margin: 10px 0 4px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.cx-empty-icon[b-ny7x35kddo] {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--accent);
    margin: 0 auto;
}
/* /Components/Pages/Customers/CustomerCard.razor.rz.scp.css */
/* Scoped styles for CustomerCard.razor — the reusable customer "scheda".
   Moved here (from CustomersList.razor.css) so the markup keeps its styling when
   rendered outside the grid (e.g. inside a modal popup). Atomic inputs
   (.cx-input/.cx-select/.cx-textarea/.cx-flag) live in global app.css. */

/* Root: fills the host (grid detail pane or modal body). No frame of its own —
   the host provides the surface/border. */
.cx-card[b-h825vat0t2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ── Detail hero ─────────────────────────────────────────────────────────── */

.cx-hero[b-h825vat0t2] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(160deg, var(--accent-soft), transparent 60%);
    border-bottom: 1px solid var(--border);
}
.cx-hero-row[b-h825vat0t2] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}

.cx-hero-actions[b-h825vat0t2] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
.cx-hero-btn[b-h825vat0t2] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    font: 600 12px 'Inter', sans-serif;
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.cx-hero-btn:hover[b-h825vat0t2] {
    background: var(--bg-card);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.cx-hero-btn:active[b-h825vat0t2] { transform: translateY(1px); }
.cx-hero-btn svg[b-h825vat0t2] { width: 13px; height: 13px; flex-shrink: 0; }
.cx-hero-btn.disabled[b-h825vat0t2],
.cx-hero-btn[href=""][b-h825vat0t2] {
    pointer-events: none;
    opacity: 0.4;
}
.cx-hero-btn-primary[b-h825vat0t2] {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    border-color: transparent;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.cx-hero-btn-primary:hover[b-h825vat0t2] {
    color: var(--on-accent);
    border-color: transparent;
    filter: brightness(1.08);
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.cx-avatar[b-h825vat0t2] {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    display: grid; place-items: center;
    font-weight: 800; font-size: 16px;
    box-shadow: 0 8px 18px var(--accent-glow);
    flex-shrink: 0;
}
img.cx-avatar[b-h825vat0t2] { object-fit: cover; }

.cx-hero-body[b-h825vat0t2] { min-width: 0; flex: 1; }
.cx-hero-name[b-h825vat0t2] {
    margin: 0; font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-hero-meta[b-h825vat0t2] {
    font-size: 11px; color: var(--text-muted);
    font-family: var(--mono);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-badges[b-h825vat0t2] { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-badge[b-h825vat0t2] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: var(--badge-radius);
    font-size: 10.5px; font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
}
.cx-badge[b-h825vat0t2]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-badge.ok[b-h825vat0t2] { color: var(--success); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.3); }
.cx-badge.err[b-h825vat0t2] { color: var(--danger); background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); }
.cx-badge.info[b-h825vat0t2] { color: var(--info); background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.3); }
.cx-badge.mute[b-h825vat0t2] { color: var(--text-muted); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.cx-tabs[b-h825vat0t2] {
    display: flex;
    padding: 0 6px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.cx-tab[b-h825vat0t2] {
    appearance: none;
    border: 0;
    background: transparent;
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 4px;
    font: 600 11.5px 'Inter', sans-serif;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
    margin-bottom: -1px;
}
.cx-tab:hover[b-h825vat0t2] { color: var(--text-primary); }
.cx-tab.active[b-h825vat0t2] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Detail body ─────────────────────────────────────────────────────────── */

.cx-section[b-h825vat0t2] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 22px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cx-section[b-h825vat0t2]::before {
    content: "";
    width: 3px;
    height: 13px;
    background: var(--accent);
    border-radius: 2px;
}
.cx-section[b-h825vat0t2]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.cx-section:first-child[b-h825vat0t2] { margin-top: 0; }

.cx-scroll[b-h825vat0t2] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    min-height: 0;
}

.cx-fields[b-h825vat0t2] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 14px;
    margin-bottom: 14px;
}
.cx-field[b-h825vat0t2] {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 8px 16px;
    padding: 6px 0;
    align-items: start;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 55%, transparent);
    font-size: 13px;
}
/* Edit mode: tighter row rhythm. */
.cx-card.editing .cx-field[b-h825vat0t2] {
    padding: 3px 0;
    gap: 6px 16px;
}
.cx-card.editing .cx-section[b-h825vat0t2] {
    margin: 14px 0 6px;
}
.cx-field:last-child[b-h825vat0t2] { border-bottom: 0; }
.cx-field-label[b-h825vat0t2] {
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    font-size: 12px;
    line-height: 1.45;
    padding-top: 2px;
}
.cx-field-value[b-h825vat0t2] { color: var(--text-primary); word-break: break-word; }
.cx-field-value.mono[b-h825vat0t2] { font-family: var(--mono); font-size: 12px; }
.cx-field-value.muted[b-h825vat0t2] { color: var(--text-muted); }

/* Block field: label stacked above a full-width value (Marketing tab). */
.cx-field-block[b-h825vat0t2] { grid-template-columns: 1fr; }
.cx-field-block > label[b-h825vat0t2] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Multi-select chips — Marketing tab Interessi. */
.cx-chips[b-h825vat0t2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cx-chip[b-h825vat0t2] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font: 500 12px 'Inter', sans-serif;
    line-height: 1.3;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.cx-chip:hover:not(:disabled)[b-h825vat0t2] {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.cx-chip:active:not(:disabled)[b-h825vat0t2] { transform: translateY(1px); }
.cx-chip.active[b-h825vat0t2] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
    color: var(--accent);
}
.cx-chip:disabled[b-h825vat0t2] {
    cursor: default;
    opacity: 0.95;
}

.cx-check[b-h825vat0t2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--text-primary);
}
.cx-check input[b-h825vat0t2] { accent-color: var(--accent); cursor: pointer; }

.cx-readonly[b-h825vat0t2] {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    margin-left: 8px;
}
.cx-readonly b[b-h825vat0t2] { font-style: normal; color: var(--text-secondary); font-weight: 600; }

.cx-inline-meta[b-h825vat0t2] {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 6px;
}

.cx-save-error[b-h825vat0t2] {
    margin: 0 18px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--danger);
    font-size: 12px;
}

.cx-footer[b-h825vat0t2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.cx-empty-detail[b-h825vat0t2] {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}
.cx-empty-detail h4[b-h825vat0t2] { margin: 10px 0 4px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.cx-empty-icon[b-h825vat0t2] {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--accent);
    margin: 0 auto;
}

/* ── Validation markers (country-based) ──────────────────────────────────── */
/* Note: .cx-field-error / .cx-field-warn live in global app.css — they are rendered
   via RenderTreeBuilder (FieldIssues) and would not receive this component's scope. */

/* Dot on a tab whose section has issues. */
.cx-tab-badge[b-h825vat0t2] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}
.cx-tab-badge.err[b-h825vat0t2] { background: var(--danger, #d64545); }
.cx-tab-badge.warn[b-h825vat0t2] { background: #d9a300; }

/* ── Consent history table (tab Consensi) ────────────────────────────────── */
.cx-consent-history[b-h825vat0t2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 6px;
}
.cx-consent-history th[b-h825vat0t2],
.cx-consent-history td[b-h825vat0t2] {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    vertical-align: middle;
}
.cx-consent-history th[b-h825vat0t2] {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}
/* /Components/Pages/Customers/CustomerDetailModal.razor.rz.scp.css */
/* Scoped styles for CustomerDetailModal.razor — stacks above the booking modal
   (z-index 1300 > .bkm-backdrop's 1200). The CustomerCard fills .cdm-body. */
.cdm-backdrop[b-dvi3v5zcdj] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: cdm-fade-b-dvi3v5zcdj .15s ease;
}
@keyframes cdm-fade-b-dvi3v5zcdj { from { opacity: 0; } to { opacity: 1; } }

.cdm-modal[b-dvi3v5zcdj] {
    width: 100%;
    max-width: 760px;
    height: 86vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cdm-header[b-dvi3v5zcdj] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.cdm-title[b-dvi3v5zcdj] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cdm-close[b-dvi3v5zcdj] {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background .12s ease, color .12s ease;
}
.cdm-close:hover[b-dvi3v5zcdj] { background: var(--bg-hover); color: var(--text-primary); }

.cdm-body[b-dvi3v5zcdj] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
/* /Components/Pages/Customers/CustomersList.razor.rz.scp.css */
/* Scoped styles for CustomersList.razor — master list, layout shell and toolbar.
   The detail "scheda" styles (hero/tabs/fields/…) live in CustomerCard.razor.css. */

.cx-page[b-ai1lchnsu9] { display: flex; flex: 1 1 auto; gap: 16px; min-width: 0; min-height: 0; }

/* Page shell — stat strip on top, master+detail split below. */
.cx-shell[b-ai1lchnsu9] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}
.cx-shell-row[b-ai1lchnsu9] {
    display: flex;
    flex: 1 1 auto;
    gap: 16px;
    min-width: 0;
    min-height: 0;
}

.cx-master[b-ai1lchnsu9] {
    flex: 1 1 60%;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Detail pane wrapper — sizing + surface; the <CustomerCard> fills it. */
.cx-detail[b-ai1lchnsu9] {
    flex: 0 0 620px;
    max-width: 720px;
    min-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ── List grid ──────────────────────────────────────────────────────────── */

.cx-list[b-ai1lchnsu9] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.cx-head[b-ai1lchnsu9] {
    display: grid;
    grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 80px;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cx-head > div:last-child[b-ai1lchnsu9] { text-align: right; }

.cx-body[b-ai1lchnsu9] { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

.cx-row[b-ai1lchnsu9] {
    display: grid;
    grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 80px;
    gap: 14px;
    padding: 8px 18px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    height: 56px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}
/* Hover: soft 2px accent fade on the left edge as a hint, plus the existing
   --bg-hover tint. Selected wins the cascade with its 3px solid bar. */
.cx-row:hover[b-ai1lchnsu9] {
    background: var(--bg-hover);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
.cx-row.selected[b-ai1lchnsu9] {
    background: var(--bg-active);
    box-shadow: inset 3px 0 0 var(--accent);
}
.cx-row.selected .cx-name[b-ai1lchnsu9] { color: var(--text-primary); }

.cx-cell[b-ai1lchnsu9] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 13px;
}
.cx-cell.right[b-ai1lchnsu9] { text-align: right; }
.cx-cell.mono[b-ai1lchnsu9] { font-family: var(--mono); font-size: 12px; }

.cx-name[b-ai1lchnsu9] { color: var(--text-primary); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.cx-sub[b-ai1lchnsu9] { color: var(--text-muted); font-size: 11.5px; font-weight: 400; margin-top: 3px; }
.cx-name-wrap[b-ai1lchnsu9] { min-width: 0; overflow: hidden; }
.cx-name-wrap .cx-sub[b-ai1lchnsu9] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-name-line[b-ai1lchnsu9] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cx-name-line .cx-name[b-ai1lchnsu9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

/* Pin icon + city on the same line, replaces the bare city cell */
.cx-cell-city[b-ai1lchnsu9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
}
.cx-pin[b-ai1lchnsu9] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.65;
    color: var(--text-muted);
}
.cx-cell-city span[b-ai1lchnsu9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Right-aligned stats cell with optional "notti" suffix. */
.cx-row-stats[b-ai1lchnsu9] {
    text-align: right;
    color: var(--text-secondary);
    font-size: 13px;
    overflow: visible;
}
.cx-stats-value[b-ai1lchnsu9] { font-weight: 500; }
.cx-stats-suffix[b-ai1lchnsu9] {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 3px;
}

/* Hover quick-actions overlay — absolutely positioned on the right edge of the row. */
.cx-row-actions[b-ai1lchnsu9] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.cx-row:hover .cx-row-actions[b-ai1lchnsu9],
.cx-row.selected .cx-row-actions[b-ai1lchnsu9] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}
.cx-row-action[b-ai1lchnsu9] {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.cx-row-action:hover[b-ai1lchnsu9] {
    background: var(--accent-soft);
    color: var(--accent);
}
.cx-row-action svg[b-ai1lchnsu9] { width: 13px; height: 13px; display: block; }

/* Slightly lighter pill metrics inside list rows. */
.cx-row[b-ai1lchnsu9]  .cv-pill {
    font-size: 10.5px;
    padding: 2px 9px;
}

.cx-placeholder[b-ai1lchnsu9] { opacity: 0.55; }
.cx-sk[b-ai1lchnsu9] {
    display: inline-block;
    width: 70%;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-card) 0%, var(--border) 50%, var(--bg-card) 100%);
    background-size: 200% 100%;
    animation: cx-shimmer-b-ai1lchnsu9 1.2s infinite;
}
.cx-sk.sm[b-ai1lchnsu9] { width: 40%; }
.cx-sk-avatar[b-ai1lchnsu9] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
}
@keyframes cx-shimmer-b-ai1lchnsu9 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cx-empty[b-ai1lchnsu9] {
    padding: 48px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Row avatar tile ─────────────────────────────────────────────────────── */
/* Anchors the left edge with at-a-glance operational info:
   - primary: country flag (citizenship → residence) for nationality scan
   - 2nd fallback: CCA2 code over gradient when flag image is missing
   - 3rd fallback: initials over gradient when no country at all
   Plus a small loyalty dot in the top-right corner for repeat-guest signal. */
.cx-row-avatar[b-ai1lchnsu9] {
    position: relative;
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.cx-row-avatar:has(img)[b-ai1lchnsu9] {
    background: var(--bg-card-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.cx-row-avatar img[b-ai1lchnsu9] {
    width: 18px;
    height: 12px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cx-row-initials[b-ai1lchnsu9] {
    font: 700 11px 'Inter', sans-serif;
    letter-spacing: 0.02em;
}
.cx-row-cca2[b-ai1lchnsu9] {
    font: 700 9.5px var(--mono);
    letter-spacing: 0.06em;
}

/* Loyalty dot — 9px circle in top-right corner. */
.cx-row-loyalty[b-ai1lchnsu9] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    z-index: 1;
}
.cx-row-loyalty.gold[b-ai1lchnsu9]   { background: linear-gradient(135deg, #f5d36b, #c89a37); }
.cx-row-loyalty.silver[b-ai1lchnsu9] { background: linear-gradient(135deg, #d8dee8, #9ea7b8); }
.cx-row-loyalty.bronze[b-ai1lchnsu9] { background: linear-gradient(135deg, #d49b7a, #9a6843); }
.cx-row:hover .cx-row-loyalty[b-ai1lchnsu9],
.cx-row.selected .cx-row-loyalty[b-ai1lchnsu9] {
    border-color: color-mix(in srgb, var(--bg-card) 70%, var(--bg-active) 30%);
}

/* ── Header / toolbar row ────────────────────────────────────────────────── */

.cx-toolbar[b-ai1lchnsu9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}
.cx-toolbar-title[b-ai1lchnsu9] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cx-toolbar-title b[b-ai1lchnsu9] { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cx-toolbar-title span[b-ai1lchnsu9] { font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.cx-toolbar-actions[b-ai1lchnsu9] { display: flex; gap: 8px; align-items: center; }

/* Search input + paired advanced-search icon button */
.cx-search-group[b-ai1lchnsu9] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card-2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}
.cx-search-group:hover[b-ai1lchnsu9] { border-color: var(--border-strong); background: var(--bg-card); }
.cx-search-group:focus-within[b-ai1lchnsu9] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    background: var(--bg-card);
}
.cx-search[b-ai1lchnsu9] {
    width: 180px;
    min-width: 0;
    padding: 0 12px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: 500 13px 'Inter', sans-serif;
    outline: none;
}
.cx-search[b-ai1lchnsu9]::placeholder { color: var(--text-muted); opacity: .75; font-weight: 400; }

.cx-icon-btn[b-ai1lchnsu9] {
    appearance: none;
    border: 0;
    border-left: 1px solid var(--border);
    background: transparent;
    width: 38px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.cx-icon-btn:hover[b-ai1lchnsu9] { background: var(--bg-hover); color: var(--accent); }
.cx-icon-btn.active[b-ai1lchnsu9] { background: var(--accent-soft); color: var(--accent); }
.cx-icon-btn svg[b-ai1lchnsu9] { display: block; }

/* "Nuovo cliente" primary action */
.cx-primary-btn[b-ai1lchnsu9] {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 0 14px;
    height: 36px;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--on-accent);
    font: 600 12.5px 'Inter', sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 14px var(--accent-glow);
    transition: filter 0.12s ease, transform 0.12s ease;
}
.cx-primary-btn:hover[b-ai1lchnsu9] { filter: brightness(1.1); }
.cx-primary-btn:active[b-ai1lchnsu9] { transform: translateY(1px); }
.cx-primary-btn svg[b-ai1lchnsu9] { display: block; }

/* Advanced search panel — sits between toolbar and list, pushing the grid down */
.cx-advanced[b-ai1lchnsu9] {
    padding: 16px 18px;
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
    animation: cx-slide-down-b-ai1lchnsu9 0.22s ease;
}
@keyframes cx-slide-down-b-ai1lchnsu9 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cx-advanced-title[b-ai1lchnsu9] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cx-advanced-title[b-ai1lchnsu9]::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.cx-advanced-grid[b-ai1lchnsu9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}
.cx-advanced-field[b-ai1lchnsu9] { display: flex; flex-direction: column; gap: 4px; }
.cx-advanced-field label[b-ai1lchnsu9] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cx-advanced-actions[b-ai1lchnsu9] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cx-alert[b-ai1lchnsu9] {
    margin: 12px 18px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.cx-alert.info[b-ai1lchnsu9] { background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.3); color: var(--info); }
.cx-alert.err[b-ai1lchnsu9] { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: var(--danger); }
/* /Components/Pages/Customers/Shared/CustomerStatCardStrip.razor.rz.scp.css */
.cv-stats[b-kuvypbfkzs] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    /* Vertical spacing to siblings is owned by the parent (e.g. .cx-shell gap)
       so we don't stack a margin on top of it. */
}

.cv-stat[b-kuvypbfkzs] {
    appearance: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
    min-width: 0;
}
.cv-stat:hover:not(:disabled)[b-kuvypbfkzs] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.cv-stat:disabled[b-kuvypbfkzs] { cursor: default; }
.cv-stat.active[b-kuvypbfkzs] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.cv-stat-ico[b-kuvypbfkzs] {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    flex-shrink: 0;
    background: var(--bg-card-2);
    color: var(--text-secondary);
}
.cv-stat-ico[b-kuvypbfkzs]  svg { width: 18px; height: 18px; display: block; }

.cv-stat-body[b-kuvypbfkzs] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-stat-label[b-kuvypbfkzs] {
    font: 600 10.5px 'Inter', sans-serif;
    color: var(--text-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-stat-value[b-kuvypbfkzs] {
    font: 700 22px 'Inter', sans-serif;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.cv-stat-skel[b-kuvypbfkzs] {
    display: inline-block;
    width: 36px; height: 18px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--bg-card-2) 0%, var(--border) 50%, var(--bg-card-2) 100%);
    background-size: 200% 100%;
    animation: cv-shimmer-b-kuvypbfkzs 1.2s infinite;
}
@keyframes cv-shimmer-b-kuvypbfkzs {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tone variants tint the icon chip only — keep card surface neutral so a row of 5
   cards reads as a unit, with semantic color only on the leading icon. */
.cv-stat-info  .cv-stat-ico[b-kuvypbfkzs] { color: var(--accent);  background: var(--accent-soft); }
.cv-stat-warn  .cv-stat-ico[b-kuvypbfkzs] { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.cv-stat-danger .cv-stat-ico[b-kuvypbfkzs] { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

@media (max-width: 1280px) {
    .cv-stats[b-kuvypbfkzs] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .cv-stats[b-kuvypbfkzs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Pages/Customers/Shared/CustomerStatusPill.razor.rz.scp.css */
.cv-pill[b-y9mxlc4uct] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--badge-radius);
    font: 600 11px 'Inter', sans-serif;
    line-height: 1.4;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-secondary);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.cv-pill-ico[b-y9mxlc4uct] { display: inline-flex; align-items: center; }
.cv-pill-ico[b-y9mxlc4uct]  svg { width: 11px; height: 11px; display: block; }

.cv-pill-ok[b-y9mxlc4uct] {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 32%, transparent);
}
.cv-pill-warn[b-y9mxlc4uct] {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--warning) 36%, transparent);
}
.cv-pill-err[b-y9mxlc4uct] {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 34%, transparent);
}
.cv-pill-info[b-y9mxlc4uct] {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.cv-pill-mute[b-y9mxlc4uct] {
    color: var(--text-muted);
    background: var(--bg-card-2);
    border-color: var(--border);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard.razor scoped styles — operational + performance dashboard.
   Usa solo i token tema globali (--accent, --success, --bg-card, …) così la pagina
   segue il tema attivo (dark / indigo / light / high-contrast) automaticamente. */

.dash3[b-j77q839vjp] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
    height: 100%;
    overflow: auto;
}

/* ---------- header ---------- */
.dash3-header[b-j77q839vjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.dash3-titles[b-j77q839vjp] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.dash3-titles b[b-j77q839vjp] { font-size: 20px; color: var(--text-primary); }
.dash3-titles span[b-j77q839vjp] { font-size: 13px; color: var(--text-muted); }

.dash3-header-actions[b-j77q839vjp] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dash3-updated[b-j77q839vjp] {
    font-size: 12px;
    color: var(--text-muted);
}

.d-card[b-j77q839vjp] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ---------- Row 1: data · occupazione · trend ---------- */
.dash3-row1[b-j77q839vjp] {
    display: grid;
    grid-template-columns: 220px 300px 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}

/* date card */
.d-datecard[b-j77q839vjp] {
    padding: 12px 16px;
    position: relative;
}
.d-datecard-nav[b-j77q839vjp] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
}
.d-daynav[b-j77q839vjp] {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.d-daynav:hover[b-j77q839vjp] { opacity: 1; background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.d-daynav:disabled[b-j77q839vjp] { opacity: .25; cursor: default; background: transparent; color: var(--text-muted); border-color: transparent; }
.d-daynav svg[b-j77q839vjp] { width: 15px; height: 15px; }
.d-dow[b-j77q839vjp] { color: var(--text-secondary); font-weight: 600; font-size: 13px; }
.d-day[b-j77q839vjp] { font-size: 32px; font-weight: 800; line-height: 1; margin: 1px 0; color: var(--text-primary); }
.d-mon[b-j77q839vjp] { color: var(--text-secondary); font-weight: 600; font-size: 13px; }

/* occupancy compact */
.d-occ2[b-j77q839vjp] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
.d-occ2-top[b-j77q839vjp] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.d-occ2-pct[b-j77q839vjp] { font-size: 34px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.d-occ2-lbl[b-j77q839vjp] { font-size: 13px; color: var(--text-muted); font-weight: 600; }

.d-occbar[b-j77q839vjp] {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-subtle);
    overflow: hidden;
}
.d-occbar > span[b-j77q839vjp] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .5s ease;
}

.d-occ2-stats[b-j77q839vjp] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.d-occ2-stats > div[b-j77q839vjp] { display: flex; flex-direction: column; }
.d-occ2-stats .n[b-j77q839vjp] { font-weight: 800; color: var(--text-primary); font-size: 16px; }
.d-occ2-stats .l[b-j77q839vjp] { color: var(--text-muted); font-size: 11.5px; }

/* trend area chart */
.d-trend[b-j77q839vjp] {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.d-trend-head[b-j77q839vjp] { display: flex; align-items: center; gap: 6px; }
.d-trend-head b[b-j77q839vjp] { font-size: 13px; color: var(--text-secondary); }
/* Altezza FISSA: il viewBox dell'AreaChart è preserveAspectRatio=none, quindi l'SVG
   si estende a questa altezza invece di imporre il proprio rapporto d'aspetto (che
   allungherebbe verticalmente tutta la riga 1). */
.d-trend-chart[b-j77q839vjp] {
    height: 96px;
    min-height: 0;
    margin-top: 6px;
}

/* ---------- Row 2: zona KPI performance ---------- */
.dash3-kpizone[b-j77q839vjp] { margin-bottom: 18px; }

.dash3-kpihead[b-j77q839vjp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.seg[b-j77q839vjp] {
    display: inline-flex;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}
.seg button[b-j77q839vjp] {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.seg button.active[b-j77q839vjp] { background: var(--accent-soft); color: var(--accent); }
.seg button:hover:not(.active)[b-j77q839vjp] { color: var(--text-primary); }

.dash3-money[b-j77q839vjp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.d-money[b-j77q839vjp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    text-decoration: none;
}
.d-money-lbl[b-j77q839vjp] { font-size: 12px; color: var(--text-muted); }
.d-money-val[b-j77q839vjp] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.d-money-link[b-j77q839vjp] { transition: border-color .15s ease; }
.d-money-link:hover[b-j77q839vjp] { border-color: var(--accent); text-decoration: none; }
.d-money-badge[b-j77q839vjp] {
    font-size: 11px;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--danger);
    border-radius: var(--badge-radius);
    padding: 0 7px;
}

.dash3-kpis[b-j77q839vjp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.dash3-kpierror[b-j77q839vjp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}
.dash3-kpierror svg[b-j77q839vjp] { width: 18px; height: 18px; color: var(--warning); flex: 0 0 auto; }
.dash3-kpierror .btn[b-j77q839vjp] { margin-left: auto; }

/* righe metriche secondarie dentro le KpiGroupCard (non scoped al componente) */
[b-j77q839vjp] .kpc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
[b-j77q839vjp] .kpc-row > span:last-child { color: var(--text-primary); font-weight: 600; }
[b-j77q839vjp] .kpc-sublabel {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
[b-j77q839vjp] .chan {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
[b-j77q839vjp] .chan-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-j77q839vjp] .chan-bar { height: 6px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
[b-j77q839vjp] .chan-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
[b-j77q839vjp] .chan-val { color: var(--text-primary); font-weight: 600; white-space: nowrap; }

/* ---------- Row 3: card operative compatte ---------- */
.dash3-ops[b-j77q839vjp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.d-kpi[b-j77q839vjp] {
    flex: 1 1 150px;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.d-kpi:hover[b-j77q839vjp] { border-color: var(--border-strong); }
.d-kpi.active[b-j77q839vjp] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.d-kpi-top[b-j77q839vjp] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-kpi-num[b-j77q839vjp] { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.d-kpi-period[b-j77q839vjp] {
    font-size: 10.5px;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
}
.d-kpi-lbl[b-j77q839vjp] { color: var(--text-secondary); font-weight: 600; font-size: 12.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.d-kpi-hint[b-j77q839vjp] { color: var(--text-muted); font-size: 11px; font-weight: 600; margin-top: 3px; }

/* ---------- Row 4: attività + eccezioni ---------- */
.dash3-row4[b-j77q839vjp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.dash3-main[b-j77q839vjp] {
    padding: 8px 8px 6px;
    min-width: 0;
}
.d-main-head[b-j77q839vjp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
}
.d-main-head b[b-j77q839vjp] { font-size: 15px; color: var(--text-primary); }
.d-count[b-j77q839vjp] {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    padding: 1px 8px;
}

.d-list[b-j77q839vjp] {
    display: flex;
    flex-direction: column;
    max-height: 460px;
    overflow-y: auto;
}

.d-head[b-j77q839vjp], .d-row[b-j77q839vjp] {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.6fr 0.9fr 1.3fr;
    gap: 12px;
    align-items: center;
}
.d-head[b-j77q839vjp] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    font-weight: 700;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}
.d-row[b-j77q839vjp] {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s ease;
}
.d-row:hover[b-j77q839vjp] { background: var(--bg-hover); }
.d-cell[b-j77q839vjp] { color: var(--text-secondary); min-width: 0; }
.d-name-wrap[b-j77q839vjp] { display: flex; flex-direction: column; line-height: 1.3; }
.d-name[b-j77q839vjp] { font-weight: 700; color: var(--text-primary); }
.d-sub[b-j77q839vjp] { color: var(--text-muted); font-size: 12.5px; }
.mono[b-j77q839vjp] { font-family: var(--mono); }
.d-dates[b-j77q839vjp] { font-weight: 600; color: var(--text-primary); }
.d-meta[b-j77q839vjp] { display: flex; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.d-tag[b-j77q839vjp] {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* action column */
.d-col-act[b-j77q839vjp] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.d-act[b-j77q839vjp] {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 9px;
    cursor: pointer;
    white-space: nowrap;
}
.d-act:hover[b-j77q839vjp] { border-color: var(--border-strong); color: var(--text-primary); }
.d-act.primary[b-j77q839vjp] { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.d-act.primary:hover[b-j77q839vjp] { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* status pills */
.d-status[b-j77q839vjp] {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    padding: 3px 10px;
    border: 1px solid transparent;
}
.d-status.inhouse[b-j77q839vjp], .d-status.closed[b-j77q839vjp] { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.d-status.upcoming[b-j77q839vjp] { color: var(--accent); background: var(--accent-soft); }
.d-status.past[b-j77q839vjp] { color: var(--text-muted); background: var(--bg-subtle); }
.d-status.unconfirmed[b-j77q839vjp] { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.d-status.expired[b-j77q839vjp], .d-status.noshow[b-j77q839vjp], .d-status.cancelled[b-j77q839vjp] { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

.d-empty[b-j77q839vjp] { padding: 32px; text-align: center; color: var(--text-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .dash3-row1[b-j77q839vjp] {
        grid-template-columns: 220px 1fr;
    }
    .d-trend[b-j77q839vjp] {
        grid-column: 1 / -1;
    }
    .dash3-row4[b-j77q839vjp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 880px) {
    .dash3-row1[b-j77q839vjp] {
        grid-template-columns: 1fr;
    }
    .dash3-money[b-j77q839vjp] {
        grid-template-columns: 1fr;
    }
    .d-head[b-j77q839vjp], .d-row[b-j77q839vjp] {
        grid-template-columns: 1.6fr 1fr 1.2fr;
    }
    .d-head > :nth-child(4)[b-j77q839vjp], .d-row > :nth-child(4)[b-j77q839vjp],
    .d-head > :nth-child(5)[b-j77q839vjp], .d-row > :nth-child(5)[b-j77q839vjp] {
        display: none;
    }
}
/* /Components/Pages/DashboardWidgets/ExceptionsPanel.razor.rz.scp.css */
.exc[b-d3frr4by7j] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exc-head[b-d3frr4by7j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.exc-count[b-d3frr4by7j] {
    font-size: 11px;
    font-weight: 600;
    color: var(--on-accent);
    background: var(--danger);
    border-radius: var(--badge-radius);
    padding: 1px 8px;
}

.exc-none[b-d3frr4by7j] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}
.exc-none-ico[b-d3frr4by7j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
}

.exc-group[b-d3frr4by7j] { display: flex; flex-direction: column; gap: 4px; }

.exc-group-head[b-d3frr4by7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-secondary);
    padding-bottom: 2px;
}
.exc-group-head.danger[b-d3frr4by7j] { color: var(--danger); }
.exc-group-head.warning[b-d3frr4by7j] { color: var(--warning); }

.exc-badge[b-d3frr4by7j] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--badge-radius);
    padding: 0 7px;
}

.exc-row[b-d3frr4by7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.exc-row:hover[b-d3frr4by7j] { background: var(--bg-hover); }

.exc-name[b-d3frr4by7j] {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exc-side[b-d3frr4by7j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.exc-room[b-d3frr4by7j], .exc-dates[b-d3frr4by7j] {
    font-size: 12px;
    color: var(--text-muted);
}
.mono[b-d3frr4by7j] { font-family: var(--mono); }

.exc-act[b-d3frr4by7j] {
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    cursor: pointer;
}
.exc-act:hover[b-d3frr4by7j] { background: color-mix(in srgb, var(--accent) 24%, transparent); }

.exc-link[b-d3frr4by7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong);
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
}
.exc-link:hover[b-d3frr4by7j] { background: var(--bg-hover); text-decoration: none; }
/* /Components/Pages/DashboardWidgets/KpiGroupCard.razor.rz.scp.css */
.kpc[b-74nd0jwnd9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    min-height: 128px;
}

.kpc-head[b-74nd0jwnd9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kpc-head-left[b-74nd0jwnd9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.kpc-title[b-74nd0jwnd9] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.kpc-period[b-74nd0jwnd9] {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--badge-radius);
    padding: 1px 8px;
    white-space: nowrap;
}

.kpc-headline[b-74nd0jwnd9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.kpc-value-wrap[b-74nd0jwnd9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kpc-value[b-74nd0jwnd9] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-primary);
}

.kpc-vlabel[b-74nd0jwnd9] {
    font-size: 12px;
    color: var(--text-muted);
}

.kpc-spark[b-74nd0jwnd9] {
    width: 96px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--accent);
}
.kpc-spark.up[b-74nd0jwnd9] { color: var(--success); }
.kpc-spark.down[b-74nd0jwnd9] { color: var(--danger); }
.kpc-spark.flat[b-74nd0jwnd9] { color: var(--text-muted); }

.kpc-deltas[b-74nd0jwnd9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.delta[b-74nd0jwnd9] {
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    padding: 2px 7px;
    color: var(--text-muted);
    background: var(--bg-subtle);
    white-space: nowrap;
}
.delta.up[b-74nd0jwnd9] {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
}
.delta.down[b-74nd0jwnd9] {
    color: var(--danger);
    background: var(--danger-soft);
}

.kpc-extra[b-74nd0jwnd9] {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpc-skel[b-74nd0jwnd9] {
    height: 26px;
    border-radius: 8px;
}
.kpc-skel.narrow[b-74nd0jwnd9] { height: 14px; width: 60%; }

.skel[b-74nd0jwnd9] {
    background: linear-gradient(90deg, var(--bg-subtle), var(--bg-hover), var(--bg-subtle));
    background-size: 200% 100%;
    animation: kpc-skel-b-74nd0jwnd9 1.2s ease-in-out infinite;
}

@keyframes kpc-skel-b-74nd0jwnd9 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Components/Pages/Housekeeping/HousekeepingAssignments.razor.rz.scp.css */
.hk-mtx-legend[b-pkoem5llk2] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
    font-size: 13px;
}

.hk-mtx-hint[b-pkoem5llk2] {
    color: var(--text-muted, #888);
    font-size: 12px;
}

/* Assignment matrix */
.hk-matrix[b-pkoem5llk2] {
    border-collapse: collapse;
}

.hk-matrix th[b-pkoem5llk2],
.hk-matrix td[b-pkoem5llk2] {
    border: 1px solid var(--border, #e0e0e0);
    text-align: center;
    padding: 6px 8px;
}

.hk-mtx-corner[b-pkoem5llk2] {
    text-align: left;
    background: var(--bg-card);
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 200px;
}

.hk-mtx-user[b-pkoem5llk2] {
    font-size: 12px;
    font-weight: 600;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.hk-mtx-count[b-pkoem5llk2] {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #2196F3);
    background: color-mix(in srgb, var(--accent, #2196F3) 6%, transparent);
}

.hk-mtx-rowh[b-pkoem5llk2] {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
    min-width: 200px;
}

.hk-mtx-tasktype[b-pkoem5llk2] {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #888);
}

.hk-mtx-cell[b-pkoem5llk2] {
    width: 44px;
    color: #4CAF50;
    font-weight: 700;
}

.hk-mtx-cell.clickable[b-pkoem5llk2] {
    cursor: pointer;
}

.hk-mtx-cell.clickable:hover[b-pkoem5llk2] {
    background: color-mix(in srgb, var(--accent, #2196F3) 12%, transparent);
}

.hk-mtx-cell.on[b-pkoem5llk2] {
    background: color-mix(in srgb, #4CAF50 18%, transparent);
}

.hk-mtx-dot[b-pkoem5llk2] {
    font-size: 14px;
}

/* Zone (secondary) section */
.hk-zones[b-pkoem5llk2] {
    margin-top: 22px;
    border-top: 1px solid var(--border, #e0e0e0);
    padding-top: 12px;
}

.hk-zones-toggle[b-pkoem5llk2] {
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    padding: 4px 0;
}

.hk-assign-form[b-pkoem5llk2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    background: var(--bg-card);
}
/* /Components/Pages/Housekeeping/HousekeepingBoard.razor.rz.scp.css */
.hk-filters[b-p6s0rsxnoi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.hk-chip[b-p6s0rsxnoi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 999px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 12px;
    color: inherit;
}

.hk-chip.sel[b-p6s0rsxnoi] {
    border-color: var(--accent, #2196F3);
    background: color-mix(in srgb, var(--accent, #2196F3) 12%, transparent);
    font-weight: 600;
}

.hk-chip-count[b-p6s0rsxnoi] {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    font-size: 11px;
}

.hk-dot-sm[b-p6s0rsxnoi] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.hk-board[b-p6s0rsxnoi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.hk-card[b-p6s0rsxnoi] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    background: var(--bg-card);
}

.hk-card.ready[b-p6s0rsxnoi] {
    border-left: 4px solid #4CAF50;
}

.hk-card.clickable[b-p6s0rsxnoi] {
    cursor: pointer;
}

.hk-card.clickable:hover[b-p6s0rsxnoi] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.hk-card-top[b-p6s0rsxnoi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hk-room-name[b-p6s0rsxnoi] {
    font-weight: 600;
    font-size: 15px;
}

.hk-icons[b-p6s0rsxnoi] {
    display: inline-flex;
    gap: 4px;
    font-size: 13px;
}

.hk-note[b-p6s0rsxnoi] {
    font-size: 11px;
    color: var(--text-muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-picker-wrap[b-p6s0rsxnoi] {
    position: absolute;
    top: 100%;
    left: 8px;
    z-index: 20;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .hk-board[b-p6s0rsxnoi] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
/* /Components/Pages/Housekeeping/HousekeepingMy.razor.rz.scp.css */
.hk-my[b-0fssd5n3lo] {
    max-width: 560px;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hk-my-head[b-0fssd5n3lo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
}

.hk-my-empty[b-0fssd5n3lo] {
    text-align: center;
    padding: 40px 12px;
    color: var(--text-muted, #888);
}

.hk-my-card[b-0fssd5n3lo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.hk-my-room[b-0fssd5n3lo] {
    font-size: 22px;
    font-weight: 700;
}

.hk-my-type[b-0fssd5n3lo] {
    font-size: 14px;
    color: var(--text-primary);
}

.hk-my-req[b-0fssd5n3lo] {
    font-size: 13px;
    color: var(--text-muted, #666);
}

.hk-my-status[b-0fssd5n3lo] {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.hk-my-actions[b-0fssd5n3lo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Big tap targets (>= 56px height) for mobile use */
.hk-btn[b-0fssd5n3lo] {
    flex: 1 1 auto;
    min-height: 56px;
    min-width: 96px;
    border: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.hk-btn:disabled[b-0fssd5n3lo] { opacity: 0.6; }
.hk-btn.start[b-0fssd5n3lo] { background: #2196F3; }
.hk-btn.done[b-0fssd5n3lo] { background: #4CAF50; }
.hk-btn.skip[b-0fssd5n3lo] { background: #9E9E9E; }
.hk-btn.report[b-0fssd5n3lo] { background: #FF9800; }

/* Bottom sheet */
.hk-sheet-backdrop[b-0fssd5n3lo] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hk-sheet[b-0fssd5n3lo] {
    width: 100%;
    max-width: 560px;
    background: var(--bg-card);
    border-radius: 18px 18px 0 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 88vh;
    overflow-y: auto;
}

.hk-sheet-head[b-0fssd5n3lo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 17px;
}

.hk-sheet-room[b-0fssd5n3lo] {
    color: var(--text-muted, #888);
    font-size: 14px;
}

.hk-sheet-types[b-0fssd5n3lo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hk-type-chip[b-0fssd5n3lo] {
    padding: 10px 14px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 999px;
    background: var(--bg-card);
    font-size: 14px;
    cursor: pointer;
    color: inherit;
}

.hk-type-chip.sel[b-0fssd5n3lo] {
    border-color: var(--accent, #2196F3);
    background: color-mix(in srgb, var(--accent, #2196F3) 14%, transparent);
    font-weight: 600;
}

.hk-photo-btn[b-0fssd5n3lo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px dashed var(--border, #bbb);
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    justify-content: center;
}

.hk-photo-ok[b-0fssd5n3lo] {
    color: #4CAF50;
    font-size: 13px;
}

.hk-sheet-foot[b-0fssd5n3lo] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.hk-sheet-foot .btn[b-0fssd5n3lo] {
    flex: 1;
    min-height: 50px;
}
/* /Components/Pages/Housekeeping/HousekeepingRules.razor.rz.scp.css */
.hk-rules-hint[b-vw0l4dysdf] {
    color: var(--text-muted, #888);
    font-size: 13px;
    margin: 8px 0 14px;
}

.hk-rule-desc[b-vw0l4dysdf] {
    font-size: 11px;
    color: var(--text-muted, #999);
}

.hk-rule-cats[b-vw0l4dysdf] {
    font-size: 12px;
    color: var(--text-muted, #666);
    max-width: 320px;
}
/* /Components/Pages/Housekeeping/HousekeepingTasks.razor.rz.scp.css */
.hk-bulkbar[b-049iakvkuh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid var(--accent, #2196F3);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #2196F3) 8%, transparent);
    font-size: 13px;
}
/* /Components/Pages/Housekeeping/MaintenanceList.razor.rz.scp.css */
/* Tab stati: classi standard .detail-tabs/.detail-tab (app.css); qui solo la spaziatura verso la griglia */
.detail-tabs[b-yfsqplyozl] {
    margin: 6px 0 14px;
}

.hk-row[b-yfsqplyozl] {
    cursor: pointer;
}

.hk-row:hover[b-yfsqplyozl] {
    background: color-mix(in srgb, var(--accent, #2196F3) 6%, transparent);
}

/* ── Modal — stesse convenzioni dei modal standard (SimpleServiceBookingModal):
   backdrop sfumato + blur, card bordata con radius di tema, banner scuro in testata,
   footer con gruppi sinistra/destra. Controlli: .cx-input/.cx-select/.cx-textarea globali. */
.hk-modal-backdrop[b-yfsqplyozl] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: hk-fade-b-yfsqplyozl 0.15s ease;
}
@keyframes hk-fade-b-yfsqplyozl { from { opacity: 0; } to { opacity: 1; } }

.hk-modal[b-yfsqplyozl] {
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: hk-pop-b-yfsqplyozl 0.18s ease;
}
@keyframes hk-pop-b-yfsqplyozl {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header: banner scuro con occhiello + titolo, come .bkm-header */
.hk-modal-head[b-yfsqplyozl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, #26262b 0%, #191a1d 100%);
}
.hk-modal-head-text[b-yfsqplyozl] { flex: 1; min-width: 0; }
.hk-modal-eyebrow[b-yfsqplyozl] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a3a3aa;
}
.hk-modal-title[b-yfsqplyozl] {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hk-modal-close[b-yfsqplyozl] {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #d0d0d6;
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.hk-modal-close:hover:not(:disabled)[b-yfsqplyozl] { background: rgba(255, 255, 255, 0.13); color: #ffffff; border-color: rgba(255, 255, 255, 0.24); }
.hk-modal-close:disabled[b-yfsqplyozl] { opacity: .5; cursor: not-allowed; }

.hk-modal-body[b-yfsqplyozl] {
    padding: 18px;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hk-modal-foot[b-yfsqplyozl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.hk-modal-foot-left[b-yfsqplyozl],
.hk-modal-foot-right[b-yfsqplyozl] { display: flex; align-items: center; gap: 8px; }

.hk-form-row[b-yfsqplyozl] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hk-form-row .cx-field[b-yfsqplyozl] {
    flex: 1;
    min-width: 160px;
}

.cx-field[b-yfsqplyozl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Etichetta sopra il campo: stessa tipografia di .bkm-label */
.cx-field > span[b-yfsqplyozl] {
    font-size: 12px;
    color: var(--text-muted);
}

.cx-check[b-yfsqplyozl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.cx-check input[b-yfsqplyozl] { accent-color: var(--accent); cursor: pointer; }

.hk-photos[b-yfsqplyozl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.hk-photo img[b-yfsqplyozl] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border, #e0e0e0);
}

/* "Aggiungi foto": bottone standard che ospita l'InputFile nascosto (niente controllo nativo) */
.hk-photo-add[b-yfsqplyozl] {
    align-self: flex-start;
    cursor: pointer;
    margin-top: 2px;
}
.hk-photo-add.is-disabled[b-yfsqplyozl] { opacity: .55; cursor: not-allowed; }
.hk-photo-add[b-yfsqplyozl]  input[type="file"] { display: none; }
/* /Components/Pages/Integrations/AlloggiatiPage.razor.rz.scp.css */
/* Indicatore di avanzamento indeterminato per le operazioni Alloggiati Web
   (token + chiamata SOAP): non conosciamo la percentuale, quindi barra animata. */
.allo-busy[b-0lp0bd3rs5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    color: var(--text-primary);
    opacity: .8;
    font-size: 13px;
}

.allo-progress[b-0lp0bd3rs5] {
    position: relative;
    height: 4px;
    width: 100%;
    background: var(--border-strong);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.allo-progress[b-0lp0bd3rs5]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: allo-indeterminate-b-0lp0bd3rs5 1.1s ease-in-out infinite;
}

@keyframes allo-indeterminate-b-0lp0bd3rs5 {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* Riga introduttiva: spiega il flusso in una frase. */
.allo-intro[b-0lp0bd3rs5] {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-secondary, var(--text-primary));
    opacity: .9;
}

/* Legenda errori/avvisi. */
.allo-legend[b-0lp0bd3rs5] {
    display: flex;
    gap: 16px;
    margin: 2px 0 8px;
    font-size: 12px;
    opacity: .85;
}
.allo-legend-item[b-0lp0bd3rs5] { display: inline-flex; align-items: center; gap: 6px; }

/* Pallino di severità riusato in legenda, header gruppo e righe campo. */
.allo-dot[b-0lp0bd3rs5] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--border-strong);
}
.allo-dot.ko[b-0lp0bd3rs5] { background: var(--danger, #d64545); }
.allo-dot.warn[b-0lp0bd3rs5] { background: #d9a300; }

/* Riquadri raggruppati per persona/prenotazione. */
.issue-groups[b-0lp0bd3rs5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
}

.issue-group[b-0lp0bd3rs5] {
    border: 1px solid var(--border-strong);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
}
.issue-group.ko[b-0lp0bd3rs5] { border-left-color: var(--danger, #d64545); }
.issue-group.warn[b-0lp0bd3rs5] { border-left-color: #d9a300; }

.issue-group-head[b-0lp0bd3rs5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    flex-wrap: wrap;
}

.issue-group-name[b-0lp0bd3rs5] { font-weight: 700; font-size: 13px; }

.issue-group-count[b-0lp0bd3rs5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    background: var(--border-strong);
    color: var(--text-primary);
}

.issue-group-actions[b-0lp0bd3rs5] {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* Dettaglio campi sotto l'header del gruppo. */
.issue-fields[b-0lp0bd3rs5] {
    list-style: none;
    margin: 0;
    padding: 0 10px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.issue-fields li[b-0lp0bd3rs5] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.issue-open[b-0lp0bd3rs5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
/* Variante con etichetta accanto all'icona (header dei gruppi). */
.issue-open.has-label[b-0lp0bd3rs5] { width: auto; padding: 0 10px; height: 26px; }

.issue-open:hover[b-0lp0bd3rs5] {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

.issue-code[b-0lp0bd3rs5] {
    font-weight: 600;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--border-strong);
    flex: 0 0 auto;
}
.issue-ref[b-0lp0bd3rs5] { opacity: .8; font-size: 12px; }
.issue-text[b-0lp0bd3rs5] { opacity: .95; }

/* Tabella esito invio: colore riga + badge OK/KO + colonna azioni. */
.allo-result td[b-0lp0bd3rs5], .allo-result th[b-0lp0bd3rs5] { vertical-align: middle; }
.allo-result tr.ko[b-0lp0bd3rs5] { background: rgba(214, 69, 69, .06); }
.allo-actions-col[b-0lp0bd3rs5] { width: 1%; white-space: nowrap; text-align: right; }
.allo-actions-col .issue-open[b-0lp0bd3rs5] { margin-left: 4px; }

.allo-badge[b-0lp0bd3rs5] {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    padding: 1px 8px;
    border-radius: var(--badge-radius);
    font-size: 11px;
    font-weight: 700;
}
.allo-badge.ok[b-0lp0bd3rs5] { background: rgba(34, 160, 90, .15); color: #1f9d57; }
.allo-badge.ko[b-0lp0bd3rs5] { background: rgba(214, 69, 69, .15); color: var(--danger, #d64545); }

/* Toggle modalità invio: Test (collaudo) vs Invio reale. Il colore comunica il rischio. */
.allo-mode[b-0lp0bd3rs5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.allo-mode.is-test[b-0lp0bd3rs5] { color: #1f9d57; border-color: rgba(34, 160, 90, .45); background: rgba(34, 160, 90, .08); }
.allo-mode.is-real[b-0lp0bd3rs5] { color: var(--danger, #d64545); border-color: rgba(214, 69, 69, .45); background: rgba(214, 69, 69, .08); }
.allo-mode-text[b-0lp0bd3rs5] { white-space: nowrap; }

/* Pulsante invio reale: stile "pericolo" (la trasmissione è irreversibile). */
.allo-btn-real[b-0lp0bd3rs5] {
    background: var(--danger, #d64545);
    color: #fff;
    border-color: transparent;
}
.allo-btn-real:hover:not(:disabled)[b-0lp0bd3rs5] { filter: brightness(1.05); }

/* Barra di conferma per l'invio reale. */
.allo-confirm[b-0lp0bd3rs5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(214, 69, 69, .35);
    border-left: 3px solid var(--danger, #d64545);
    background: rgba(214, 69, 69, .06);
    font-size: 13px;
}
.allo-confirm-text[b-0lp0bd3rs5] { font-weight: 600; }
.allo-confirm-actions[b-0lp0bd3rs5] { display: inline-flex; gap: 8px; }

/* Riga "token ottenuto" nell'esito invio: evidenzia il passo GeneraToken. */
.allo-token[b-0lp0bd3rs5] {
    margin-top: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    opacity: .95;
}
.allo-token-ok[b-0lp0bd3rs5] { color: #1f9d57; font-weight: 600; }

.allo-mode-tag[b-0lp0bd3rs5] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.allo-mode-tag.is-test[b-0lp0bd3rs5] { background: rgba(34, 160, 90, .15); color: #1f9d57; }
.allo-mode-tag.is-real[b-0lp0bd3rs5] { background: rgba(214, 69, 69, .15); color: var(--danger, #d64545); }
/* /Components/Pages/Orders/OrdersList.razor.rz.scp.css */
/* Scoped styles per OrdersList.razor — variabili tema reali (--bg-card/--text-primary/…). */

/* Barra filtri sotto la toolbar: select booking, intervallo date, toggle chiusi. */
.ord-filters[b-x0i3uebutd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.ord-filters label[b-x0i3uebutd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ord-filters .cx-input[b-x0i3uebutd] {
    width: auto;
}

.ord-check[b-x0i3uebutd] {
    cursor: pointer;
}

/* Riga editabile del draft ordine (stessa resa delle righe extra del modal booking,
   ridefinita qui perché quelle classi sono scoped al modal). */
.ord-row[b-x0i3uebutd] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ord-cell[b-x0i3uebutd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
}

.ord-cell.grow[b-x0i3uebutd] {
    flex: 2 1 0;
}

.ord-cell label[b-x0i3uebutd] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ord-cell .cx-input[b-x0i3uebutd],
.ord-cell .cx-select[b-x0i3uebutd] {
    width: 100%;
}

/* Prezzo unitario calcolato da listino: sola lettura (aspetto campo, non editabile). */
.ord-cell .ord-ro[b-x0i3uebutd] {
    display: flex;
    align-items: center;
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.ord-rm[b-x0i3uebutd] {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    width: 32px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.ord-rm:hover[b-x0i3uebutd] {
    background: rgba(239, 68, 68, .10);
    color: var(--danger);
    border-color: rgba(239, 68, 68, .3);
}

/* Chip dell'elemento selezionato nei picker booking/cliente. */
.ord-pick[b-x0i3uebutd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Lista risultati dei picker. */
.ord-results[b-x0i3uebutd] {
    margin-top: 6px;
    max-height: 200px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.ord-result[b-x0i3uebutd] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}

.ord-result:last-child[b-x0i3uebutd] {
    border-bottom: 0;
}

.ord-result:hover[b-x0i3uebutd] {
    background: var(--bg-hover);
}

/* Tabella righe nella scheda ordine (sola lettura). */
.ord-lines[b-x0i3uebutd] {
    margin-bottom: 12px;
}
/* /Components/Pages/Products/ProductsList.razor.rz.scp.css */
/* Scoped styles for ProductsList.razor — Blazor auto-scopes with ::deep markers */

/*
 * Native <input type="color"> ships with a user-agent border around the inner colour
 * swatch (the "black square" you see on Chromium) plus a few pixels of padding around
 * it. Both have to be neutralised via the vendor pseudo-elements — they can't be set
 * via inline style. The outer rounded box is our own border on the input itself.
 */
.cx-color-picker[b-bszcru43ux] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.cx-color-picker[b-bszcru43ux]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.cx-color-picker[b-bszcru43ux]::-webkit-color-swatch {
    border: none;
    border-radius: 7px; /* one less than the outer radius so the swatch sits flush inside */
}

.cx-color-picker[b-bszcru43ux]::-moz-color-swatch {
    border: none;
    border-radius: 7px;
}
/* /Components/Shared/BookingLockOverlay.razor.rz.scp.css */
/* Overlay bloccante del lock prenotazione: sopra il modal (1200) e i suoi popup
   interni (1300/1400). Stesso linguaggio visivo del box conferma overbooking
   (rcp-confirm-box): card su --bg-card con bordo e ombra, testo secondario. */
.blo-overlay[b-8iv1dd3gmk] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: color-mix(in srgb, var(--bg-app, #0b0f17) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: blo-fade-b-8iv1dd3gmk 0.12s ease;
}

@keyframes blo-fade-b-8iv1dd3gmk {
    from { opacity: 0; }
    to { opacity: 1; }
}

.blo-box[b-8iv1dd3gmk] {
    width: 100%;
    max-width: 460px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    padding: 18px 20px;
}

.blo-head[b-8iv1dd3gmk] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent, var(--text-primary));
    margin-bottom: 6px;
}

.blo-head.danger[b-8iv1dd3gmk] { color: var(--danger); }

.blo-head h4[b-8iv1dd3gmk] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.blo-text[b-8iv1dd3gmk] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 6px 0 0;
}

.blo-error[b-8iv1dd3gmk] {
    margin-top: 10px;
    font-size: 13px;
    color: var(--danger);
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
}

.blo-actions[b-8iv1dd3gmk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
/* /Components/Shared/Charts/AreaChart.razor.rz.scp.css */
.ac[b-5blt05w14o] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.ac-grid[b-5blt05w14o] {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ac-line[b-5blt05w14o] {
    fill: none;
    stroke: var(--accent-2);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ac-grad-top[b-5blt05w14o] { stop-color: var(--accent); stop-opacity: 0.35; }
.ac-grad-bottom[b-5blt05w14o] { stop-color: var(--accent); stop-opacity: 0; }

.ac-today[b-5blt05w14o] {
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.ac-today-dot[b-5blt05w14o] {
    fill: var(--accent);
    stroke: var(--bg-card);
    stroke-width: 2;
}

.ac-hit[b-5blt05w14o] {
    fill: transparent;
    cursor: default;
}

.ac-empty[b-5blt05w14o] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    color: var(--text-muted);
    font-size: 13px;
}
/* /Components/Shared/Charts/Sparkline.razor.rz.scp.css */
.spark[b-iwas2g70z7] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.spark polyline[b-iwas2g70z7] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* /Components/Shared/CompanyAutocomplete.razor.rz.scp.css */
/* Scoped styles for CompanyAutocomplete — mirrors PsMunicipalityAutocomplete so the
   control blends into the customer/anagrafica forms. Uses theme variables for light/dark. */

.cac-label[b-je3qo53vwv] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cac-root[b-je3qo53vwv] {
    position: relative;
    width: 100%;
}

.cac-root.is-disabled[b-je3qo53vwv] {
    opacity: 0.55;
    pointer-events: none;
}

.cac-input-wrap[b-je3qo53vwv] {
    position: relative;
    width: 100%;
}

.cac-input-icon[b-je3qo53vwv] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Input — mirrors .cx-input. Right padding leaves room for the clear button. */
.cac-input[b-je3qo53vwv] {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-primary);
    font: 500 13px 'Inter', 'Segoe UI', sans-serif;
    line-height: 1.3;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cac-input[b-je3qo53vwv]::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
    font-weight: 400;
}

.cac-input:hover[b-je3qo53vwv] {
    border-color: var(--border-strong);
    background-color: var(--bg-card);
}

.cac-input:focus[b-je3qo53vwv] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 2px rgba(0, 0, 0, 0.04);
    background-color: var(--bg-card);
}

/* Clear (×) button — sits at the right edge of the input. */
.cac-clear[b-je3qo53vwv] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.cac-clear:hover[b-je3qo53vwv] {
    background: var(--bg-card-2);
    color: var(--text-primary);
}

.cac-dropdown[b-je3qo53vwv] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 6px;
}

.cac-row[b-je3qo53vwv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.12s ease;
}

.cac-row + .cac-row[b-je3qo53vwv] {
    margin-top: 2px;
}

.cac-row-active[b-je3qo53vwv],
.cac-row:hover[b-je3qo53vwv] {
    background: var(--accent-soft);
}

.cac-name[b-je3qo53vwv] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.cac-tag[b-je3qo53vwv] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0.04em;
}

.cac-hint[b-je3qo53vwv] {
    cursor: default;
    color: var(--text-muted);
    font-style: italic;
    font-size: 12.5px;
}

.cac-hint:hover[b-je3qo53vwv] {
    background: transparent;
}
/* /Components/Shared/GiesSendResultList.razor.rz.scp.css */
/* Per-day outcome list for GIES sends (scoped to GiesSendResultList). */
.gies-results[b-58kpftfkxo] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gies-day[b-58kpftfkxo] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}

.gies-day-head[b-58kpftfkxo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gies-ico[b-58kpftfkxo] {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.gies-ico.ok[b-58kpftfkxo]   { color: var(--success); }
.gies-ico.ko[b-58kpftfkxo]   { color: var(--danger); }
.gies-ico.warn[b-58kpftfkxo] { color: var(--warning); }

.gies-date[b-58kpftfkxo] { min-width: 86px; }

.gies-counts[b-58kpftfkxo] {
    color: var(--text-muted);
    font-size: 12px;
}

.gies-msg[b-58kpftfkxo] {
    color: var(--text-muted);
    font-size: 12px;
    flex: 1;
    text-align: right;
}

/* Detail rows for rejected days: GIES errors + pre-send validation issues. */
.gies-issues[b-58kpftfkxo] {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0 26px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gies-issue[b-58kpftfkxo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.issue-code[b-58kpftfkxo] {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 12px;
}

.issue-ref[b-58kpftfkxo]   { font-weight: 600; }
.issue-guest[b-58kpftfkxo] { font-style: italic; }
.issue-text[b-58kpftfkxo]  { color: var(--text-muted); }

/* Open-booking icon (shown when the host wires OnOpenBooking). */
.issue-open[b-58kpftfkxo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
}
.issue-open:hover[b-58kpftfkxo] {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}
/* /Components/Shared/HkStatusBadge.razor.rz.scp.css */
.hk-badge[b-86c0ij72eq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.hk-dot[b-86c0ij72eq] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hk-color, #9E9E9E);
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hk-color, #9E9E9E) 22%, transparent);
}

.hk-badge-label[b-86c0ij72eq] {
    color: inherit;
}
/* /Components/Shared/HkStatusPicker.razor.rz.scp.css */
.hk-picker[b-fxxmt07sk7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.hk-picker-item[b-fxxmt07sk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    color: inherit;
}

.hk-picker-item:hover:not(:disabled)[b-fxxmt07sk7] {
    background: color-mix(in srgb, var(--accent, #2196F3) 12%, transparent);
}

.hk-picker-item.sel[b-fxxmt07sk7] {
    font-weight: 600;
    background: color-mix(in srgb, var(--accent, #2196F3) 16%, transparent);
}

.hk-picker-item:disabled[b-fxxmt07sk7] {
    opacity: 0.55;
    cursor: default;
}

.hk-dot[b-fxxmt07sk7] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}
/* /Components/Shared/InfoHint.razor.rz.scp.css */
.info-hint[b-dsgrksv2iy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    cursor: help;
    flex: 0 0 auto;
    vertical-align: middle;
    outline: none;
}
.info-hint svg[b-dsgrksv2iy] { width: 15px; height: 15px; display: block; }
.info-hint:hover[b-dsgrksv2iy], .info-hint:focus-visible[b-dsgrksv2iy] { color: var(--accent); }

.info-tip[b-dsgrksv2iy] {
    position: absolute;
    top: calc(100% + 8px);
    background: var(--bg-panel);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    width: 240px;
    max-width: 70vw;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 60;
    white-space: normal;
    pointer-events: none;
}
/* Allineamento orizzontale del tooltip rispetto all'icona (evita il taglio ai bordi). */
.info-tip.align-center[b-dsgrksv2iy] { left: 50%; transform: translateX(-50%); }
.info-tip.align-start[b-dsgrksv2iy] { left: -8px; }
.info-tip.align-end[b-dsgrksv2iy] { right: -8px; }

.info-hint:hover .info-tip[b-dsgrksv2iy],
.info-hint:focus-visible .info-tip[b-dsgrksv2iy],
.info-hint:focus-within .info-tip[b-dsgrksv2iy] {
    opacity: 1;
    visibility: visible;
}

/* Freccetta verso l'icona */
.info-tip[b-dsgrksv2iy]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    border: 5px solid transparent;
    border-bottom-color: var(--border-strong);
}
.info-tip.align-center[b-dsgrksv2iy]::before { left: 50%; transform: translateX(-50%); }
.info-tip.align-start[b-dsgrksv2iy]::before { left: 12px; }
.info-tip.align-end[b-dsgrksv2iy]::before { right: 12px; }
/* /Components/Shared/MediaGallery.razor.rz.scp.css */
/* Galleria media: griglia miniature + lightbox centrato + affordance di riordino. */

.mg-root[b-udvyc7yyaz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.mg-upload[b-udvyc7yyaz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mg-upload-label[b-udvyc7yyaz] {
    font-size: 12px;
    color: var(--text-muted);
}

.mg-hint[b-udvyc7yyaz] {
    font-size: 11px;
    color: var(--text-muted);
}

.mg-empty[b-udvyc7yyaz] {
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.mg-grid[b-udvyc7yyaz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.mg-thumb[b-udvyc7yyaz] {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: var(--bg-card);
    transition: transform .12s ease, box-shadow .12s ease;
}

.mg-thumb:hover[b-udvyc7yyaz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.mg-thumb.dragging[b-udvyc7yyaz] {
    opacity: .4;
    outline: 2px dashed var(--text-muted);
    outline-offset: -2px;
}

.mg-thumb img[b-udvyc7yyaz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; /* i drag/click li gestisce il contenitore, non l'immagine */
}

/* ── Tile "aggiungi" (+) ─────────────────────────────────────────────── */
.mg-add[b-udvyc7yyaz] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    background: transparent;
    cursor: pointer;
}

.mg-add:hover[b-udvyc7yyaz] {
    transform: none;
    box-shadow: none;
    border-color: var(--text-muted);
    background: var(--bg-card);
}

.mg-plus[b-udvyc7yyaz] {
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-muted);
}

/* NB: l'<input> di <InputFile> è nascosto via style inline nel .razor — la CSS isolation
   non lo raggiungerebbe (attributo di scope assente sugli elementi dei componenti figli). */

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.mg-lightbox[b-udvyc7yyaz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}

.mg-figure[b-udvyc7yyaz] {
    position: relative;
    display: inline-flex;
    max-width: 92vw;
    max-height: 88vh;
}

.mg-figure img[b-udvyc7yyaz] {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    cursor: zoom-out;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}

.mg-del[b-udvyc7yyaz] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: rgba(220, 38, 38, .92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.mg-del:hover[b-udvyc7yyaz] {
    background: rgba(185, 28, 28, .96);
}

.mg-del:disabled[b-udvyc7yyaz] {
    opacity: .6;
    cursor: default;
}
/* /Components/Shared/NotificationCenter.razor.rz.scp.css */
.notif-wrap[b-dsa2p4jxw2] {
    position: relative;
    display: inline-flex;
}

.notif-badge[b-dsa2p4jxw2] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #F44336;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.notif-backdrop[b-dsa2p4jxw2] {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.notif-panel[b-dsa2p4jxw2] {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 901;
    width: 320px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.notif-head[b-dsa2p4jxw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    font-size: 14px;
}

.notif-link[b-dsa2p4jxw2] {
    border: 0;
    background: transparent;
    color: var(--accent, #2196F3);
    font-size: 11px;
    cursor: pointer;
}

.notif-list[b-dsa2p4jxw2] {
    overflow-y: auto;
}

.notif-empty[b-dsa2p4jxw2] {
    padding: 26px 12px;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 13px;
}

.notif-item[b-dsa2p4jxw2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border, #f0f0f0);
    background: color-mix(in srgb, var(--accent, #2196F3) 6%, transparent);
    text-align: left;
    cursor: pointer;
}

.notif-item.read[b-dsa2p4jxw2] {
    background: transparent;
}

.notif-item:hover[b-dsa2p4jxw2] {
    background: color-mix(in srgb, var(--accent, #2196F3) 10%, transparent);
}

.notif-body[b-dsa2p4jxw2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.notif-msg[b-dsa2p4jxw2] {
    font-size: 13px;
    color: inherit;
}

.notif-time[b-dsa2p4jxw2] {
    font-size: 11px;
    color: var(--text-muted, #999);
}

.notif-dot[b-dsa2p4jxw2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: 0 0 auto;
}

.notif-dot.info[b-dsa2p4jxw2] { background: #2196F3; }
.notif-dot.ok[b-dsa2p4jxw2] { background: #4CAF50; }
.notif-dot.warn[b-dsa2p4jxw2] { background: #FF9800; }

/* Toasts */
.notif-toasts[b-dsa2p4jxw2] {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
}

.notif-toast[b-dsa2p4jxw2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border, #e0e0e0);
    border-left: 4px solid #2196F3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    font-size: 13px;
    cursor: pointer;
    animation: notif-slide-in-b-dsa2p4jxw2 0.18s ease-out;
}

.notif-toast.ok[b-dsa2p4jxw2] { border-left-color: #4CAF50; }
.notif-toast.warn[b-dsa2p4jxw2] { border-left-color: #FF9800; }

@keyframes notif-slide-in-b-dsa2p4jxw2 {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
/* /Components/Shared/OvercoreLoader.razor.rz.scp.css */
.ocl-wrap[b-vmgkj82wnp] {
    text-align: center;
    padding: 16px 0;
}

.overcore-loader[b-vmgkj82wnp] {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .overcore-loader[b-vmgkj82wnp] {
        opacity: 0.6;
    }
}
/* /Components/Shared/PsDocumentTypeSelect.razor.rz.scp.css */
/* The select itself uses the global .cx-select look — only the optional label
   needs a scoped rule, mirroring the PsMunicipalityAutocomplete label. */

.psd-label[b-dq9qco5fw0] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* /Components/Shared/PsMunicipalityAutocomplete.razor.rz.scp.css */
/* Scoped styles for PsMunicipalityAutocomplete.
   The input matches the global .cx-input look (40px, 10px radius, Inter, theme
   variables) so the component blends in with the rest of the customer/anagrafica
   form without forcing the parent to add classes. The dropdown uses the same
   theme variables, so light/dark themes flow through automatically. */

.psm-label[b-ly41twtf84] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.psm-root[b-ly41twtf84] {
    position: relative;
    width: 100%;
}

.psm-root.is-disabled[b-ly41twtf84] {
    opacity: 0.55;
    pointer-events: none;
}

/* Wrapper for the input + leading search icon — flexbox keeps the icon
   aligned regardless of input height. */
.psm-input-wrap[b-ly41twtf84] {
    position: relative;
    width: 100%;
}

.psm-input-icon[b-ly41twtf84] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Input — mirrors .cx-input from the global stylesheet. */
.psm-input[b-ly41twtf84] {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 36px;          /* extra left padding for the search icon */
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    color: var(--text-primary);
    font: 500 13px 'Inter', 'Segoe UI', sans-serif;
    line-height: 1.3;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.psm-input[b-ly41twtf84]::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
    font-weight: 400;
}

.psm-input:hover[b-ly41twtf84] {
    border-color: var(--border-strong);
    background-color: var(--bg-card);
}

.psm-input:focus[b-ly41twtf84] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 2px rgba(0, 0, 0, 0.04);
    background-color: var(--bg-card);
}

/* Dropdown panel — anchored under the input, scrollable for many rows. */
.psm-dropdown[b-ly41twtf84] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 6px;
}

.psm-row[b-ly41twtf84] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.12s ease;
}

.psm-row + .psm-row[b-ly41twtf84] {
    margin-top: 2px;
}

.psm-row-active[b-ly41twtf84],
.psm-row:hover[b-ly41twtf84] {
    background: var(--accent-soft);
}

.psm-name[b-ly41twtf84] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.psm-prov[b-ly41twtf84] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Empty / loading state — non-clickable, slightly smaller. */
.psm-hint[b-ly41twtf84] {
    cursor: default;
    color: var(--text-muted);
    font-style: italic;
    font-size: 12.5px;
}

.psm-hint:hover[b-ly41twtf84] {
    background: transparent;
}
/* /Components/Shared/StayAiChat.razor.rz.scp.css */
/* ── Drawer ─────────────────────────────────────────────────────────────── */
/* Il launcher di apertura ("AI" con bordo cangiante) vive in topbar: .ai-launch in app.css. */
.ai-drawer[b-ba769qiaiy] {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1362;
    width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    color: var(--text-primary);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .22);
    transform: translateX(105%);
    transition: transform .2s ease;
}

.ai-drawer.open[b-ba769qiaiy] { transform: translateX(0); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.ai-header[b-ba769qiaiy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.ai-title[b-ba769qiaiy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .95rem;
}

.ai-header-actions[b-ba769qiaiy] { display: flex; gap: 6px; }

.ai-icon-btn[b-ba769qiaiy] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ai-icon-btn:hover[b-ba769qiaiy] { color: var(--text-primary); background: var(--bg-hover); }

/* ── Messaggi ───────────────────────────────────────────────────────────── */
.ai-messages[b-ba769qiaiy] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-empty[b-ba769qiaiy] {
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.5;
    padding: 10px 4px;
}

.ai-msg[b-ba769qiaiy] {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-msg.user[b-ba769qiaiy] {
    align-self: flex-end;
    background: var(--accent);
    color: var(--on-accent);
    border-bottom-right-radius: 4px;
}

.ai-msg.assistant[b-ba769qiaiy] {
    align-self: flex-start;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.ai-msg.error[b-ba769qiaiy] {
    align-self: stretch;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid var(--danger);
    color: var(--text-primary);
    font-size: .82rem;
}

.ai-tool-chip[b-ba769qiaiy] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    font-size: .74rem;
}

/* Indicatore "sta scrivendo" */
.ai-typing[b-ba769qiaiy] {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 10px 12px;
}

.ai-typing span[b-ba769qiaiy] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: ai-blink-b-ba769qiaiy 1.2s infinite ease-in-out;
}

.ai-typing span:nth-child(2)[b-ba769qiaiy] { animation-delay: .2s; }
.ai-typing span:nth-child(3)[b-ba769qiaiy] { animation-delay: .4s; }

@keyframes ai-blink-b-ba769qiaiy {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}

/* ── Conferma azione ────────────────────────────────────────────────────── */
.ai-confirm[b-ba769qiaiy] {
    border-top: 1px solid var(--border);
    padding: 12px 14px;
    background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.ai-confirm-title[b-ba769qiaiy] { font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.ai-confirm-tool[b-ba769qiaiy] { font-size: .8rem; color: var(--text-secondary); margin-bottom: 6px; }
.ai-confirm-note[b-ba769qiaiy] { font-size: .78rem; color: var(--text-secondary); margin-bottom: 6px; }

.ai-confirm-args[b-ba769qiaiy] {
    max-height: 140px;
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: .72rem;
    margin: 0 0 10px;
}

.ai-confirm-actions[b-ba769qiaiy] { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Input ──────────────────────────────────────────────────────────────── */
.ai-input[b-ba769qiaiy] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px 6px;
    border-top: 1px solid var(--border);
}

.ai-input textarea[b-ba769qiaiy] {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-subtle);
    color: var(--text-primary);
    padding: 8px 10px;
    font: inherit;
    font-size: .88rem;
}

.ai-input textarea:focus[b-ba769qiaiy] { outline: 2px solid var(--accent); outline-offset: -1px; }

.ai-btn[b-ba769qiaiy] {
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 8px 12px;
    font-size: .84rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text-primary);
}

.ai-btn.primary[b-ba769qiaiy] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ai-btn.primary:disabled[b-ba769qiaiy] { opacity: .5; cursor: default; }
.ai-btn.danger[b-ba769qiaiy] { background: var(--danger); color: #fff; border-color: var(--danger); }
.ai-btn.ghost:hover[b-ba769qiaiy] { background: var(--bg-hover); }

.ai-disclaimer[b-ba769qiaiy] {
    padding: 0 14px 10px;
    font-size: .68rem;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .ai-drawer[b-ba769qiaiy] { width: 100vw; }
}
/* /Components/Shared/SubscriptionPopup.razor.rz.scp.css */
/* Styles for SubscriptionPopup moved to wwwroot/app.css (global).
   They are intentionally NOT component-scoped: the popup renders as a sibling of the
   topbar inside the layout grid, and the fixed-overlay positioning must always be
   present — a scoped bundle that fails to load (e.g. under dotnet watch) would let the
   modal collapse into the grid (appearing near the sidebar). See app.css ".sub-*". */