/* Standard UX/UI — sezione platform (passaggio globale 28-set).
 * Solo regole specifiche della sezione: i pattern condivisi (pill .jo-qf,
 * KPI .jo-kpi, tabelle, testate) stanno in joorna-standard.css. */

/* ── Panoramica hotel (.jo-hd) ─────────────────────────────── */

/* Trend del periodo sotto il valore dei KPI. */
.jo-hd-trend.is-up { color: var(--jo-ui-ok); }
.jo-hd-trend.is-down { color: var(--jo-ui-danger); }

/* Layout (mockup VIEWS.dashboard): KPI → grafici 2:1 → tre card. */
.jo-hd {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Da vedere: scorciatoie verso le sezioni, una riga ciascuna. */
.jo-hd-links {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.jo-hd-links > li + li { border-top: 1px solid var(--jo-ui-line-2); }

.jo-hd-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 16px;
    gap: 10px;
    align-items: center;
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background-color .12s ease;
}

a.jo-hd-link:hover { background: var(--ds-accent-soft); }
a.jo-hd-link:hover b { color: var(--ds-accent-fg); }
a.jo-hd-link:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }

.jo-hd-link .jo-kpi-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--jo-ui-soft);
    color: var(--jo-ui-muted);
}

.jo-hd-link .jo-kpi-ic svg { width: 15px; height: 15px; }

.jo-hd-link b { display: block; font-size: 13px; font-weight: 600; color: var(--jo-ui-ink); }
.jo-hd-link small { display: block; font-size: 12px; color: var(--jo-ui-muted); }

.jo-hd-link-v {
    font-size: 16px;
    font-weight: 700;
    color: var(--jo-ui-ink);
    font-variant-numeric: tabular-nums;
}

/* Occupazione camere giorno per giorno: una riga per camera, un pallino per notte. */
.jo-occ-card .jo-hd-card-h { align-items: flex-start; }
.jo-occ-card .jo-hd-card-h .jo-an-card-hint { margin: 2px 0 0; }

.jo-occ-nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
}

.jo-occ-nav svg { width: 16px; height: 16px; }

.jo-occ-today {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--jo-ui-ink);
}

.jo-occ-today:hover:not(:disabled) { background: var(--ds-accent-soft); color: var(--ds-accent-fg); }
.jo-occ-today:disabled { color: var(--jo-ui-muted); opacity: .6; cursor: default; }

.jo-occ-scroll {
    max-height: 330px;
    overflow: auto;
}

.jo-occ {
    width: 100%;
    min-width: calc(130px + var(--jo-occ-days) * 18px);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.jo-occ th,
.jo-occ td {
    padding: 0;
    text-align: center;
}

.jo-occ thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 6px;
    background: var(--ds-surface);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--jo-ui-muted);
    font-variant-numeric: tabular-nums;
}

.jo-occ thead th span {
    display: block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.jo-occ thead th.is-weekend { color: var(--jo-ui-ink); }

.jo-occ .jo-occ-room {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 130px;
    padding-right: 10px;
    background: var(--ds-surface);
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--jo-ui-ink);
}

.jo-occ .jo-occ-room span { display: block; }

.jo-occ tbody td,
.jo-occ tbody th { height: 30px; }

/* Riga "Occupate": camere occupate per notte, sotto la griglia. */
.jo-occ tfoot td,
.jo-occ tfoot th {
    height: 26px;
    border-top: 1px solid var(--jo-ui-line-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--jo-ui-muted);
    font-variant-numeric: tabular-nums;
}

.jo-occ tfoot .jo-occ-room { font-size: 12px; color: var(--jo-ui-muted); }

.jo-occ .is-today { background: var(--ds-accent-soft); }
.jo-occ thead th.is-today { color: var(--ds-accent-fg); border-radius: 6px 6px 0 0; }

.jo-occ-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--ds-border-strong);
    border-radius: 999px;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    color: var(--ds-surface);
}

.jo-occ-dot.is-on {
    border-color: transparent;
    background: var(--jo-primary-400);
    cursor: default;
}

.jo-occ-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--jo-ui-line-2);
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.jo-occ-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.jo-occ-today-mark {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--ds-accent-soft);
}

.jo-occ-count { margin-left: auto; }

.jo-hd-go {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--jo-ui-muted);
}

.jo-hd-card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.jo-hd-card-h { margin-bottom: 12px; }

.jo-hd-card-h h3 { margin: 0; }

.jo-hd-card-h + .jo-hd-stats { margin-top: 0; }

.jo-hd-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--jo-ui-line-2);
    font-size: 13px;
    color: var(--jo-ui-muted);
}

.jo-hd-foot b { color: var(--jo-ui-ink); }

/* Elenchi delle card: campagne e attività recenti. */
.jo-hd-list,
.jo-hd-timeline {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.jo-hd-list > li,
.jo-hd-timeline > li {
    padding: 9px 0;
    border-top: 1px solid var(--jo-ui-line-2);
    font-size: 13px;
}

.jo-hd-list > li:first-child,
.jo-hd-timeline > li:first-child { border-top: 0; }

.jo-hd-list b,
.jo-hd-timeline b {
    display: block;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-hd-list span,
.jo-hd-timeline span {
    display: block;
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.jo-hd-timeline > li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.jo-hd-timeline a:hover b { color: var(--jo-ui-accent); }

.jo-hd-tl-ic {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--jo-ui-soft);
    color: var(--jo-ui-muted);
}

.jo-hd-tl-ic svg { width: 15px; height: 15px; }

.jo-hd-timeline time {
    font-size: 12px;
    color: var(--jo-ui-muted);
    white-space: nowrap;
}

.jo-hd-none {
    color: var(--jo-ui-muted);
}

/* Chatbot: quattro numeri e l'esito delle conversazioni. */
.jo-hd-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.jo-hd-stats > div {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--jo-ui-soft);
}

.jo-hd-stats dt { font-size: 12px; color: var(--jo-ui-muted); }
.jo-hd-stats dd { font-size: 17px; font-weight: 700; color: var(--jo-ui-ink); }

.jo-hd-outcomes { margin-top: 12px; }

.jo-hd-outcomes .jo-hd-bar-row { font-size: 12px; }

.jo-hd-outcomes b { width: 34px; text-align: right; color: var(--jo-ui-ink); }

.jo-hd-out-l {
    flex: 0 0 132px;
    color: var(--jo-ui-muted);
}

.jo-hd-more { align-self: flex-start; }

/* Barre di avanzamento (prova moduli, open rate segmenti). */
.jo-hd-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.jo-hd-bar {
    flex: 1;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--jo-ui-line-2);
    overflow: hidden;
}

.jo-hd-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--jo-ui-accent);
}

.jo-hd-bar > i.is-ok { background: var(--jo-ui-ok); }
.jo-hd-bar > i.is-danger { background: var(--jo-ui-danger); }

/* Tre KPI su una riga da tablet in su (Attività comunicazioni, Profilo ospiti, Piano & Moduli). */
@media (min-width: 768px) {
    .jo-kpis.jo-kpis--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Badge fonte del dato (Analytics) in cima a un .jo-kpi, allineato a destra. */
.jo-kpi-src {
    margin-left: auto;
    flex: 0 0 auto;
}

/* Etichetta "dato di gruppo" dentro la nota di un .jo-kpi (report Analisi dei segmenti). */
.jo-kpi-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
    cursor: help;
}

/* Report Analisi dei segmenti: i segmenti più performanti. Pannello
   standard (.jo-panel) con card a token (.jo-tseg), tre colonne solo da
   desktop. minmax(0, 1fr): la descrizione su una riga non allarga la colonna. */
.jo-an-topseg-h {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.jo-an-topseg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .jo-an-topseg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .jo-an-topseg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.jo-tseg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 12px;
    background: var(--jo-ui-surface);
    color: var(--jo-ui-ink);
    transition: border-color .15s, box-shadow .15s;
}

.jo-tseg:hover {
    border-color: color-mix(in srgb, var(--jo-ui-accent) 35%, var(--jo-ui-line));
    box-shadow: 0 4px 12px rgba(22, 22, 42, .06);
}

.jo-tseg-h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.jo-tseg-h h3 {
    min-width: 0;
    margin: 0;
    font-size: 14.5px;
    font-weight: 650;
}

.jo-tseg-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--jo-ui-soft);
    color: var(--jo-ui-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.jo-tseg-badge.is-top {
    background: var(--jo-ui-ok-bg);
    color: var(--jo-ui-ok);
}

.jo-tseg-desc {
    min-height: 1.4em;
    margin: -6px 0 0;
    overflow: hidden;
    color: var(--jo-ui-muted);
    font-size: 12.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-tseg-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.jo-tseg-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--jo-ui-soft);
}

.jo-tseg-stats svg {
    width: 16px;
    height: 16px;
    color: var(--jo-ui-accent);
}

.jo-tseg-stats b {
    overflow: hidden;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-tseg-stats span {
    color: var(--jo-ui-muted);
    font-size: 11.5px;
}

.jo-tseg-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: auto 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--jo-ui-line-2);
    font-size: 12.5px;
}

.jo-tseg-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.jo-tseg-facts dt {
    color: var(--jo-ui-muted);
}

.jo-tseg-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Su telefono il badge fonte ruberebbe spazio all'etichetta del KPI. */
@media (max-width: 767px) {
    .jo-kpi-src {
        display: none;
    }
}

/* Report Risultati campagne email: ospiti raggiunti per mese (barre). */
.jo-trend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jo-trend-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.jo-trend-top b {
    font-weight: 600;
    text-transform: capitalize;
}

.jo-trend-top span {
    color: var(--jo-ui-muted);
    font-variant-numeric: tabular-nums;
}

.jo-trend-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--jo-ui-soft);
}

.jo-trend-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--jo-ui-accent);
}

/* ── Amministrazione ▸ Piano & Moduli: un riquadro a righe ─────────
   Icona · modulo (nome + descrizione su una riga) · stato (pallino) ·
   scadenza · azione. Stesse superfici e bordi delle tabelle. */
.jo-plan {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-rest);
    overflow: hidden;
}

.jo-plan-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-row-divider);
    background: var(--ds-surface-sunken);
}

.jo-plan-head h3 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-text-tertiary);
}

.jo-plan-count {
    font-size: 12px;
    color: var(--ds-text-placeholder);
}

.jo-plan-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jo-plan-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 150px 210px auto;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 8px 16px;
}

.jo-plan-row + .jo-plan-row {
    border-top: 1px solid var(--ds-row-divider);
}

.jo-plan-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ds-surface-sunken);
    color: var(--ds-text-tertiary);
}

.jo-plan-ic svg {
    width: 17px;
    height: 17px;
}

.jo-plan-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jo-plan-name strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.jo-plan-name span {
    overflow: hidden;
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ds-text-tertiary);
}

.jo-plan-detail {
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

.jo-plan-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* Azioni del modulo solo icona (16px su area 32px); il fulmine "Attiva subito" è l'azione principale, in viola. */
.jo-plan-actions { gap: 2px; }
.jo-plan-actions .jo-icon-btn { width: 32px; height: 32px; }
.jo-plan-actions .jo-icon-btn.is-primary { color: var(--ds-accent, #7C5CCB); }
.jo-plan-actions .jo-icon-btn.is-primary:hover,
.jo-plan-actions .jo-icon-btn.is-primary:focus-visible {
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent, #7C5CCB);
}

.jo-plan-foot {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--ds-row-divider);
    font-size: 13px;
    color: var(--ds-text-tertiary);
}

.jo-plan-group + .jo-plan-group .jo-plan-head {
    border-top: 1px solid var(--ds-row-divider);
}

/* Barra della vista: conteggio a sinistra, Lista | Card a destra (come le tabelle). */
.jo-plan-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-row-divider);
    font-size: 12.5px;
    color: var(--ds-text-tertiary);
}

/* Vista Card: stesse voci, in tessere — icona e nome, descrizione intera,
   stato e scadenza, azione in fondo. */
.jo-plan--cards .jo-plan-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 12px 16px 16px;
}

.jo-plan--cards .jo-plan-row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    row-gap: 8px;
    column-gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
}

.jo-plan--cards .jo-plan-row + .jo-plan-row { border-top: 1px solid var(--ds-border); }

.jo-plan--cards .jo-plan-name span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.jo-plan--cards .jo-plan-row > .jo-cell-status { grid-column: 1 / -1; }
.jo-plan--cards .jo-plan-row > .jo-plan-detail { grid-column: 1 / -1; margin-top: -4px; }

.jo-plan--cards .jo-plan-row > .jo-plan-actions {
    grid-column: 1 / -1;
    align-self: end;
    justify-content: flex-start;
}

.jo-plan--cards .jo-plan-actions:empty { display: none; }

/* Tablet e telefono: stato e scadenza sotto il nome, azione a capo. */
@media (max-width: 900px) {
    .jo-plan-row {
        grid-template-columns: 32px minmax(0, 1fr);
        row-gap: 4px;
    }

    .jo-plan-row > .jo-cell-status,
    .jo-plan-row > .jo-plan-detail,
    .jo-plan-row > .jo-plan-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* ── Assistenza ───────────────────────────────────────────────────
   Card sempre aperte una sotto l'altra, col passo verticale delle pagine
   (owner 15-ott-2026, come Tracciamento e ricavi). */
.jo-assist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Owner 8-ott-2026: tipo · parte di JOORNA · messaggio · Invia su una riga
   (sotto i 768px in colonna). */
.jo-assist-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.jo-assist-form > .fi-fo-component-ctn {
    flex: 1 1 auto;
    min-width: 0;
    row-gap: 16px;
}

.jo-assist-submit {
    display: flex;
    flex: none;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .jo-assist-form { flex-direction: column; align-items: stretch; }
}

.jo-assist-dl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    font-size: 13px;
}

.jo-assist-dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
}

.jo-assist-dl dt {
    color: var(--ds-text-tertiary);
}

.jo-assist-dl dd {
    margin: 0;
    text-align: right;
    color: var(--ds-text-secondary);
}

.jo-assist-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.jo-assist-links span {
    display: block;
    color: var(--ds-text-tertiary);
}

.jo-assist-news {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jo-assist-news-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ds-text-tertiary);
}

.jo-assist-news-title {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.jo-assist-news ul {
    margin: 4px 0 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 12.5px;
    color: var(--ds-text-secondary);
}

/* ── Panoramica: widget scelti dall'utente (owner 2-ott-2026) ────────────
 * Righe scelte dall'utente (owner 9-ott-2026: "lo metto tra due grafici e si
 * mette tra quei due, gli altri si restringono"): ogni riga è una riga flex
 * (.jo-hd-break la chiude, DashboardWidgets::rowStarts); nella riga i widget
 * si dividono lo spazio secondo il tipo — gli andamenti nel tempo ('wide')
 * prendono il doppio degli altri, nessuno scende sotto un terzo (massimo 3
 * per riga, il quarto va sotto), 'full' sempre da solo. Le righe di partenza
 * le fa DashboardWidgets::rowStarts con le misure del catalogo. Le card della stessa
 * riga alte uguali, il piede in fondo. Sotto i 1100px uno per riga. */
.jo-hd-board {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    align-items: stretch;
}

/* La distanza fra le righe la dà il margine sotto i widget: il fine riga non la raddoppia. */
.jo-hd-board > * { flex: 1 1 100%; margin-bottom: 16px; }

/* Fine riga: un elemento alto zero largo tutta la riga. */
.jo-hd-board > .jo-hd-break { flex: 0 0 100%; height: 0; margin: 0; }

@media (min-width: 1100px) {
    .jo-hd-board > .jo-hd-w { flex: 1 1 0; min-width: calc((100% - 32px) / 3); }
    .jo-hd-board > .jo-hd-w--wide { flex-grow: 2; }
    /* A riga intera di partenza (la riga la chiude rowStarts); accanto ad altri si stringe come loro. */
    .jo-hd-board > .jo-hd-w--full { flex-grow: 3; }
}

/* Si prende e si sposta da qualsiasi punto della card. */
.jo-hd-w[draggable="true"] { cursor: grab; }
.jo-hd-w[draggable="true"]:active { cursor: grabbing; }
.jo-hd-w a, .jo-hd-w button { cursor: pointer; }
.jo-hd-w-grip { cursor: grab; }

.jo-hd-w { display: flex; min-width: 0; }
.jo-hd-w > .jo-an-card { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.jo-hd-w > .jo-an-card > .jo-occ-legend,
.jo-hd-w > .jo-an-card > .jo-hd-foot { margin-top: auto; }
.jo-hd-w > .jo-an-card > .jo-occ-scroll { margin-bottom: 12px; }

/* Grafici che riempiono la card (owner 9-ott-2026: "niente spazi vuoti, i
 * grafici si adattano anche quando li sposti"): le card della stessa riga
 * restano alte uguali e il grafico si allunga fino al fondo della sua,
 * partendo dalla sua altezza di sempre (--aa-h, x-analytics.chart). Base 0:
 * è la riga a decidere l'altezza, non il grafico (niente giri di misure).
 * Lo stesso per lo stato vuoto, al centro dello spazio. Vale per Panoramica,
 * Dashboard Generale e Panoramica del chatbot (.jo-hd-board). */
.jo-hd-w > .jo-an-card > .aa-chart,
.jo-hd-w > .jo-an-card > * > .aa-chart:only-child {
    flex: 1 1 0;
    height: auto !important;
    min-height: var(--aa-h, 180px);
}
.jo-hd-w > .jo-an-card > .jo-an-empty { flex: 1 1 auto; justify-content: center; }

/* Strutture a confronto: grafico e tabella affiancati nella stessa card. */
.jo-hd-split { display: grid !important; gap: 20px; }

@media (min-width: 1100px) {
    .jo-hd-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.jo-hd-board-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--ds-text-tertiary);
    font-size: 13px;
}

.jo-hd-board-empty > svg { width: 28px; height: 28px; color: var(--ds-text-placeholder); }

/* Carosello dei widget (hotel-dashboard/picker.blade.php): pannello fisso in
 * fondo allo schermo, a tutta larghezza, tessere in fila che scorrono in
 * orizzontale. Niente velo: la Panoramica sopra resta visibile e si aggiorna. */
.jo-wpick-dock {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    padding: 10px 20px 12px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg-sidebar);
    box-shadow: 0 -8px 24px -8px rgba(20, 22, 40, .14);
}

.jo-wpick-in { transition: transform .2s ease, opacity .2s ease; }
.jo-wpick-from { transform: translateY(100%); opacity: 0; }
.jo-wpick-to { transform: translateY(0); opacity: 1; }

.jo-wpick-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.jo-wpick-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.jo-wpick-title b { font-size: 14px; font-weight: 600; color: var(--ds-text-primary); }
.jo-wpick-count { font-size: 12.5px; color: var(--ds-text-tertiary); }
.jo-wpick-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.jo-wpick-nav .jo-icon-btn:disabled { opacity: .4; cursor: default; }

.jo-wpick-reset {
    margin-right: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.jo-wpick-reset:hover { background: var(--ds-surface-hover); color: var(--ds-text-primary); }

.jo-wpick-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 196px;
    gap: 10px;
    margin: 0;
    padding: 2px 2px 6px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

@media (max-width: 640px) {
    .jo-wpick-dock { padding: 12px 16px 14px; }
    .jo-wpick-reset { display: none; }
}

.jo-wpick-card {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
    overflow: hidden;
    transition: border-color .12s ease;
}

.jo-wpick-card:hover { border-color: var(--ds-border-strong); }
.jo-wpick-card.is-on { border-color: var(--ds-step-current-bd); }

.jo-wpick-prev {
    position: relative;
    display: grid;
    place-items: center;
    height: 52px;
    padding: 8px 14px;
    background: var(--ds-surface-sunken);
    border-bottom: 1px solid var(--ds-row-divider);
}

.jo-wpick-prev svg { width: 100%; height: 100%; }
.jo-wpick-prev svg :is(rect, circle) { fill: var(--ds-border); }
.jo-wpick-prev svg :is(rect, circle).on { fill: var(--ds-accent); opacity: .55; }
.jo-wpick-prev--dots svg circle:not(.on) { fill: none; stroke: var(--ds-border-strong); stroke-width: 1; }
.jo-wpick-prev svg polyline { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.jo-wpick-prev svg polyline.on { stroke: var(--ds-accent); opacity: .7; }
.jo-wpick-prev svg polyline.alt { stroke: var(--ds-lime-strong); opacity: .7; }

.jo-wpick-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px 1px 6px;
    border: 1px solid var(--ds-step-done-bd);
    border-radius: 999px;
    background: var(--ds-step-done-bg);
    color: var(--ds-step-done-fg);
    font-size: 11.5px;
    font-weight: 500;
}

.jo-wpick-badge svg { width: 12px; height: 12px; }

.jo-wpick-body { flex: 1; padding: 8px 12px 2px; }
.jo-wpick-body b { display: block; font-size: 13px; font-weight: 600; color: var(--ds-text-primary); }
.jo-wpick-body p {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ds-text-tertiary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.jo-wpick-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px 10px;
}

.jo-wpick-actions .jo-icon-btn:disabled { opacity: .35; cursor: default; }
.jo-wpick-cta { margin-left: auto; }

/* Nascondi un widget: occhio barrato nell'angolo, al passaggio sulla card
 * (sempre visibile su touch e da tastiera). Le azioni della testata della
 * card (Apri, frecce) si spostano per lasciargli posto. */
.jo-hd-w { position: relative; }

.jo-hd-w-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    gap: 2px;
    border-radius: 8px;
    background: var(--ds-surface);
    opacity: 0;
    transition: opacity .12s ease;
}

.jo-hd-w:hover .jo-hd-w-tools,
.jo-hd-w-tools:focus-within { opacity: 1; }

@media (hover: none) {
    .jo-hd-w-tools { opacity: 1; }
    .jo-hd-w-grip { display: none !important; }
}

.jo-hd-w-grip { cursor: grab; }
.jo-hd-w-grip:active { cursor: grabbing; }
html.jo-wpick-dragging .jo-hd-w-tools { opacity: 0; }
.jo-hd-w.is-dragged > .jo-an-card { opacity: .4; outline: 2px dashed var(--ds-accent); outline-offset: -2px; }

.jo-hd-w > .jo-an-card > .jo-hd-card-h,
.jo-hd-w > .jo-an-card > h3 { padding-right: 64px; }
.jo-hd-w > .jo-hd-split > .jo-mtable-wrap { margin-top: 30px; }

/* Con il carosello aperto la Panoramica si può scorrere fino in fondo. */
html.jo-wpick-open .fi-main { padding-bottom: 230px; }

/* Velo sotto il carosello: la pagina si scurisce, il carosello resta chiaro. */
.jo-wpick-veil {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(15, 17, 26, .42);
}

.jo-wpick-fade { transition: opacity .18s ease; }
.jo-wpick-fade-0 { opacity: 0; }
.jo-wpick-fade-1 { opacity: 1; }

/* Tessere da aggiungere: si trascinano nella pagina. */
.jo-wpick-card[draggable='true'] { cursor: grab; }
.jo-wpick-card[draggable='true']:active { cursor: grabbing; }
.jo-wpick-card.is-dragged { opacity: .45; border-style: dashed; }

/* Durante il trascinamento la Panoramica sale sopra il velo come zona di
 * rilascio; il widget sotto il cursore mostra dove andrà il nuovo (prima di lui). */
.jo-hd-board { position: relative; }

html.jo-wpick-dragging .jo-hd-board.is-drop {
    z-index: 39;
    border-radius: 14px;
    outline: 2px dashed var(--ds-accent);
    outline-offset: 8px;
}

.jo-hd-w.is-before::before,
.jo-hd-w.is-after::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 3px;
    border-radius: 3px;
    background: var(--ds-accent);
}

/* Lasciato sulla metà destra: va dopo, la linea sta a destra. */
.jo-hd-w.is-after::after { left: auto; right: -10px; }

.jo-hd-drop-hint {
    position: fixed;
    top: 84px;
    left: 50%;
    z-index: 41;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ds-accent);
    color: var(--ds-surface);
    font-size: 13px;
    font-weight: 500;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: var(--ds-shadow-raised);
}

.jo-hd-drop-hint > span { display: inline-flex; align-items: center; gap: 6px; }
.jo-hd-drop-hint svg { width: 16px; height: 16px; }

/* Il widget appena aggiunto si illumina: sopra il velo, bordo e alone lilla. */
.jo-hd-w.is-glow { z-index: 39; }

.jo-hd-w.is-glow > .jo-an-card {
    box-shadow: 0 0 0 2px var(--ds-accent), 0 14px 36px -8px rgba(124, 92, 203, .5);
    animation: jo-hd-glow 1.2s ease-out;
}

@keyframes jo-hd-glow {
    0% { transform: scale(.97); box-shadow: 0 0 0 0 var(--ds-accent), 0 0 0 0 rgba(124, 92, 203, 0); }
    40% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .jo-hd-w.is-glow > .jo-an-card { animation: none; }
}

/* Chatbot ▸ Panoramica a widget: le card .jo-panel nella stessa griglia
 * della Panoramica (alte uguali per riga, piede in fondo, posto per gli
 * strumenti del widget nell'angolo). */
.jo-hd-w > .jo-panel { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; }
.jo-hd-w > .jo-panel > .jo-ca-link,
.jo-hd-w > .jo-panel > .jo-ca-foot { margin-top: auto; }
.jo-hd-w > .jo-panel > .jo-ca-head { padding-right: 64px; }

/* Da completare (owner 7-ott-2026): barra di avanzamento sottile e righe come "Da vedere", su due colonne da 1024px. */
.jo-setup-card .jo-hd-card-h { align-items: flex-start; margin-bottom: 10px; }
.jo-setup-card .jo-hd-card-h .jo-an-card-hint { margin: 2px 0 0; }

.jo-setup-bar {
    height: 4px;
    margin: 0 0 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--jo-ui-soft);
}

.jo-setup-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-lime-strong);
}

@media (min-width: 1024px) {
    .jo-setup-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    .jo-setup-links > li + li { border-top: 0; }
    .jo-setup-links > li { border-bottom: 1px solid var(--jo-ui-line-2); }
}

/* Card Chatbot in Panoramica: titolo delle barre (owner 7-ott-2026). */
.jo-hd-out-title { margin: 14px 0 -4px; font-size: 12px; font-weight: 600; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-setup-links .jo-setup-do { font-size: 12.5px; font-weight: 500; color: var(--jo-primary-600, #7C5CCB); white-space: nowrap; }

/* Widget nascosto: "Annulla" per 5 secondi, la barra si accorcia (HasWidgetBoard::removeWidget). */
.jo-undo-bar {
    display: block;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--ds-accent, #7C5CCB);
    transform-origin: left center;
    animation: jo-undo-countdown 5s linear forwards;
}
.fi-no-notification:hover .jo-undo-bar { animation-play-state: paused; }
@keyframes jo-undo-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Provenienza delle prenotazioni (Panoramica, owner 9-ott-2026): una riga per
   canale col logo, la barra, il numero e la percentuale. */
.jo-bks { display: grid; flex: 1; align-content: center; gap: 10px; margin-top: 12px; }
.jo-bks-row { display: grid; grid-template-columns: 24px minmax(0, 9rem) 1fr auto 3rem; align-items: center; gap: 10px; font-size: 13px; }
.jo-bks-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ds-surface-sunken, #F3F4F8); color: var(--ds-text-tertiary, #5B5B6B); }
.jo-bks-logo svg { width: 15px; height: 15px; }
.jo-bks-logo.is-brand { background: none; }
.jo-bks-logo.is-brand svg { width: 22px; height: 22px; }
.jo-bks-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text-secondary, #3F3F46); }
.jo-bks-bar { height: 8px; border-radius: 999px; background: var(--ds-surface-sunken, #F3F4F8); overflow: hidden; }
.jo-bks-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ds-accent, #7C5CCB); opacity: .75; }
.jo-bks-n { font-variant-numeric: tabular-nums; color: var(--ds-text-primary, #18181B); }
.jo-bks-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ds-text-tertiary, #5B5B6B); }