/* ============================================================
   Tableau — motore nostro (wwwroot/js/tableau). Il DOM è creato dal JS, quindi il CSS è globale
   e scoperto sul root `.tb`. OGNI manopola visiva è una custom property `--tb-*`: le impostazioni
   dell'organizzazione le impostano sul root (vedi TableauDataset.theme), i temi dell'app
   ([data-theme]) forniscono i fallback. Niente colori cablati nel JS.
   ============================================================ */

.tb {
    /* Geometria (impostate dal JS a ogni layout) */
    --tb-day-w: 40px;
    --tb-row-h: 36px;
    --tb-group-h: 24px;
    --tb-side-w: 200px;
    --tb-head-h: 48px;
    --tb-foot-h: 0px;
    --tb-foot-row-h: 20px;
    --tb-month-h: 22px;
    --tb-week-h: 0px;
    --tb-wx-h: 0px;
    --tb-dayh-h: 26px;
    --tb-info-h: 0px;

    /* Palette: fallback ai token dell'app; le impostazioni Tableau le sovrascrivono */
    --tb-bg-top: var(--bg-card);
    --tb-bg-bottom: var(--bg-card);
    --tb-bg: linear-gradient(to bottom, var(--tb-bg-top), var(--tb-bg-bottom));
    --tb-text: var(--text-primary);
    /* Testo secondario, intestazione e colonna camere DERIVATI da testo e base della tavola: con colori
       personalizzati (es. tavola scura su tema chiaro) il testo resta leggibile anche fuori dalla griglia. */
    --tb-text-muted: color-mix(in srgb, var(--tb-text) 62%, transparent);
    --tb-grid: var(--border);
    --tb-grid-strong: var(--border-strong);
    /* Separatore dei cambi mese: più marcato dei giorni (2 px), opaco e derivato da testo e base della tavola,
       così resta visibile anche con colori personalizzati. Le posizioni le elenca il JS (--tb-mlines*). */
    --tb-month-line: color-mix(in srgb, var(--tb-text) 30%, var(--tb-bg-top));
    --tb-mlines: none;
    --tb-mlines-pos: 0 0;
    --tb-mlines-size: auto;
    --tb-head-bg: color-mix(in srgb, var(--tb-bg-top) 93%, var(--tb-text) 7%);
    --tb-side-bg: color-mix(in srgb, var(--tb-bg-top) 97%, var(--tb-text) 3%);
    --tb-sunday: var(--bg-hover);
    --tb-saturday: var(--bg-hover);
    --tb-holiday: var(--warning-soft, #fff3d6);
    --tb-today: var(--accent-soft);
    --tb-today-line: var(--accent);
    --tb-curve: var(--accent);
    --tb-curve-w: 2px;
    --tb-item-bg: var(--accent);
    --tb-item-fg: #fff;
    --tb-item-radius: 4px;
    --tb-item-pad: 2px;
    /* Blocchi camera (manutenzione): nastro segnaletico giallo/nero dell'app (token --maint-tape*, app.css),
       semitrasparente al 30% come la tinta delle barre; spessore strisce da --tb-block-stripe. */
    --tb-block-tape-alpha: 30%;
    --tb-block-tape-yellow: color-mix(in srgb, var(--maint-tape-yellow) var(--tb-block-tape-alpha), transparent);
    --tb-block-tape-black: color-mix(in srgb, var(--maint-tape-black) var(--tb-block-tape-alpha), transparent);
    --tb-block-stripe: 10px;
    --tb-block-tape: repeating-linear-gradient(-45deg,
        var(--tb-block-tape-yellow) 0 var(--tb-block-stripe),
        var(--tb-block-tape-black) var(--tb-block-stripe) calc(2 * var(--tb-block-stripe)));
    /* Fuori servizio (spec §13.1): fascia sottile in basso nella riga, stesso nastro ma pieno (è sottile: al 30%
       sparirebbe), strisce più strette. */
    --tb-block-band-h: 5px;
    --tb-block-band-alpha: 100%;
    --tb-block-band-stripe: 4px;
    --tb-block-band: repeating-linear-gradient(-45deg,
        color-mix(in srgb, var(--maint-tape-yellow) var(--tb-block-band-alpha), transparent) 0 var(--tb-block-band-stripe),
        color-mix(in srgb, var(--maint-tape-black) var(--tb-block-band-alpha), transparent) var(--tb-block-band-stripe) calc(2 * var(--tb-block-band-stripe)));

    position: relative;
    height: 100%;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    contain: strict;
    color: var(--tb-text);
    font: 500 12px/1.2 'Inter', system-ui, sans-serif;
    outline: none;
    background: var(--tb-bg);
}
.tb:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.tb-canvas { position: relative; }

/* ── Intestazione (sticky in alto) ─────────────────────────────────────────── */
.tb-head {
    position: sticky;
    top: 0;
    z-index: 3;
    height: var(--tb-head-h);
    background: linear-gradient(var(--tb-head-bg), var(--tb-head-bg)), var(--bg-card);
    border-bottom: 1px solid var(--tb-grid-strong);
    box-sizing: border-box;
    contain: layout style;
}
.tb-corner {
    position: sticky;
    left: 0;
    z-index: 4;
    width: var(--tb-side-w);
    height: 100%;
    background: linear-gradient(var(--tb-head-bg), var(--tb-head-bg)), var(--bg-card);
    border-right: 1px solid var(--tb-grid-strong);
    box-sizing: border-box;
}
.tb-hcells {
    position: absolute;
    top: 0;
    left: var(--tb-side-w);
    height: 100%;
    width: 0;
}
.tb-hday {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tb-day-w);
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid var(--tb-grid);
    text-align: center;
    overflow: hidden;
    contain: strict;
}
.tb-hmonths {
    position: absolute;
    top: 0;
    left: var(--tb-side-w);
    height: var(--tb-month-h);
    width: 0;
}
.tb-hmonth {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--tb-month-h);
    line-height: var(--tb-month-h);
    padding: 0 6px;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 600;
    color: var(--tb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}
/* Le celle dei giorni partono SOTTO la riga dei mesi: il separatore dei giorni non la attraversa;
   al cambio mese il separatore a tutta altezza lo disegna l'etichetta del mese (.tb-hmonth-start). */
.tb-hday { top: var(--tb-month-h); height: calc(100% - var(--tb-month-h)); }
/* Cambio mese: 2 px marcati allineati alla linea delle righe — bordo destro dell'ultimo giorno del mese
   (tb-mend) + primo pixel del primo giorno (tb-mstart); l'etichetta del mese parte 1 px prima. */
.tb-hmonth.tb-hmonth-start { box-shadow: inset 2px 0 0 var(--tb-month-line); }
.tb-hday.tb-mend { border-right-color: var(--tb-month-line); }
.tb-hday.tb-mstart { box-shadow: inset 1px 0 0 var(--tb-month-line); }
.tb-hweek {
    height: var(--tb-week-h);
    line-height: var(--tb-week-h);
    font-size: 10px;
    color: var(--tb-text-muted);
}
.tb-hdate {
    height: var(--tb-dayh-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}
.tb-hnum { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tb-hsub { font-size: 9px; color: var(--tb-text-muted); margin-top: 2px; text-transform: uppercase; }
.tb-hday.today .tb-hdate { background: var(--tb-today-line); color: var(--on-accent, #fff); }
.tb-hday.today .tb-hsub { color: inherit; opacity: .85; }
.tb-hday.sun .tb-hnum, .tb-hday.hol .tb-hnum { color: var(--danger); }
.tb-hinfo {
    position: relative;
    height: var(--tb-info-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 3px 2px;
    box-sizing: border-box;
}
.tb-hbar {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ok, #16a34a);
    opacity: .75;
}
.tb-hinfo-text { position: relative; font-size: 9px; color: var(--tb-text); z-index: 1; }
/* ── Riga meteo dell'intestazione (opzionale, sopra la data) ────────────────────
   Icona + temperatura massima del giorno (fonte MET Norway); con colonne strette (classe tb-wx-icon
   sul root, da layout.weatherMode) resta solo l'icona e la temperatura vive nel tooltip del giorno.
   Su "oggi" la cella resta neutra come la riga settimane: il blu è solo del blocco data. */
.tb-hwx {
    height: var(--tb-wx-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--tb-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}
.tb-hwx .tb-ico { width: 12px; height: 12px; flex: 0 0 auto; color: var(--tb-text-muted); opacity: 1; }
.tb.tb-wx-icon .tb-hwx-t { display: none; }
/* Icone meteo: Lucide (licenza ISC) — sun, cloud-sun, cloud, cloud-fog, cloud-drizzle, cloud-rain, cloud-snow, cloud-lightning. */
.tb-ico-wx-sun { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }
.tb-ico-wx-cloud-sun { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3Cpath d='M15.947 12.65a4 4 0 0 0-5.925-4.128'/%3E%3Cpath d='M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z'/%3E%3C/svg%3E"); }
.tb-ico-wx-cloud { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); }
.tb-ico-wx-fog { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M16 17H7'/%3E%3Cpath d='M17 21H9'/%3E%3C/svg%3E"); }
.tb-ico-wx-drizzle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M8 19v1'/%3E%3Cpath d='M8 14v1'/%3E%3Cpath d='M16 19v1'/%3E%3Cpath d='M16 14v1'/%3E%3Cpath d='M12 21v1'/%3E%3Cpath d='M12 16v1'/%3E%3C/svg%3E"); }
.tb-ico-wx-rain { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M16 14v6'/%3E%3Cpath d='M8 14v6'/%3E%3Cpath d='M12 16v6'/%3E%3C/svg%3E"); }
.tb-ico-wx-snow { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M8 15h.01' stroke-width='4'/%3E%3Cpath d='M8 19h.01' stroke-width='4'/%3E%3Cpath d='M12 17h.01' stroke-width='4'/%3E%3Cpath d='M12 21h.01' stroke-width='4'/%3E%3Cpath d='M16 15h.01' stroke-width='4'/%3E%3Cpath d='M16 19h.01' stroke-width='4'/%3E%3C/svg%3E"); }
.tb-ico-wx-thunder { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973'/%3E%3Cpath d='m13 12-3 5h4l-3 5'/%3E%3C/svg%3E"); }

/* ── Corpo ──────────────────────────────────────────────────────────────────── */
.tb-body { position: relative; }
.tb-side {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--tb-side-w);
    height: 100%;
    background: linear-gradient(var(--tb-side-bg), var(--tb-side-bg)), var(--bg-card);
    border-right: 1px solid var(--tb-grid-strong);
    box-sizing: border-box;
    contain: layout style;
}
.tb:not(.tb-sticky-side) .tb-side { position: absolute; top: 0; }
/* Colonna camere non fissa: anche gli angoli di intestazione e piede scorrono via con lei. */
.tb:not(.tb-sticky-side) .tb-corner,
.tb:not(.tb-sticky-side) .tb-fcorner { position: absolute; top: 0; left: 0; }
.tb-rlabel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tb-row-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 0 8px;
    border-bottom: 1px solid var(--tb-grid);
    white-space: nowrap;
    overflow: hidden;
    contain: strict;
}
.tb-rname { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tb-rsub { color: var(--tb-text-muted); font-size: 10px; margin: 0 8px 0 auto; }
.tb-ricons { margin-right: 6px; }
/* Colonne Letti e HK: celle a tutta altezza separate dal nome, larghezze da --tb-beds-w / --tb-hk-w. */
.tb-rbeds, .tb-rhk {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--tb-grid);
}
.tb-rbeds { width: var(--tb-beds-w); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tb-text-muted); }
.tb-rhk { width: var(--tb-hk-w); }
/* Stato pulizie: quadratino con angoli arrotondati, colore dello stato e sigla (testo leggibile dal C#). */
.tb-rdot {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 22px;
    height: 20px;
    padding: 0 3px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .15);
    font: 700 9px/18px 'Inter', system-ui, sans-serif;
    letter-spacing: .02em;
    text-align: center;
    color: #fff;
}
/* Intestazioni delle colonne camere nell'angolo in alto a sinistra, allineate alle celle. */
.tb-corner { display: flex; align-items: flex-end; }
.tb-chead {
    box-sizing: border-box;
    padding: 0 0 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-chead-room { flex: 1 1 auto; min-width: 0; padding-left: 8px; }
.tb-chead-beds { flex: 0 0 var(--tb-beds-w); text-align: center; }
.tb-chead-hk { flex: 0 0 var(--tb-hk-w); text-align: center; }
.tb-rlabel.tb-row-group {
    background: linear-gradient(var(--tb-head-bg), var(--tb-head-bg)), var(--bg-card);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tb-text-muted);
    border-bottom: 1px solid var(--tb-grid-strong);
}
.tb-rlabel.tb-row-unassigned { font-style: italic; color: var(--tb-text-muted); }

.tb-cols, .tb-rows, .tb-zones {
    position: absolute;
    top: 0;
    left: var(--tb-side-w);
    height: 100%;
    width: 0;
}
.tb-zones { pointer-events: none; }
.tb-zone { position: absolute; top: 0; left: 0; pointer-events: none; }
/* Zone di colore (giorno, mese, occupazione, stagione, gruppo) velano lo sfondo senza coprirlo: stessa
   opacità dell'anteprima delle impostazioni. I layer operativi (chiuse/restrizioni) hanno il loro tratteggio. */
.tb-zone:not(.closed):not(.restricted) { opacity: .35; }
.tb-zone-col { height: 100%; }
.tb-zone-row { width: var(--tb-grid-w, 0px); }
/* Layer operativi: tratteggio (rosso = date chiuse, ambra = restrizioni canale), dati assenti finché il channel manager non li espone. */
.tb-zone.closed { background: repeating-linear-gradient(135deg, var(--tb-closed, rgba(220, 38, 38, .16)) 0 6px, transparent 6px 12px); }
.tb-zone.restricted { background: repeating-linear-gradient(45deg, var(--tb-restricted, rgba(245, 158, 11, .16)) 0 6px, transparent 6px 12px); }

/* Cella attiva da tastiera (frecce / Invio): anello dentro la riga, come la selezione. */
.tb-focus {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tb-day-w);
    height: 100%;
    box-sizing: border-box;
    border: 2px solid var(--tb-focus, var(--accent, #2563eb));
    border-radius: 3px;
    pointer-events: none;
    z-index: 3;
}
.tb:focus-visible { outline: 2px solid var(--tb-focus, var(--accent, #2563eb)); outline-offset: -2px; }

/* Righe-gruppo: cliccabili, freccetta aperto/chiuso nel colore del piano (o del tipo) — --tb-group-color dal JS,
   testo secondario se il gruppo non ha colore. Triangolo pieno disegnato (clip-path), ruotato quando è chiuso. */
.tb-rlabel.tb-row-group { cursor: pointer; user-select: none; }
.tb-rlabel.tb-row-group .tb-rname::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 9px;
    margin: 0 7px 1px 0;
    vertical-align: middle;
    background: var(--tb-group-color, var(--tb-text-muted));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform .15s ease;
}
.tb-rlabel.tb-row-group.collapsed .tb-rname::before { transform: rotate(-90deg); }
.tb-col {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tb-day-w);
    height: 100%;
    pointer-events: none;
}
.tb-col.sat { background: var(--tb-saturday); }
.tb-col.sun { background: var(--tb-sunday); }
.tb-col.hol { background: var(--tb-holiday); }
.tb-col.today { background: var(--tb-today); }
.tb-col.today::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--tb-today-line);
    opacity: .8;
}

.tb-row {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tb-grid-w, 0px);
    height: var(--tb-row-h);
    box-sizing: border-box;
    border-bottom: 1px solid var(--tb-grid);
    /* Linee verticali di griglia senza nodi-cella: un gradiente ripetuto largo una colonna. Sopra, le linee dei
       cambi mese (strati elencati dal JS in --tb-mlines*, liste parallele): restano sotto le barre, figlie della riga. */
    background-image: var(--tb-mlines), repeating-linear-gradient(to right, transparent 0, transparent calc(var(--tb-day-w) - 1px), var(--tb-grid) calc(var(--tb-day-w) - 1px), var(--tb-grid) var(--tb-day-w));
    background-position: var(--tb-mlines-pos), 0 0;
    background-size: var(--tb-mlines-size), auto;
    background-repeat: no-repeat;
    contain: layout style;
}
/* Riga-gruppo: fondo dell'intestazione, senza griglia dei giorni ma con le linee dei cambi mese (continue). */
.tb-row.tb-row-group {
    background-image: var(--tb-mlines), linear-gradient(var(--tb-head-bg), var(--tb-head-bg));
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--tb-grid-strong);
}
.tb-row.tb-row-unassigned { background-color: color-mix(in srgb, var(--tb-grid) 25%, transparent); }

/* ── Barre ──────────────────────────────────────────────────────────────────── */
.tb-item {
    position: absolute;
    top: var(--tb-item-pad);
    left: 0;
    height: calc(100% - var(--tb-item-pad) * 2);
    box-sizing: border-box;
    border-radius: var(--tb-item-radius);
    /* Tinta semitrasparente del colore della barra (opacità dalle Impostazioni Tableau) con bordo pieno. */
    background: color-mix(in srgb, var(--item-bg, var(--tb-item-bg)) var(--tb-item-fill, 100%), transparent);
    color: var(--item-fg, var(--tb-item-fg));
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    contain: layout style paint;
    box-shadow: inset 0 0 0 1px var(--item-bg, var(--tb-item-bg)), 0 1px 2px rgba(0, 0, 0, .12);
}
.tb-item:hover { filter: brightness(1.08); }
.tb-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb-item-strip { flex: 0 0 4px; height: 100%; }
.tb-item-top { position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.tb-item-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
}
.tb-item-text, .tb-item-text2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-item-text2 { font-size: 10px; opacity: .85; font-weight: 400; }
.tb-compact .tb-item-text2 { display: none; }
.tb-item-icons { flex: 0 0 auto; display: inline-flex; gap: 2px; padding-right: 4px; }
.tb-ico { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.tb-item.option { border: 1px dashed var(--item-fg, rgba(255, 255, 255, .9)); }
.tb-item.overbooked { outline: 2px solid var(--danger); outline-offset: -2px; }
.tb-item.dim { opacity: .25; }

/* ── Curve cambio camera ────────────────────────────────────────────────────── */
.tb-curves {
    position: absolute;
    top: 0;
    left: var(--tb-side-w);
    pointer-events: none;
    overflow: visible;
}
.tb-curves path { fill: none; stroke: var(--tb-curve); stroke-width: var(--tb-curve-w); stroke-linecap: round; }

/* ── Piede (riepiloghi, sticky in basso) ───────────────────────────────────── */
.tb-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    height: var(--tb-foot-h);
    background: linear-gradient(var(--tb-head-bg), var(--tb-head-bg)), var(--bg-card);
    border-top: 1px solid var(--tb-grid-strong);
    box-sizing: border-box;
    contain: layout style;
}
.tb-fcorner {
    position: sticky;
    left: 0;
    z-index: 4;
    width: var(--tb-side-w);
    height: 100%;
    background: linear-gradient(var(--tb-head-bg), var(--tb-head-bg)), var(--bg-card);
    border-right: 1px solid var(--tb-grid-strong);
    box-sizing: border-box;
}
.tb-flabel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tb-foot-row-h);
    line-height: var(--tb-foot-row-h);
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    color: var(--tb-text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.tb-fcells { position: absolute; top: 0; left: var(--tb-side-w); height: 100%; width: 0; }
.tb-fcell {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tb-day-w);
    height: var(--tb-foot-row-h);
    line-height: var(--tb-foot-row-h);
    font-size: 10px;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid var(--tb-grid);
    overflow: hidden;
    contain: strict;
}
.tb-fcell.tb-mend { border-right-color: var(--tb-month-line); }
.tb-fcell.tb-mstart { box-shadow: inset 1px 0 0 var(--tb-month-line); }
.tb-fcell.hi { color: var(--danger); font-weight: 600; }
.tb-fcell.mid { color: var(--warn, #d97706); }

/* ── Classi barra dal dataset ──────────────────────────────────────────────── */
:is(.tb-item, .tb-peek).option { border: 1px dashed var(--item-fg, rgba(255, 255, 255, .9)); }
:is(.tb-item, .tb-peek).option-expired { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.tb-item.cancelled { opacity: .45; text-decoration: line-through; }
.tb-peek.cancelled { text-decoration: line-through; }   /* opaca: la barra ingrandita non lascia trasparire le vicine */
:is(.tb-item, .tb-peek).overbooked { outline: 2px solid var(--danger); outline-offset: -2px; }
:is(.tb-item, .tb-peek).overbooked::after {
    content: '!';
    position: absolute;
    top: 0;
    right: 3px;
    font-size: 10px;
    font-weight: 800;
    color: var(--danger);
    background: #fff;
    border-radius: 0 0 4px 4px;
    padding: 0 3px;
    line-height: 12px;
}
.tb-row.tb-row-unassigned .tb-item { opacity: .85; border: 1px dashed rgba(255, 255, 255, .7); }
.tb-row.deleted { background-color: color-mix(in srgb, var(--tb-grid) 18%, transparent); }
.tb-rlabel.deleted .tb-rname { text-decoration: line-through; color: var(--tb-text-muted); }
/* Camera non vendibile (fermo permanente): attenuata con l'etichetta "Non vendibile", mai il nastro. */
.tb-row.unsellable { background-color: color-mix(in srgb, var(--tb-grid) 18%, transparent); }
.tb-rlabel.unsellable .tb-rname { color: var(--tb-text-muted); font-weight: 500; }
.tb-rlabel.unsellable .tb-rsub { font-style: italic; }

/* ── Blocchi camera: nastro giallo/nero, etichetta su pastiglia nera (spec §6.11) ──
   Sfondo a strisce diagonali semitrasparenti da --tb-block-tape (niente fondo pieno, niente colore
   alias/listino); il testo sta solo sulla pastiglia nera piena a inizio barra (bianco su nero ≥ 17:1).
   Bordo pieno come le barre prenotazione: giallo nei temi scuri (--maint-tape-edge, disegnato sopra),
   nero nel chiaro (lì --maint-tape-edge è trasparente e resta visibile il secondo). */
:is(.tb-item, .tb-peek).tb-block {
    background: var(--tb-block-tape);
    color: var(--maint-tape-ink);
    box-shadow: inset 0 0 0 1px var(--maint-tape-edge),
        inset 0 0 0 1px color-mix(in srgb, var(--maint-tape-black) 60%, transparent),
        0 1px 2px rgba(0, 0, 0, .12);
}
/* Strisce scalate sull'altezza della barra: più sottili nella modalità compatta (stessa classe di .tb). */
.tb-compact { --tb-block-stripe: 6px; }
.tb-block-label, .tb-block-full {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 6px);
    margin-left: 3px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--maint-tape-black);
    color: var(--maint-tape-ink);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-compact .tb-block-label { padding: 0 4px; }
.tb-item .tb-block-full { display: none; }
.tb-compact { --tb-conflict-gap: 3px; }
.tb-peek.tb-block::before { background: var(--maint-tape-yellow); }   /* sottolineatura = durata del blocco */
.tb .tb-peek :is(.tb-block-label, .tb-block-full) { max-width: none; margin: 3px; padding: 2px 8px; overflow: visible; text-overflow: clip; }
/* Fuori servizio: fascia sottile in basso nella riga per il periodo del blocco, SOTTO le prenotazioni (z-index -1 nel
   contesto della riga: le barre restano leggibili sopra), pastiglia piccola con la sigla che sporge sopra la fascia a
   inizio periodo. Non è un ostacolo al trascinamento (layout.js); clic su fascia o pastiglia = apri il blocco. La
   barra ingrandita mostra il titolo completo (.tb-block-full) al posto della sigla. */
.tb-item.tb-block-soft {
    top: auto;
    bottom: 1px;
    height: var(--tb-block-band-h);
    z-index: -1;
    overflow: visible;
    contain: layout style;
    border-radius: 1px;
    background: var(--tb-block-band);
    box-shadow: none;
}
.tb-item.tb-block-soft .tb-block-label {
    position: absolute;
    left: 2px;
    bottom: 0;
    max-width: none;
    margin: 0;
    padding: 0 4px;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: .02em;
}
.tb-compact { --tb-block-band-h: 3px; --tb-block-band-stripe: 3px; }
.tb-compact .tb-item.tb-block-soft .tb-block-label { font-size: 8px; line-height: 10px; padding: 0 3px; }
.tb-peek.tb-block-soft .tb-block-label { display: none; }
/* Prenotazione dentro un blocco (da spostare, segnata come overbooking): sopra il nastro e con fondo opaco
   (tinta della barra sopra la base della tavola, come la barra ingrandita): il testo non finisce sulle strisce.
   Abbassata di qualche pixel: una fascia di nastro resta visibile sopra, anche su un blocco di una notte. */
.tb-item.block-conflict {
    z-index: 1;
    top: calc(var(--tb-item-pad) + var(--tb-conflict-gap, 5px));
    height: calc(100% - var(--tb-item-pad) * 2 - var(--tb-conflict-gap, 5px));
    background:
        linear-gradient(color-mix(in srgb, var(--item-bg, var(--tb-item-bg)) var(--tb-item-fill, 100%), transparent),
                        color-mix(in srgb, var(--item-bg, var(--tb-item-bg)) var(--tb-item-fill, 100%), transparent)),
        var(--tb-bg-top, var(--bg-card));
}
.tb-ricons { display: inline-flex; gap: 3px; }
.tb-ricons .tb-ico { background: var(--tb-text-muted); }
.tb-rdot[role="button"] { cursor: pointer; }
.tb-rdot[role="button"]:hover { transform: scale(1.12); }
.tb-rdot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Icone (maschere SVG inline, colore = currentColor del contenitore) ────── */
.tb-ico {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
    opacity: .95;
}
.tb-item-icons .tb-ico { color: var(--item-fg, #fff); }
.tb-ico-status-pending, .tb-ico-status-optioned, .tb-ico-status-waiting { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1-13h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E"); }
.tb-ico-status-offer { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12l5-5 4 4 4-4 5 5-2 2-3-3-4 4-4-4-3 3z'/%3E%3C/svg%3E"); }
.tb-ico-status-confirmed, .tb-ico-status-guaranteed { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5L6 12l1.5-1.5 3 3 6-6L18 9l-7.5 7.5z'/%3E%3C/svg%3E"); }
.tb-ico-status-noshow, .tb-ico-status-cancelled { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.3 12.9l-1.4 1.4L12 13.4l-2.9 2.9-1.4-1.4 2.9-2.9-2.9-2.9 1.4-1.4 2.9 2.9 2.9-2.9 1.4 1.4-2.9 2.9z'/%3E%3C/svg%3E"); }
.tb-ico-checked-in { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-8v-2h8V6h-8V4zm-1 4l5 4-5 4v-3H2v-2h7V8z'/%3E%3C/svg%3E"); }
.tb-ico-checked-out { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8v-2H6V6h8V4zm2 4l5 4-5 4v-3H9v-2h7V8z'/%3E%3C/svg%3E"); }
.tb-ico-paid { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4a7 7 0 0 0-6.7 5H5v2h1.9a8 8 0 0 0 0 2H5v2h2.3A7 7 0 0 0 14 20c1.6 0 3-.5 4.2-1.4l-1.3-1.6A5 5 0 0 1 9.6 15H14v-2H9.1a6 6 0 0 1 0-2H14V9H9.6a5 5 0 0 1 7.3-2l1.3-1.6A7 7 0 0 0 14 4z'/%3E%3C/svg%3E"); }
.tb-ico-deposit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm10 10a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18.5 4L7 20.5 5.5 19 17 3.5 18.5 4z'/%3E%3C/svg%3E"); }
.tb-ico-balance-due { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v11h-2V3zm0 13h2v3h-2v-3z'/%3E%3C/svg%3E"); }
.tb-ico-ota { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.9 9h-3a15 15 0 0 0-1.3-5.4A8 8 0 0 1 19.9 11zM12 4c.9 1.3 1.6 3.7 1.9 7h-3.8c.3-3.3 1-5.7 1.9-7zM4.1 13h3c.1 1.9.6 3.8 1.3 5.4A8 8 0 0 1 4.1 13zm3-2h-3a8 8 0 0 1 4.3-5.4A15 15 0 0 0 7.1 11zM12 20c-.9-1.3-1.6-3.7-1.9-7h3.8c-.3 3.3-1 5.7-1.9 7zm3.6-1.6c.7-1.6 1.2-3.5 1.3-5.4h3a8 8 0 0 1-4.3 5.4z'/%3E%3C/svg%3E"); }
.tb-ico-vip { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5.1 4.9 1.3 7L12 18l-6.2 3.3 1.3-7L2 9.4l7-.9z'/%3E%3C/svg%3E"); }
.tb-ico-notes { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h12l4 4v14H4V3zm2 2v14h12V8h-3V5H6zm2 5h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E"); }
.tb-ico-online-checkin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 3v13h10V5H7zm4.2 9.6l-2.7-2.7 1.4-1.4 1.3 1.3 3.3-3.3 1.4 1.4-4.7 4.7z'/%3E%3C/svg%3E"); }
.tb-ico-repeat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 0 1 7.4 5H17v2h5V6h-2v2.3A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8zm8 8h-2a8 8 0 0 1-15.4 3H7v-2H2v5h2v-2.3A10 10 0 0 0 22 12h-2z'/%3E%3C/svg%3E"); }
.tb-ico-room-dirty { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2l8 8-5 5-8-8 5-5zM4 20l6-6 2 2-6 6H4v-2z'/%3E%3C/svg%3E"); }
.tb-ico-room-blocked { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-8 10a8 8 0 0 1 12.9-6.3L5.7 16.9A8 8 0 0 1 4 12zm8 8a8 8 0 0 1-4.9-1.7L18.3 7.1A8 8 0 0 1 12 20z'/%3E%3C/svg%3E"); }
.tb-ico-room-maintenance { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 19l-9-9a6 6 0 0 0-7.6-7.7l3.8 3.8-1.4 3.4-3.4 1.4L.6 7.1A6 6 0 0 0 8.4 15l9 9 4.6-5z'/%3E%3C/svg%3E"); }

/* ── Tooltip (dati dal dataset, renderizzato da interact.js) ───────────────── */
.tb-tooltip {
    position: fixed;
    z-index: 2147483000;
    max-width: 280px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
    font: .75rem/1.35 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    pointer-events: none;
}
.tb-tooltip-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tb-tooltip-dot { align-self: center; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tb-tooltip-title { font-weight: 600; color: var(--text-primary); }
.tb-tooltip-room { color: var(--text-muted); font-size: .6875rem; }
.tb-tooltip-status { font-weight: 600; font-size: .6875rem; margin-bottom: 5px; }
.tb-tooltip-rows { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.tb-tooltip-label { color: var(--text-muted); white-space: nowrap; }
.tb-tooltip-value { color: var(--text-primary); text-align: right; word-break: break-word; }

/* ── Selezione celle vuote ─────────────────────────────────────────────────── */
.tb-sel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: inset 0 0 0 1px var(--accent);
    pointer-events: none;
    z-index: 1;
}

/* ── Tendina stato pulizie ─────────────────────────────────────────────────── */
.tb-hkmenu {
    position: fixed;
    z-index: 1000;
    min-width: 170px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.tb-hkmenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-primary);
    font: 500 .8125rem/1.2 'Inter', system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
}
.tb-hkmenu-item:hover, .tb-hkmenu-item:focus-visible { background: var(--bg-hover); outline: none; }
.tb-hkmenu-item.active { font-weight: 700; }

/* ── Curve: terminatori ────────────────────────────────────────────────────── */
.tb-curves circle { fill: var(--tb-curve); r: calc(var(--tb-curve-w) + 1px); }
.tb-curves .tb-curve path { stroke-opacity: .95; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }

/* ── Pannello performance (?perf=1) ────────────────────────────────────────── */
.tb-perf {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 10;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font: 11px/1.3 ui-monospace, Consolas, monospace;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Drag&drop (dnd.js) ───────────────────────────────────────────────────── */
.tb.tb-dnd .tb-item:not(.nodrag):not(.tb-block) { cursor: grab; touch-action: none; -webkit-touch-callout: none; }   /* i blocchi non si trascinano: click = apri */
.tb.tb-dnd .tb-item.tb-edge:not(.nodrag) { cursor: ew-resize; }   /* maniglia di ridimensionamento sotto il puntatore */
.tb.tb-dragging, .tb.tb-dragging .tb-item { cursor: grabbing; }
.tb.tb-dragging { user-select: none; }
.tb.tb-dragging .tb-item { pointer-events: none; }
.tb-item.pending { opacity: .5; }
.tb-ghost {
    top: 0;
    height: var(--tb-row-h);
    opacity: .88;
    pointer-events: none;
    z-index: 1;   /* sopra barre e curve, sotto colonna camere (2), intestazione e piede (3) */
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    outline: 2px solid var(--tb-focus, var(--accent, #2563eb));
    outline-offset: -2px;
    contain: none;
}
.tb-ghost.invalid { outline-color: var(--danger, #b91c1c); filter: grayscale(.7); opacity: .65; }

/* ── Barra ingrandita (pulsante "Ingrandisci barra", peek.js) ──────────────────
   Copia della barra sotto il mouse, più grande del 30% e con tutto il testo: parte dall'arrivo, larga quanto
   il soggiorno o quanto serve al testo (larghezza dal JS); la sottolineatura (::before) è il soggiorno vero.
   Nessun evento del puntatore: click, menu e drag&drop restano sulla barra reale. */
.tb { --tb-peek-scale: 1.3; }
.tb-peek {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;   /* sopra barre e curve, sotto colonna camere (2), intestazione e piede (3) */
    width: max-content;
    min-height: calc((var(--tb-row-h) - var(--tb-item-pad) * 2) * var(--tb-peek-scale));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: calc(var(--tb-item-radius) * var(--tb-peek-scale));
    /* Fondo opaco = tinta della barra sopra la base della tavola: stesso colore percepito, stesso testo. */
    background:
        linear-gradient(color-mix(in srgb, var(--item-bg, var(--tb-item-bg)) var(--tb-item-fill, 100%), transparent),
                        color-mix(in srgb, var(--item-bg, var(--tb-item-bg)) var(--tb-item-fill, 100%), transparent)),
        var(--tb-bg-top, var(--bg-card));
    color: var(--item-fg, var(--tb-item-fg));
    box-shadow: inset 0 0 0 1px var(--item-bg, var(--tb-item-bg)), 0 6px 18px rgba(0, 0, 0, .28);
    font-size: calc(12px * var(--tb-peek-scale));
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.tb-peek::before {
    content: '';
    position: absolute;
    left: var(--peek-ul, 0);
    bottom: 0;
    width: var(--peek-uw, 0);
    height: 3px;
    background: var(--item-bg, var(--tb-item-bg));
}
.tb-peek .tb-item-strip { flex: 0 0 calc(4px * var(--tb-peek-scale)); align-self: stretch; height: auto; }
.tb-peek .tb-item-body { padding: 3px calc(6px * var(--tb-peek-scale)) 5px; }
.tb .tb-peek .tb-item-text,
.tb .tb-peek .tb-item-text2 { display: block; overflow: visible; text-overflow: clip; }   /* niente «…», anche in compatta */
.tb-peek .tb-item-text2 { font-size: calc(10px * var(--tb-peek-scale)); }
.tb-peek .tb-item-icons { gap: 3px; padding-right: calc(5px * var(--tb-peek-scale)); }
.tb-peek .tb-ico { width: calc(11px * var(--tb-peek-scale)); height: calc(11px * var(--tb-peek-scale)); color: var(--item-fg, #fff); }
/* Riferimento al calendario: camera e giorni del soggiorno della barra ingrandita. */
.tb-rlabel.tb-peek-row {
    background: color-mix(in srgb, var(--tb-focus, var(--accent, #2563eb)) 16%, var(--bg-card));
    box-shadow: inset 3px 0 0 var(--tb-focus, var(--accent, #2563eb));
}
.tb-hday.tb-peek-day .tb-hdate {
    background: color-mix(in srgb, var(--tb-focus, var(--accent, #2563eb)) 16%, transparent);
    box-shadow: inset 0 -3px 0 var(--tb-focus, var(--accent, #2563eb));
}