/*
 * HAsset-Book — componenti comuni dell'admin (docs-admin/stile-admin.md §5–§6), uguali in tutto il programma e nei moduli.
 * Solo variabili di base.css, nessun colore scritto a mano. Bootstrap per ora resta: qui le sue classi prendono
 * l'aspetto della guida. !important solo dove serve per vincere su Bootstrap (commentato).
 */

/* ---------- Base ---------- */
html {
    background: var(--hb-bg);
}
body {
    font-family: var(--hb-font);
    font-size: .9375rem;
    line-height: 1.5;
    background: var(--hb-bg);
    color: var(--hb-ink);
    -webkit-font-smoothing: antialiased;
}
:root[data-carattere="inter"] body {
    font-feature-settings: "tnum" 1;
}
a {
    color: var(--hb-accent);
}
a:hover {
    color: var(--hb-accent-hover);
}
:focus-visible {
    outline: 2px solid var(--hb-accent);
    outline-offset: 2px;
}

/* ---------- Struttura: barra laterale, intestazione, contenuto ---------- */
.hb-app {
    display: flex;
    min-height: 100vh;
}

.hb-sidebar,
#hbMobileNav.offcanvas {
    /* Bootstrap dà il suo sfondo all'offcanvas */
    background: var(--hb-side) !important;
    color: var(--hb-side-ink);
    font-size: .875rem;
    line-height: 1.4;
}

#sidebar.hb-sidebar {
    display: none;
    flex-direction: column;
    width: var(--hb-sidebar-w);
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: none;
}

@media (min-width: 992px) {
    #sidebar.hb-sidebar {
        /* la classe d-none di Bootstrap non c'è, ma display:none sopra va vinto sul computer */
        display: flex !important;
    }
}

.hb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    padding: 20px 16px 16px;
    margin: 0;
    color: var(--hb-side-ink);
    flex-shrink: 0;
}
.hb-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--hb-radius);
    background: var(--hb-side-active-bg);
    flex-shrink: 0;
}
.hb-brand-text {
    flex: 1;
    min-width: 0;
    color: var(--hb-side-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hb-brand-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--hb-side-line);
    border-radius: var(--hb-radius);
    background: transparent;
    color: var(--hb-side-ink);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.hb-brand-close:hover {
    background: var(--hb-side-hover);
}
@media (min-width: 992px) {
    .hb-brand-close { display: inline-flex; }
}

.hb-sidebar-nav {
    flex: 1 1 auto;
    padding: 4px 12px 12px;
    margin: 0;
    list-style: none;
}

.hb-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--hb-tocco);
    padding: 8px 12px;
    margin: 0 0 2px;
    color: var(--hb-side-ink);
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--hb-radius);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.hb-nav-link i {
    font-size: 1.125rem;
    flex-shrink: 0;
}
.hb-nav-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hb-nav-link:hover {
    background: var(--hb-side-hover);
    color: var(--hb-side-ink);
    text-decoration: none;
}
.hb-nav-link.is-active,
.hb-nav-link.active {
    background: var(--hb-side-active-bg);
    color: var(--hb-side-active-ink);
    font-weight: 700;
}

/* Gruppi del menu apribili */
.hb-nav-group {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.hb-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    border: none;
    background: transparent;
    padding: 6px 12px;
    margin: 0;
    text-align: left;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hb-side-muted);
    border-radius: var(--hb-radius);
    cursor: pointer;
}
.hb-nav-group-toggle:hover {
    color: var(--hb-side-ink);
    background: var(--hb-side-hover);
}
.hb-nav-group-chevron {
    font-size: .8125rem;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.hb-nav-group-open .hb-nav-group-chevron {
    transform: rotate(180deg);
}
.hb-nav-group-items {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hb-nav-group-open .hb-nav-group-items {
    display: block;
}

/* Fondo della barra: una sola riga con l'utente, che apre lingua, tema, carattere ed Esci (§5.2) */
.hb-sidebar-footer {
    padding: 8px 12px 12px;
    border-top: 1px solid var(--hb-side-line);
    flex-shrink: 0;
}
.hb-utente > summary {
    list-style: none;
}
.hb-utente > summary::-webkit-details-marker {
    display: none;
}
.hb-utente-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--hb-tocco);
    padding: 6px 8px;
    border-radius: var(--hb-radius);
    color: var(--hb-side-ink);
    cursor: pointer;
}
.hb-utente-riga:hover {
    background: var(--hb-side-hover);
}
.hb-sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hb-side-active-bg);
    color: var(--hb-side-active-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.hb-sidebar-user-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.hb-sidebar-user-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--hb-side-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.hb-sidebar-role {
    display: block;
    font-size: .8125rem;
    color: var(--hb-side-muted);
    line-height: 1.25;
}
.hb-utente-freccia {
    flex-shrink: 0;
    font-size: .8125rem;
    color: var(--hb-side-muted);
    transition: transform .15s ease;
}
.hb-utente[open] .hb-utente-freccia {
    transform: rotate(180deg);
}
.hb-utente-pannello {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 8px 4px;
}
.hb-utente-voce {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.hb-utente-etichetta {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--hb-side-muted);
    line-height: 1.3;
}
.hb-utente-scelte {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.hb-utente-scelta {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--hb-side-line);
    border-radius: var(--hb-radius-sm);
    background: transparent;
    color: var(--hb-side-ink);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.hb-utente-scelta:hover:not(:disabled) {
    background: var(--hb-side-hover);
}
.hb-utente-scelta[aria-pressed="true"] {
    background: var(--hb-side-active-bg);
    border-color: var(--hb-side-active-bg);
    color: var(--hb-side-active-ink);
}
.hb-utente-scelta:disabled {
    cursor: not-allowed;
    border-style: dashed;
    color: var(--hb-side-muted);
}
.hb-utente-nota {
    margin: 0;
    font-size: .8125rem;
    color: var(--hb-side-muted);
    line-height: 1.35;
}
.hb-utente-lingua {
    width: 100%;
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--hb-side-line);
    border-radius: var(--hb-radius-sm);
    background: var(--hb-side-hover);
    color: var(--hb-side-ink);
    font: inherit;
    font-size: .875rem;
}
.hb-utente-lingua option {
    background: var(--hb-surface);
    color: var(--hb-ink);
}
.hb-sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    gap: 8px;
    min-height: 40px;
    padding: 6px 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--hb-side-ink);
    border: 1px solid var(--hb-side-line);
    border-radius: var(--hb-radius-sm);
    background: transparent;
    text-decoration: none;
}
.hb-sidebar-logout:hover {
    background: var(--hb-side-hover);
    color: var(--hb-side-ink);
    text-decoration: none;
}

.hb-sidebar-debug {
    padding: 8px 12px;
    border-top: 1px solid var(--hb-side-line);
    text-align: center;
}

/* Area principale */
.hb-main {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--hb-bg);
}

.hb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 8px 16px;
    margin: 0;
    background: var(--hb-surface);
    border-bottom: 1px solid var(--hb-line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.hb-topbar-brand {
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    color: var(--hb-ink);
    flex: 1;
    min-width: 0;
}
.hb-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hb-tocco);
    height: var(--hb-tocco);
    padding: 0;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    background: var(--hb-surface);
    color: var(--hb-ink);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.hb-topbar-btn:hover {
    background: var(--hb-tint);
    color: var(--hb-ink);
}
.hb-topbar-btn i { font-size: 1.25rem; }

.hb-shell-banners {
    padding: 16px 32px 0;
}
.hb-content {
    padding: 32px 32px 48px;
    min-width: 0;
    flex: 1;
}
@media (max-width: 767.98px) {
    .hb-content { padding: 16px 16px 32px; }
    .hb-shell-banners { padding: 12px 16px 0; }
}

/* Barra in alto dei moduli (Channel Manager, CRM, Housekeeping…) aperti dentro il menu del programma */
.hb-modulo-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    margin-bottom: 24px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
}
.hb-modulo-barra__titolo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--hb-ink);
    text-decoration: none;
}
.hb-modulo-barra__titolo:hover { color: var(--hb-ink); }
.hb-modulo-barra__titolo i { color: var(--hb-accent); }
.hb-modulo-barra__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* Menu del telefono (offcanvas): stesso aspetto della barra laterale */
#hbMobileNav.offcanvas {
    /* Bootstrap fissa la larghezza dell'offcanvas */
    width: min(var(--hb-sidebar-w), 88vw) !important;
    border: none;
    transition: transform .18s ease;
}
#hbMobileNav .offcanvas-header {
    padding: 0;
    /* Bootstrap mette un bordo sotto l'intestazione */
    border-bottom: none !important;
}
#hbMobileNav .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .8;
    margin: 16px 12px 0 0;
}
#hbMobileNav .offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Barra laterale richiudibile sul computer (992px) */
@media (min-width: 992px) {
    /* l'intestazione del telefono non serve sul computer (Bootstrap non la nasconde da sé) */
    #hbNavTopbar { display: none !important; }
    html.hb-sidebar-scroll-pending #sidebar { visibility: hidden; }
    html.hb-sidebar-collapsed #sidebar { display: none !important; }
    html.hb-sidebar-collapsed #hbNavTopbar {
        display: flex !important;
    }
    html.hb-sidebar-collapsed #hbSidebarOpen { display: inline-flex !important; }
}
@media (max-width: 991.98px) {
    #hbSidebarClose { display: none !important; }
}

/* Menu del telefono già aperto alla ricarica della pagina (senza animazione) */
html.hb-mobile-nav-open-pending #hbMobileNav.offcanvas,
html.hb-mobile-nav-open-pending .hb-mobile-nav-backdrop-pending {
    transition: none !important;
}
html.hb-mobile-nav-open-pending #hbMobileNav.offcanvas {
    visibility: visible;
    transform: none;
}
@media (min-width: 992px) {
    html.hb-sidebar-collapsed.hb-mobile-nav-open-pending .hb-mobile-nav-backdrop-pending {
        opacity: 0 !important;
        pointer-events: none;
    }
}
#hbMobileNav.hb-offcanvas-navigating {
    transition: none !important;
}
@media (max-width: 991.98px) {
    .offcanvas-backdrop {
        --bs-backdrop-opacity: .4;
        transition: opacity .18s ease;
        background: var(--hb-side);
    }
    .offcanvas-backdrop.show {
        opacity: .4 !important;
    }
}
@media (min-width: 992px) {
    html.hb-sidebar-collapsed .offcanvas-backdrop {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    html.hb-sidebar-collapsed body.overflow-hidden {
        overflow: auto !important;
        padding-right: 0 !important;
    }
}

/* ---------- Schede (§6.3) ---------- */
.card,
.hb-card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-bg: var(--hb-surface);
    --bs-card-cap-bg: var(--hb-surface);
    --bs-card-border-color: var(--hb-line);
    --bs-card-border-radius: var(--hb-radius);
    --bs-card-inner-border-radius: calc(var(--hb-radius) - 1px);
    --bs-card-color: var(--hb-ink);
    background-color: var(--hb-surface);
    border-radius: var(--hb-radius);
    border: 1px solid var(--hb-line);
    box-shadow: none;
}
@media (max-width: 767.98px) {
    .card,
    .hb-card {
        --bs-card-spacer-y: 1rem;
        --bs-card-spacer-x: 1rem;
        --bs-card-cap-padding-x: 1rem;
    }
}
.card-header {
    background: var(--hb-surface);
    border-bottom: 1px solid var(--hb-line);
    font-size: 1rem;
    font-weight: 700;
    color: var(--hb-ink);
}
.card-footer {
    background: var(--hb-surface);
    border-top: 1px solid var(--hb-line);
}
.card-body {
    background: var(--hb-surface);
}

/* ---------- Tabelle (§6.4) ---------- */
.table {
    --bs-table-bg: var(--hb-surface);
    --bs-table-color: var(--hb-ink);
    --bs-table-border-color: var(--hb-line);
    --bs-table-striped-bg: var(--hb-bg);
    --bs-table-striped-color: var(--hb-ink);
    --bs-table-hover-bg: var(--hb-tint);
    --bs-table-hover-color: var(--hb-ink);
    --bs-table-active-bg: var(--hb-tint);
    --bs-table-active-color: var(--hb-ink);
    border-color: var(--hb-line);
}
.table > :not(caption) > * > * {
    padding: .75rem 1rem;
    border-bottom-color: var(--hb-line);
}
.table-sm > :not(caption) > * > * {
    padding: .5rem .75rem;
}
.table th {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hb-muted);
    white-space: nowrap;
    background: var(--hb-surface);
    border-bottom: 1px solid var(--hb-line);
    vertical-align: middle;
}
.table td {
    vertical-align: middle;
    border-bottom: 1px solid var(--hb-line);
    color: var(--hb-ink);
}
.table > tbody > tr:last-child > * {
    border-bottom: 0;
}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--hb-tint);
    --bs-table-accent-bg: var(--hb-tint);
    color: var(--hb-ink);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--hb-bg);
}
.table-light {
    --bs-table-bg: var(--hb-surface);
    --bs-table-color: var(--hb-ink);
    --bs-table-border-color: var(--hb-line);
}
.table-light th {
    color: var(--hb-muted);
    background: var(--hb-surface);
    border-bottom: 1px solid var(--hb-line);
}
.table-responsive {
    /* la tabella larga scorre dentro la sua scheda, mai la pagina */
    -webkit-overflow-scrolling: touch;
}

.hb-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--hb-surface);
}
.hb-table th,
.hb-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--hb-line);
    vertical-align: middle;
    text-align: left;
}
.hb-table th {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--hb-muted);
    background: var(--hb-surface);
}
.hb-table tr:hover td { background: var(--hb-tint); }

/* ---------- Etichette di stato (§2.3) ---------- */
.stato-in_attesa,
.stato-confermata,
.stato-cancellata,
.stato-no_show,
.stato-completata,
.stato-opzionata {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}
.stato-confermata { background: var(--hb-ok-bg);     color: var(--hb-ok-ink); }
.stato-in_attesa  { background: var(--hb-warn-bg);   color: var(--hb-warn-ink); }
.stato-cancellata { background: var(--hb-err-bg);    color: var(--hb-err-ink); }
.stato-no_show    { background: var(--hb-neutro-bg); color: var(--hb-neutro-ink); }
.stato-completata { background: var(--hb-info-bg);   color: var(--hb-info-ink); }
.stato-opzionata  { background: var(--hb-viola-bg);  color: var(--hb-viola-ink); }

.badge {
    font-weight: 700;
    border-radius: 999px;
    padding: .35em .7em;
}

/* ---------- Campi (§6.2) ---------- */
.form-label,
.col-form-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--hb-ink);
    margin-bottom: 6px;
}
.form-text {
    color: var(--hb-muted);
    font-size: .875rem;
}
.form-control,
.form-select {
    min-height: var(--hb-tocco);
    border: 1px solid var(--hb-field-line);
    border-radius: var(--hb-radius);
    background-color: var(--hb-field);
    color: var(--hb-ink);
    font-size: .9375rem;
    box-shadow: none;
}
.form-control-sm,
.form-select-sm {
    min-height: 36px;
    font-size: .875rem;
    border-radius: var(--hb-radius-sm);
}
textarea.form-control {
    min-height: 88px;
}
.form-control::placeholder {
    color: var(--hb-muted);
    opacity: 1;
}
.form-control:hover,
.form-select:hover {
    border-color: var(--hb-muted);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--hb-accent);
    outline: 2px solid var(--hb-accent);
    outline-offset: 1px;
    box-shadow: none;
    background-color: var(--hb-field);
    color: var(--hb-ink);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--hb-field-off);
    border-color: var(--hb-line);
    color: var(--hb-muted);
    opacity: 1;
}
.form-control-plaintext {
    color: var(--hb-ink);
}
.input-group-text {
    background: var(--hb-bg);
    border-color: var(--hb-field-line);
    color: var(--hb-ink);
}
.input-group .form-control,
.input-group .form-select,
.input-group .btn {
    border-color: var(--hb-field-line);
}
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--hb-field-line);
    background-color: var(--hb-field);
}
.form-check-input[type="checkbox"] {
    border-radius: 4px;
}
.form-check-input:checked {
    background-color: var(--hb-accent);
    border-color: var(--hb-accent);
}
.form-check-input:focus {
    border-color: var(--hb-accent);
    box-shadow: 0 0 0 2px var(--hb-tint);
}
.form-switch .form-check-input {
    width: 2.25rem;
    border-radius: 999px;
}
.form-check-label {
    color: var(--hb-ink);
}

/* Sul telefono: campi a 16px (il telefono non ingrandisce la pagina quando li tocchi) e controlli piccoli comodi col dito (§10) */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 1rem;
        min-height: var(--hb-tocco);
    }
}

/* ---------- Pulsanti (§6.1) ---------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--hb-radius);
    --bs-btn-padding-x: 1.125rem;
    min-height: var(--hb-tocco);
    border-radius: var(--hb-radius);
    /* Bootstrap aggiunge un'ombra al focus delle varianti: la guida vuole solo il contorno */
    box-shadow: none !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-x: .75rem;
    --bs-btn-border-radius: var(--hb-radius-sm);
    min-height: 36px;
    font-size: .875rem;
    border-radius: var(--hb-radius-sm);
}
.btn-lg {
    min-height: 52px;
}
@media (max-width: 767.98px) {
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 40px;
    }
}
.btn:focus-visible {
    outline: 2px solid var(--hb-accent);
    outline-offset: 2px;
}
.btn-close {
    min-height: 0;
}

/* Principale */
.btn-primary {
    --bs-btn-bg: var(--hb-accent);
    --bs-btn-border-color: var(--hb-accent);
    --bs-btn-color: var(--hb-accent-ink);
    --bs-btn-hover-bg: var(--hb-accent-hover);
    --bs-btn-hover-border-color: var(--hb-accent-hover);
    --bs-btn-hover-color: var(--hb-accent-ink);
    --bs-btn-active-bg: var(--hb-accent-hover);
    --bs-btn-active-border-color: var(--hb-accent-hover);
    --bs-btn-active-color: var(--hb-accent-ink);
    --bs-btn-disabled-bg: var(--hb-accent);
    --bs-btn-disabled-border-color: var(--hb-accent);
    --bs-btn-disabled-color: var(--hb-accent-ink);
}

/* Normale: sfondo della scheda, bordo sottile, testo scuro */
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-outline-light,
.btn-outline-dark {
    --bs-btn-bg: var(--hb-surface);
    --bs-btn-border-color: var(--hb-line);
    --bs-btn-color: var(--hb-ink);
    --bs-btn-hover-bg: var(--hb-surface);
    --bs-btn-hover-border-color: var(--hb-muted);
    --bs-btn-hover-color: var(--hb-ink);
    --bs-btn-active-bg: var(--hb-tint);
    --bs-btn-active-border-color: var(--hb-accent);
    --bs-btn-active-color: var(--hb-ink);
    --bs-btn-disabled-bg: var(--hb-surface);
    --bs-btn-disabled-border-color: var(--hb-line);
    --bs-btn-disabled-color: var(--hb-muted);
}
.btn-outline-primary {
    --bs-btn-bg: var(--hb-surface);
    --bs-btn-border-color: var(--hb-line);
    --bs-btn-color: var(--hb-accent);
    --bs-btn-hover-bg: var(--hb-tint);
    --bs-btn-hover-border-color: var(--hb-accent);
    --bs-btn-hover-color: var(--hb-accent-hover);
    --bs-btn-active-bg: var(--hb-tint);
    --bs-btn-active-border-color: var(--hb-accent);
    --bs-btn-active-color: var(--hb-accent-hover);
    --bs-btn-disabled-bg: var(--hb-surface);
    --bs-btn-disabled-border-color: var(--hb-line);
    --bs-btn-disabled-color: var(--hb-muted);
}
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary {
    background: var(--hb-tint);
    border-color: var(--hb-accent);
    color: var(--hb-accent);
}

/* Colori di stato: pieni (testo con il colore della scheda, leggibile nei due temi) */
.btn-danger {
    --bs-btn-bg: var(--hb-err-ink);
    --bs-btn-border-color: var(--hb-err-ink);
    --bs-btn-color: var(--hb-surface);
    --bs-btn-hover-bg: var(--hb-err-ink);
    --bs-btn-hover-border-color: var(--hb-err-ink);
    --bs-btn-hover-color: var(--hb-surface);
    --bs-btn-active-bg: var(--hb-err-ink);
    --bs-btn-active-border-color: var(--hb-err-ink);
    --bs-btn-active-color: var(--hb-surface);
    --bs-btn-disabled-bg: var(--hb-err-ink);
    --bs-btn-disabled-border-color: var(--hb-err-ink);
    --bs-btn-disabled-color: var(--hb-surface);
}
.btn-success {
    --bs-btn-bg: var(--hb-ok-ink);
    --bs-btn-border-color: var(--hb-ok-ink);
    --bs-btn-color: var(--hb-surface);
    --bs-btn-hover-bg: var(--hb-ok-ink);
    --bs-btn-hover-border-color: var(--hb-ok-ink);
    --bs-btn-hover-color: var(--hb-surface);
    --bs-btn-active-bg: var(--hb-ok-ink);
    --bs-btn-active-border-color: var(--hb-ok-ink);
    --bs-btn-active-color: var(--hb-surface);
    --bs-btn-disabled-bg: var(--hb-ok-ink);
    --bs-btn-disabled-border-color: var(--hb-ok-ink);
    --bs-btn-disabled-color: var(--hb-surface);
}
.btn-warning {
    --bs-btn-bg: var(--hb-warn-ink);
    --bs-btn-border-color: var(--hb-warn-ink);
    --bs-btn-color: var(--hb-surface);
    --bs-btn-hover-bg: var(--hb-warn-ink);
    --bs-btn-hover-border-color: var(--hb-warn-ink);
    --bs-btn-hover-color: var(--hb-surface);
    --bs-btn-active-bg: var(--hb-warn-ink);
    --bs-btn-active-border-color: var(--hb-warn-ink);
    --bs-btn-active-color: var(--hb-surface);
}
.btn-info {
    --bs-btn-bg: var(--hb-info-ink);
    --bs-btn-border-color: var(--hb-info-ink);
    --bs-btn-color: var(--hb-surface);
    --bs-btn-hover-bg: var(--hb-info-ink);
    --bs-btn-hover-border-color: var(--hb-info-ink);
    --bs-btn-hover-color: var(--hb-surface);
    --bs-btn-active-bg: var(--hb-info-ink);
    --bs-btn-active-border-color: var(--hb-info-ink);
    --bs-btn-active-color: var(--hb-surface);
}
.btn-dark {
    --bs-btn-bg: var(--hb-ink);
    --bs-btn-border-color: var(--hb-ink);
    --bs-btn-color: var(--hb-surface);
    --bs-btn-hover-bg: var(--hb-ink);
    --bs-btn-hover-border-color: var(--hb-ink);
    --bs-btn-hover-color: var(--hb-surface);
}
.btn:hover:not(:disabled).btn-danger,
.btn:hover:not(:disabled).btn-success,
.btn:hover:not(:disabled).btn-warning,
.btn:hover:not(:disabled).btn-info,
.btn:hover:not(:disabled).btn-dark {
    filter: brightness(.92);
}

/* Pericolo e colori di stato con il bordo: sfondo della scheda, testo e bordo nel colore dello stato */
.btn-outline-danger {
    --bs-btn-bg: var(--hb-surface);
    --bs-btn-border-color: var(--hb-err-ink);
    --bs-btn-color: var(--hb-err-ink);
    --bs-btn-hover-bg: var(--hb-err-bg);
    --bs-btn-hover-border-color: var(--hb-err-ink);
    --bs-btn-hover-color: var(--hb-err-ink);
    --bs-btn-active-bg: var(--hb-err-bg);
    --bs-btn-active-border-color: var(--hb-err-ink);
    --bs-btn-active-color: var(--hb-err-ink);
    --bs-btn-disabled-bg: var(--hb-surface);
    --bs-btn-disabled-border-color: var(--hb-line);
    --bs-btn-disabled-color: var(--hb-muted);
}
.btn-outline-success {
    --bs-btn-bg: var(--hb-surface);
    --bs-btn-border-color: var(--hb-ok-ink);
    --bs-btn-color: var(--hb-ok-ink);
    --bs-btn-hover-bg: var(--hb-ok-bg);
    --bs-btn-hover-border-color: var(--hb-ok-ink);
    --bs-btn-hover-color: var(--hb-ok-ink);
    --bs-btn-active-bg: var(--hb-ok-bg);
    --bs-btn-active-border-color: var(--hb-ok-ink);
    --bs-btn-active-color: var(--hb-ok-ink);
    --bs-btn-disabled-bg: var(--hb-surface);
    --bs-btn-disabled-border-color: var(--hb-line);
    --bs-btn-disabled-color: var(--hb-muted);
}
.btn-outline-warning {
    --bs-btn-bg: var(--hb-surface);
    --bs-btn-border-color: var(--hb-warn-ink);
    --bs-btn-color: var(--hb-warn-ink);
    --bs-btn-hover-bg: var(--hb-warn-bg);
    --bs-btn-hover-border-color: var(--hb-warn-ink);
    --bs-btn-hover-color: var(--hb-warn-ink);
    --bs-btn-active-bg: var(--hb-warn-bg);
    --bs-btn-active-border-color: var(--hb-warn-ink);
    --bs-btn-active-color: var(--hb-warn-ink);
}
.btn-outline-info {
    --bs-btn-bg: var(--hb-surface);
    --bs-btn-border-color: var(--hb-info-ink);
    --bs-btn-color: var(--hb-info-ink);
    --bs-btn-hover-bg: var(--hb-info-bg);
    --bs-btn-hover-border-color: var(--hb-info-ink);
    --bs-btn-hover-color: var(--hb-info-ink);
    --bs-btn-active-bg: var(--hb-info-bg);
    --bs-btn-active-border-color: var(--hb-info-ink);
    --bs-btn-active-color: var(--hb-info-ink);
}

.btn-link {
    --bs-btn-color: var(--hb-accent);
    --bs-btn-hover-color: var(--hb-accent-hover);
    --bs-btn-active-color: var(--hb-accent-hover);
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: none;
}
.btn-link:hover { text-decoration: underline; }
/* Link a forma di pulsante dentro il testo (p-0): niente altezza minima; text-start allinea davvero a sinistra */
.btn-link.p-0 {
    min-height: 0;
}
.btn.text-start {
    justify-content: flex-start;
}

/* Classi proprie per le pagine ritoccate (tappa 4) */
.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--hb-tocco);
    padding: 0 18px;
    border-radius: var(--hb-radius);
    border: 1px solid var(--hb-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background: var(--hb-accent);
    color: var(--hb-accent-ink);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}
.hb-btn:hover { background: var(--hb-accent-hover); border-color: var(--hb-accent-hover); color: var(--hb-accent-ink); text-decoration: none; }
.hb-btn-secondary { background: var(--hb-surface); color: var(--hb-ink); border-color: var(--hb-line); }
.hb-btn-secondary:hover { background: var(--hb-surface); border-color: var(--hb-muted); color: var(--hb-ink); }
.hb-btn-danger { background: var(--hb-surface); color: var(--hb-err-ink); border-color: var(--hb-err-ink); }
.hb-btn-danger:hover { background: var(--hb-err-bg); border-color: var(--hb-err-ink); color: var(--hb-err-ink); }
.hb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Schede di navigazione (tab) ---------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--hb-line);
    --bs-nav-tabs-border-radius: var(--hb-radius);
    --bs-nav-tabs-link-hover-border-color: var(--hb-line);
    --bs-nav-tabs-link-active-color: var(--hb-accent-ink);
    --bs-nav-tabs-link-active-bg: var(--hb-accent);
    --bs-nav-tabs-link-active-border-color: var(--hb-accent);
    border-bottom-color: var(--hb-line);
}
.nav-tabs .nav-link {
    color: var(--hb-ink);
    font-weight: 600;
}
.nav-tabs .nav-link:hover {
    color: var(--hb-ink);
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--hb-accent-ink);
    background-color: var(--hb-accent);
    border-color: var(--hb-accent);
}
.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-color: var(--hb-accent);
    --bs-nav-pills-link-active-bg: var(--hb-tint);
}
.nav-pills .nav-link {
    color: var(--hb-ink);
    font-weight: 600;
}
.nav-pills .nav-link.active {
    box-shadow: inset 0 0 0 1px var(--hb-accent);
}

/* ---------- Menu a tendina e finestre a comparsa (§6.5) ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--hb-surface);
    --bs-dropdown-color: var(--hb-ink);
    --bs-dropdown-border-color: var(--hb-line);
    --bs-dropdown-border-radius: var(--hb-radius);
    --bs-dropdown-link-color: var(--hb-ink);
    --bs-dropdown-link-hover-color: var(--hb-ink);
    --bs-dropdown-link-hover-bg: var(--hb-tint);
    --bs-dropdown-link-active-color: var(--hb-accent);
    --bs-dropdown-link-active-bg: var(--hb-tint);
    --bs-dropdown-header-color: var(--hb-muted);
    --bs-dropdown-divider-bg: var(--hb-line);
    --bs-dropdown-item-padding-y: .5rem;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-ombra);
    padding: 6px;
}
.dropdown-item {
    border-radius: var(--hb-radius-sm);
}
.modal {
    --bs-modal-bg: var(--hb-surface);
    --bs-modal-color: var(--hb-ink);
    --bs-modal-border-color: var(--hb-line);
    --bs-modal-border-radius: var(--hb-radius);
    --bs-modal-inner-border-radius: calc(var(--hb-radius) - 1px);
    --bs-modal-header-border-color: var(--hb-line);
    --bs-modal-footer-border-color: var(--hb-line);
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding: 1rem 1.5rem;
}
.modal-content {
    border-radius: var(--hb-radius);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-ombra);
}
.modal-title {
    font-size: 1.125rem;
    font-weight: 800;
}
/* I popup grandi scalano con la finestra invece di restare a 500px sotto i breakpoint di Bootstrap */
.modal-lg { --bs-modal-width: min(92vw, 800px); }
.modal-xl { --bs-modal-width: min(94vw, 1140px); }
/* Sul telefono a tutta larghezza, pulsanti in basso sempre visibili (§10) */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
    }
    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 1rem);
    }
    .modal-footer {
        flex-wrap: wrap;
    }
    .modal-footer > .btn {
        flex: 1 1 auto;
    }
}

/* ---------- Avvisi (§6.6) ---------- */
.alert {
    border: 0;
    border-radius: var(--hb-radius);
    padding: 12px 16px;
}
.alert-success { --bs-alert-bg: var(--hb-ok-bg);     --bs-alert-color: var(--hb-ok-ink);     --bs-alert-link-color: var(--hb-ok-ink); }
.alert-warning { --bs-alert-bg: var(--hb-warn-bg);   --bs-alert-color: var(--hb-warn-ink);   --bs-alert-link-color: var(--hb-warn-ink); }
.alert-danger  { --bs-alert-bg: var(--hb-err-bg);    --bs-alert-color: var(--hb-err-ink);    --bs-alert-link-color: var(--hb-err-ink); }
.alert-info,
.alert-primary { --bs-alert-bg: var(--hb-info-bg);   --bs-alert-color: var(--hb-info-ink);   --bs-alert-link-color: var(--hb-info-ink); }
.alert-secondary,
.alert-light   { --bs-alert-bg: var(--hb-neutro-bg); --bs-alert-color: var(--hb-neutro-ink); --bs-alert-link-color: var(--hb-neutro-ink); }

/* ---------- Altro di Bootstrap ---------- */
.list-group {
    --bs-list-group-bg: var(--hb-surface);
    --bs-list-group-color: var(--hb-ink);
    --bs-list-group-border-color: var(--hb-line);
    --bs-list-group-border-radius: var(--hb-radius);
    --bs-list-group-action-hover-bg: var(--hb-tint);
    --bs-list-group-action-hover-color: var(--hb-ink);
    --bs-list-group-active-bg: var(--hb-accent);
    --bs-list-group-active-border-color: var(--hb-accent);
    --bs-list-group-active-color: var(--hb-accent-ink);
}
.pagination {
    --bs-pagination-bg: var(--hb-surface);
    --bs-pagination-color: var(--hb-accent);
    --bs-pagination-border-color: var(--hb-line);
    --bs-pagination-hover-bg: var(--hb-tint);
    --bs-pagination-hover-color: var(--hb-accent-hover);
    --bs-pagination-hover-border-color: var(--hb-line);
    --bs-pagination-active-bg: var(--hb-accent);
    --bs-pagination-active-border-color: var(--hb-accent);
    --bs-pagination-active-color: var(--hb-accent-ink);
    --bs-pagination-disabled-bg: var(--hb-surface);
    --bs-pagination-disabled-color: var(--hb-muted);
    --bs-pagination-disabled-border-color: var(--hb-line);
}
.accordion {
    --bs-accordion-bg: var(--hb-surface);
    --bs-accordion-color: var(--hb-ink);
    --bs-accordion-border-color: var(--hb-line);
    --bs-accordion-border-radius: var(--hb-radius);
    --bs-accordion-btn-color: var(--hb-ink);
    --bs-accordion-btn-bg: var(--hb-surface);
    --bs-accordion-active-color: var(--hb-accent);
    --bs-accordion-active-bg: var(--hb-tint);
    --bs-accordion-btn-focus-box-shadow: none;
}
.progress {
    --bs-progress-bg: var(--hb-bg);
    --bs-progress-border-radius: 999px;
    --bs-progress-bar-bg: var(--hb-accent);
}
.toast {
    --bs-toast-border-radius: var(--hb-radius);
}
hr {
    border-color: var(--hb-line);
    opacity: 1;
}
code {
    color: var(--hb-err-ink);
}

/* ---------- Pagine di accesso (login, codice 2FA, recupero password) ---------- */
body.hb-accesso {
    background: var(--hb-bg);
}
.login-card {
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    box-shadow: none;
}

/* ---------- Pannello dei risultati dei campi con ricerca (§6.2) ----------
   Nascosto solo da :empty o dallo stile nel tag: mai display:none in questa classe (romperebbe l'apertura). */
.hb-picker-risultati {
    z-index: 1060;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-ombra);
}
.hb-picker-risultati:empty {
    display: none;
}

/* ---------- Barra di scorrimento sottile ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hb-field-line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hb-muted); }

/* ==========================================================================
   Tappa 3 (stile-admin.md §9): classi al posto degli stili scritti nelle pagine
   ========================================================================== */

/* ---------- Testi ---------- */
/* Etichetta sopra un gruppo di dati (prima: letter-spacing:.06em;font-size:.68rem) */
.hb-etichetta {
    font-size: .8125rem;
    letter-spacing: .06em;
}
/* Testo piccolo: mai sotto 13px (prima .55rem–.8rem nelle pagine) */
.hb-testo-piccolo {
    font-size: .8125rem;
}
.hb-testo-medio {
    font-size: .875rem;
}
.hb-titolo-stretto {
    letter-spacing: -.02em;
}
.hb-titolo-accesso {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.hb-lh-stretto {
    line-height: 1.3;
}
.hb-testo-ok    { color: var(--hb-ok-ink); }
.hb-testo-warn  { color: var(--hb-warn-ink); }
.hb-testo-err   { color: var(--hb-err-ink); }
.hb-testo-info  { color: var(--hb-info-ink); }
.hb-testo-viola { color: var(--hb-viola-ink); }
.hb-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Riquadri e sfondi di stato ---------- */
.hb-riquadro {
    border: 1px solid transparent;
    border-radius: var(--hb-radius);
}
.hb-riquadro-ok     { background: var(--hb-ok-bg);     color: var(--hb-ok-ink);     border-color: var(--hb-ok-ink); }
.hb-riquadro-warn   { background: var(--hb-warn-bg);   color: var(--hb-warn-ink);   border-color: var(--hb-warn-ink); }
.hb-riquadro-err    { background: var(--hb-err-bg);    color: var(--hb-err-ink);    border-color: var(--hb-err-ink); }
.hb-riquadro-info   { background: var(--hb-info-bg);   color: var(--hb-info-ink);   border-color: var(--hb-info-ink); }
.hb-riquadro-neutro { background: var(--hb-neutro-bg); color: var(--hb-neutro-ink); border-color: var(--hb-line); }
.hb-sfondo-ok    { background: var(--hb-ok-bg); }
.hb-sfondo-warn  { background: var(--hb-warn-bg); }
.hb-sfondo-err   { background: var(--hb-err-bg); }
.hb-sfondo-info  { background: var(--hb-info-bg); }
.hb-sfondo-tenue { background: var(--hb-bg); }
.hb-bordo-warn { border: 1px solid var(--hb-warn-ink); }
.hb-bordo-err  { border: 1px solid var(--hb-err-ink); }
.hb-bordo-b-warn { border-bottom: 1px solid var(--hb-warn-ink); }

/* Sottotitolo che divide un modulo in blocchi (es. «Prezzo e pagamento» in Modifica soggiorno) */
.hb-sottotitolo-modulo {
    margin: .25rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--hb-line);
    font-weight: 600;
    color: var(--bs-success);
}

/* Riga del riepilogo importi che si mostra solo se serve (Bootstrap d-flex vincerebbe su [hidden]) */
.hb-fin-riga[hidden] { display: none !important; }

/* Etichette piccole colorate (prima colori e misure nel tag) */
.hb-etichetta-ok,
.hb-etichetta-warn,
.hb-etichetta-err,
.hb-etichetta-neutro {
    font-size: .8125rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.hb-etichetta-ok     { background: var(--hb-ok-bg);     color: var(--hb-ok-ink); }
.hb-etichetta-warn   { background: var(--hb-warn-bg);   color: var(--hb-warn-ink);   border-color: var(--hb-warn-ink); }
.hb-etichetta-err    { background: var(--hb-err-bg);    color: var(--hb-err-ink); }
.hb-etichetta-neutro { background: var(--hb-neutro-bg); color: var(--hb-neutro-ink); border-color: var(--hb-line); }

/* Pulsante pieno nel colore «attenzione» */
.hb-pieno-warn {
    --bs-btn-bg: var(--hb-warn-ink);
    --bs-btn-border-color: var(--hb-warn-ink);
    --bs-btn-color: var(--hb-surface);
    --bs-btn-hover-bg: var(--hb-warn-ink);
    --bs-btn-hover-border-color: var(--hb-warn-ink);
    --bs-btn-hover-color: var(--hb-surface);
    --bs-btn-active-bg: var(--hb-warn-ink);
    --bs-btn-active-color: var(--hb-surface);
}

/* Bordo colorato a sinistra di una scheda (vince sul bordo di .card) */
.hb-bordo-sx { border-left-width: 4px !important; border-left-style: solid !important; }
.hb-bordo-sx-ok    { border-left-color: var(--hb-ok-ink) !important; }
.hb-bordo-sx-warn  { border-left-color: var(--hb-warn-ink) !important; }
.hb-bordo-sx-err   { border-left-color: var(--hb-err-ink) !important; }
.hb-bordo-sx-info  { border-left-color: var(--hb-accent) !important; }
.hb-bordo-sx-viola { border-left-color: var(--hb-viola-ink) !important; }

/* ---------- Controlli ---------- */
/* Interruttore più grande (prima width:2.5rem;height:1.4rem) */
.form-check-input.hb-interruttore {
    width: 2.5rem;
    height: 1.4rem;
}
/* Pulsanti piccolissimi nelle righe delle tabelle: stessa altezza dei piccoli (36/40 px) */
.btn-xs {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .15rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: var(--hb-radius-sm);
    min-height: 36px;
}
@media (max-width: 767.98px) {
    .btn-xs { min-height: 40px; }
}
.hb-cliccabile { cursor: pointer; }

/* ---------- Misure ---------- */
.hb-z-avvisi { z-index: 1090; }
.hb-minw-0 { min-width: 0; }
.hb-sticky-alto { top: 1rem; }
.hb-w-32  { width: 32px; }
.hb-w-64  { width: 64px; }
.hb-w-70  { width: 70px; }
.hb-w-120 { width: 120px; }
.hb-w-170 { width: 170px; }
.hb-w-180 { width: 180px; }
.hb-w-4r  { width: 4rem; }
.hb-w-45r { width: 4.5rem; max-width: 4.5rem; }
.hb-mw-100 { max-width: 100px; }
.hb-mw-120 { max-width: 120px; }
.hb-mw-140 { max-width: 140px; }
.hb-mw-150 { max-width: 150px; }
.hb-mw-160 { max-width: 160px; }
.hb-mw-200 { max-width: 200px; }
.hb-mw-230 { max-width: 230px; }
.hb-mw-250 { max-width: 250px; }
.hb-mw-260 { max-width: 260px; }
.hb-mw-420 { max-width: 420px; }
.hb-mw-520 { max-width: 520px; }
.hb-mw-560 { max-width: 560px; }
/* Impostazioni → Prenotazioni dirette: opzioni di «Solo catalogo» rientrate sotto il loro interruttore (1.8.57). */
.imps-catalogo-opzioni { display: flex; flex-direction: column; gap: .25rem; padding-left: 2.5rem; }
.hb-mw-640 { max-width: 640px; }
.hb-modal-larga { max-width: min(1100px, 95vw); }

/* ---------- Classi di Bootstrap che restano chiare anche col tema scuro: seguono le variabili ---------- */
/* !important come le utility di Bootstrap che sostituiscono */
.bg-white { background-color: var(--hb-surface) !important; }
.bg-light { background-color: var(--hb-bg) !important; }
.bg-body-tertiary,
.bg-body-secondary { background-color: var(--hb-bg) !important; }
.text-dark,
.text-body { color: var(--hb-ink) !important; }
.text-black-50 { color: var(--hb-muted) !important; }
.text-success { color: var(--hb-ok-ink) !important; }
.text-warning { color: var(--hb-warn-ink) !important; }
.text-danger  { color: var(--hb-err-ink) !important; }
.text-info    { color: var(--hb-info-ink) !important; }
.text-primary { color: var(--hb-accent) !important; }

/* ---------- Classi per casi singoli (tappa 3) ---------- */
.hb-w-2r   { width: 2rem; }
.hb-w-3r   { width: 3rem; }
.hb-w-65r  { width: 6.5rem; }
.hb-w-95r  { width: 9.5rem; }
.hb-w-220  { width: 220px; max-width: 220px; }
.hb-w-35p  { width: 35%; }
.hb-w-min  { width: 1%; }
.hb-mw-6r  { max-width: 6rem; }
.hb-minw-180 { min-width: 180px; }
.hb-minw-200 { min-width: 200px; }
.hb-minw-220 { min-width: 220px; }
.hb-testo-18 { font-size: 1.125rem; }
.hb-testo-22 { font-size: 1.35rem; }
.hb-gap-misto { column-gap: 1rem; row-gap: .25rem; }
.hb-quadrato { aspect-ratio: 1; }
.hb-scorre-130 { max-height: 130px; overflow-y: auto; }
.hb-scorre-200 { max-height: 200px; overflow-y: auto; }
.hb-scorre-230 { max-height: 230px; overflow-y: auto; }
.hb-progress-sottile { height: 10px; }

/* Riga che non va a capo e taglia il testo */
.hb-taglia-riga {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Miniature (elenco alloggi) */
.hb-miniatura {
    width: 100px;
    height: 100px;
    border-radius: var(--hb-radius-sm);
    object-fit: cover;
}
.hb-miniatura-vuota {
    background: var(--hb-bg);
    color: var(--hb-muted);
}

/* Barre orizzontali sottili (Analisi): il riempimento ha larghezza calcolata */
.hb-barra {
    height: 8px;
    background: var(--hb-line);
    border-radius: 4px;
    overflow: hidden;
}
.hb-barra-sottile {
    height: 4px;
    margin-top: 3px;
    background: var(--hb-line);
    border-radius: 2px;
}

/* Quadretti di legenda */
.hb-quadretto {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: middle;
}
.hb-quadretto-piccolo { width: 10px; height: 10px; border-radius: 2px; }
.hb-q-ok     { background: var(--hb-ok-ink); }
.hb-q-warn   { background: var(--hb-warn-ink); }
.hb-q-err    { background: var(--hb-err-ink); }
.hb-q-info   { background: var(--hb-accent); }
.hb-q-tint   { background: var(--hb-tint); border: 1px solid var(--hb-accent); }
.hb-q-viola  { background: var(--hb-viola-ink); }
.hb-q-neutro { background: var(--hb-muted); }

/* Etichetta di stato informazione (completato) */
.hb-etichetta-info { background: var(--hb-info-bg); color: var(--hb-info-ink); font-size: .8125rem; font-weight: 600; }

/* Codici: QR, codice segreto, campo del codice a 6 cifre, codici di riserva, testo da copiare */
.hb-qr { width: 180px; height: 180px; }
.hb-qr-bordo { border: 1px solid var(--hb-line); border-radius: var(--hb-radius); }
.hb-codice-segreto {
    letter-spacing: .1em;
    font-size: .95rem;
    background: var(--hb-bg);
    padding: .5rem;
    border-radius: var(--hb-radius-sm);
}
.hb-campo-codice {
    max-width: 200px;
    margin: auto;
    font-size: 1.2rem;
    letter-spacing: .15em;
}
.hb-campo-codice-grande {
    max-width: 180px;
    margin: auto;
    font-size: 1.8rem;
    letter-spacing: .35em;
}
.hb-campo-codice-piccolo {
    max-width: 130px;
    font-size: 1.2rem;
    letter-spacing: .2em;
}
.hb-codici-riserva { font-size: .95rem; line-height: 2; }
.hb-codice-copia {
    font-size: .8125rem;
    word-break: break-all;
    line-height: 1.6;
    user-select: all;
}

/* Registro (log): riquadro scuro come un terminale, uguale nei due temi */
.hb-console {
    max-height: 600px;
    overflow-y: auto;
    background: #0f172a;
    color: #cbd5e1;
    border-radius: var(--hb-radius);
}
.hb-console-error { color: #f87171; }
.hb-console-warn  { color: #fbbf24; }
.hb-console-info  { color: #60a5fa; }
.hb-console-altro { color: #cbd5e1; }

/* Scheda alloggio: zona per caricare le foto, foto, ingrandimento a tutto schermo */
.hb-zona-carica {
    /* vince sul bordo pieno di .border */
    border-style: dashed !important;
    cursor: pointer;
    transition: background .15s;
}
.hb-colore-input { width: 2.75rem; height: 2rem; padding: .2rem; }
.hb-foto-scelta {
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
}
.hb-foto-anteprima {
    height: 150px;
    object-fit: contain;
    background: var(--hb-bg);
    cursor: zoom-in;
}
.hb-foto-cella {
    aspect-ratio: 1 / 1;
    background: var(--hb-bg);
    cursor: grab;
}
.hb-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.hb-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.hb-lightbox-chiudi { top: 1rem; right: 1rem; z-index: 2001; }
.hb-lightbox-prec,
.hb-lightbox-succ { top: 50%; transform: translateY(-50%); z-index: 2001; }
.hb-lightbox-prec { left: 1rem; }
.hb-lightbox-succ { right: 1rem; }

/* Calendario: legenda «bloccato» (righe oblique) e «cambio» (barra rossa sotto il verde) */
.hb-leg-bloccato {
    background-color: var(--hb-err-ink);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0, 0, 0, .25) 3px, rgba(0, 0, 0, .25) 6px);
}
.hb-leg-cambio {
    width: 24px;
    background: linear-gradient(to right, var(--hb-surface) 30%, var(--hb-err-ink) 30%) left bottom / 100% 4px no-repeat, var(--hb-ok-ink);
}

/* Barre dei grafici di Analisi (larghezza calcolata nel tag, colore qui) */
.hb-barra-confronto { height: 10px; border-radius: 2px; }
.hb-barra-riempi { height: 100%; border-radius: inherit; }
.hb-barra-piena  { background: var(--hb-accent); }
.hb-barra-media  { background: color-mix(in srgb, var(--hb-accent) 60%, var(--hb-surface)); }
.hb-barra-chiara { background: color-mix(in srgb, var(--hb-accent) 30%, var(--hb-surface)); }

/* Sul telefono le intestazioni delle schede con titolo + dati a destra vanno a capo invece di uscire dalla scheda (§10) */
@media (max-width: 767.98px) {
    .card-header.d-flex,
    .card-header .d-flex {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
}

/* Computer piccolo / tablet in orizzontale (barra laterale aperta): un po' meno margine, più spazio alle tabelle */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hb-content { padding: 24px 20px 40px; }
    .hb-shell-banners { padding: 16px 20px 0; }
}

/* ==========================================================================
   Tappa 4 (stile-admin.md §5): struttura uguale delle pagine elenco
   ========================================================================== */

/* Testata (§5.1): titolo e riga di spiegazione a sinistra, un solo pulsante principale a destra */
.hb-testata {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.hb-testata h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hb-ink);
}
.hb-testata-sotto {
    margin: 4px 0 0;
    color: var(--hb-muted);
}
.hb-testata-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 575.98px) {
    .hb-testata { align-items: stretch; }
    .hb-testata > div:first-child { flex: 1 1 100%; }
    .hb-testata-azioni,
    .hb-testata-azioni > .btn { flex: 1 1 auto; }
}

/* Fondo dell'elenco: conteggio a sinistra, «Mostra altri» a destra (§5.3) */
.hb-elenco-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--hb-line);
    color: var(--hb-muted);
    font-size: .875rem;
}

/* «Seleziona tutti» sopra le schede del telefono (sul computer è in testa alla colonna) */
.hb-seleziona-tutti {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--hb-tocco);
    margin: 0;
    padding: 4px 16px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--hb-ink);
    cursor: pointer;
}
.hb-seleziona-tutti .form-check-input { margin: 0; }

/* Tabella che sul telefono diventa un elenco di schede (§6.4): ogni cella con data-etichetta */
@media (max-width: 767.98px) {
    .hb-tabella-schede thead { display: none; }
    .hb-tabella-schede,
    .hb-tabella-schede tbody { display: block; width: 100%; }
    .hb-tabella-schede tbody tr {
        display: block;
        position: relative;
        padding: 12px 16px;
        border-bottom: 1px solid var(--hb-line);
    }
    .hb-tabella-schede tbody tr:last-child { border-bottom: 0; }
    .hb-tabella-schede.table > :not(caption) > * > *,
    .hb-tabella-schede tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        background: transparent;
        text-align: right;
    }
    .hb-tabella-schede tbody td[data-etichetta]::before {
        content: attr(data-etichetta);
        color: var(--hb-muted);
        font-size: .875rem;
        text-align: left;
    }
    /* casella di selezione in alto a destra, nome in grassetto in alto */
    .hb-tabella-schede tbody td.com-col-chk {
        position: absolute;
        top: 12px;
        right: 16px;
        width: auto;
        min-width: 0;
        padding: 0;
    }
    .hb-tabella-schede tbody td.hb-cella-nome {
        display: block;
        padding: 0 36px 6px 0;
        text-align: left;
        font-size: 1rem;
    }
    .hb-tabella-schede tbody td.hb-cella-vuota { display: none; }
}

/* Tendina «righe» nel fondo dell'elenco: quante righe mostrare subito e a ogni «Mostra altri».
   Riparte sempre da 25 aprendo la pagina: non si ricorda, così nessuno lascia 1000 righe per sbaglio (§5.3). */
.hb-elenco-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-left: auto;
}
.hb-elenco-righe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}
/* Fondo elenco fuori da una scheda (griglia Alloggi): senza bordo e senza margini */
.hb-elenco-piede-libero {
    border-top: 0;
    padding: 0;
    justify-content: flex-end;
}