/* ── Panoramiche D2 di Performance (owner 9-nov-2026) ────────────────────
 * Le pagine fatte con le sezioni Filament (x-filament::section, anche dentro
 * i widget) prendono il disegno leggero della Panoramica (.jo-pano in
 * std-platform.css): card con bordo, angoli da 16px e ombra a riposo, titolo
 * forte e riga grigia sulla card, niente testata grigia né riga sotto.
 * Basta la classe sul contenitore: <x-filament-panels::page class="jo-pano">.
 * Oggi: Email e automazioni (CampaignAnalytics); Ospiti e segmenti e
 * Tracciamento e ricavi le prendono con la stessa classe.
 * Solo token --ds-*: il tema scuro li segue. */

/* 20px fra i blocchi (testata, KPI, bacheca), 16px fra le card. */
.fi-page.jo-pano > section { row-gap: 20px; }
.fi-page.jo-pano > section > .grid { row-gap: 20px; }
.fi-page.jo-pano .fi-page-header-widgets { gap: 16px; }

/* Due card sulla stessa riga sono alte uguali, come nella bacheca della Panoramica. */
.fi-page.jo-pano .fi-page-header-widgets > .fi-wi-widget > .fi-section { height: 100%; }

/* Card leggere: vincono sulle sezioni standard (design-system, joorna-refine, form-standard). */
html body .fi-page.jo-pano .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-section .fi-section) {
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-card) !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-rest) !important;
}

html body .fi-page.jo-pano .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-section .fi-section) > .fi-section-header {
    padding: 18px 20px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

/* Titolo marcato e sottotitolo tenue, che si distinguono (owner 9-nov-2026,
   riferimento Atrium); come le card della Panoramica (std-platform.css, D2). */
html body .fi-page.jo-pano .fi-section > .fi-section-header .fi-section-header-heading {
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    color: var(--ds-text-primary) !important;
}

/* L'icona della sezione, dove c'è, nel chip tinto come quello dei KPI. */
html body .fi-page.jo-pano .fi-section > .fi-section-header .fi-section-header-icon {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 7px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ds-chart-1, var(--ds-accent)) 14%, var(--ds-surface));
    color: var(--ds-chart-1, var(--ds-accent));
}

html body .fi-page.jo-pano .fi-section > .fi-section-header .fi-section-header-description {
    margin-top: 3px;
    font-size: 12.5px !important;
    line-height: 18px;
    color: var(--ds-text-tertiary) !important;
}

html body .fi-page.jo-pano .fi-section:not(.fi-section .fi-section) > .fi-section-content-ctn { border-top: 0 !important; }
html body .fi-page.jo-pano .fi-section:not(.fi-section .fi-section) > .fi-section-content-ctn > .fi-section-content { padding: 14px 20px 18px !important; }
html body .fi-page.jo-pano .fi-section:not(.fi-section .fi-section):not(:has(> .fi-section-header)) > .fi-section-content-ctn > .fi-section-content { padding-top: 18px !important; }

/* Barretta in riga (owner 9-nov-2026, come la colonna Occupancy di Atrium):
   un binario sottile col valore pieno, accanto al numero; viola di partenza,
   --email nel blu delle email. */
.jo-cellbar-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.jo-cellbar { --jo-cellbar-c: var(--ds-chart-1, var(--ds-accent)); flex: none; display: block; width: 72px; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--jo-cellbar-c) 14%, var(--ds-surface)); }
.jo-cellbar--email { --jo-cellbar-c: var(--ds-chart-email, var(--ds-brand-email)); }
.jo-cellbar--money { --jo-cellbar-c: var(--ds-chart-money, var(--ds-ok-dot)); }

/* Tracciamento e ricavi (owner 9-nov-2026, «ristrutturare»): il grafico dei
   ricavi sopra l'elenco, la barretta del ricavo nella cella. */
.jo-attr-chart { margin: 0 0 16px; }
/* «Come contiamo»: le tre spiegazioni una sotto l'altra, divise dalla linea tratteggiata. */
.jo-attr-parts { display: grid; }
.fi-page.jo-pano .jo-attr > details.jo-attr-rule > .jo-attr-parts { padding: 14px 20px 18px; }
.jo-attr-part { padding: 14px 0; }
.jo-attr-part:first-child { padding-top: 0; }
.jo-attr-part + .jo-attr-part { border-top: 1px dashed var(--ds-border-strong); }
.jo-attr-part > h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 650; color: var(--ds-text-primary); }
.jo-attr-part > .jo-attr-prose { padding: 0 !important; }
.jo-attr-table td .jo-cellbar { display: inline-block; width: 80px; margin-right: 10px; vertical-align: middle; }
.jo-cellbar > i { display: block; height: 100%; border-radius: inherit; background: var(--jo-cellbar-c); }

/* Un blocco senza dati in una riga sola, col link per cominciare (scelta
   dell'utente 9-nov-2026: niente card vuote), come una card leggera bassa. */
.jo-pano-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 14px 20px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-surface); box-shadow: var(--ds-shadow-rest); font-size: 13.5px; color: var(--ds-text-secondary); }
.jo-pano-line > b { font-weight: 650; color: var(--ds-text-primary); }

/* Classifica a righe (Orari di invio migliori): il posto in un tondo, nome e
   dettaglio, la barretta larga e il valore; il primo posto in evidenza. */
.jo-rank { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jo-rank-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(40px, 72px) 3.5rem; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 12px; }
.jo-rank-row.is-top { background: color-mix(in srgb, var(--ds-chart-email, var(--ds-brand-email)) 8%, var(--ds-surface)); }
.jo-rank-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ds-surface-sunken); font-size: 12.5px; font-weight: 700; color: var(--ds-text-secondary); }
.jo-rank-row.is-top .jo-rank-n { background: var(--ds-chart-email, var(--ds-brand-email)); color: var(--ds-surface); }
.jo-rank-t { display: flex; flex-direction: column; min-width: 0; }
.jo-rank-t b { overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--ds-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.jo-rank-t small { font-size: 12px; color: var(--ds-text-tertiary); }
.jo-rank .jo-cellbar { width: 100%; height: 8px; }
.jo-rank-v { font-size: 14px; font-weight: 700; color: var(--ds-text-primary); text-align: right; font-variant-numeric: tabular-nums; }

/* KPI con la linea (x-jo.kpi-spark), come nella Panoramica (.jo-hd). */
.fi-page.jo-pano .jo-kpi.jo-kpi--spark { align-content: flex-start; }
.fi-page.jo-pano .jo-kpi.jo-kpi--spark.has-spark { padding-bottom: 8px !important; }

/* Telefono: come la Panoramica, KPI senza tessera dell'icona e valore più
   piccolo, la linea a tutta larghezza; card meno imbottite. */
@media (max-width: 640px) {
    .fi-page.jo-pano .jo-kpis { --jo-kpi-value: 1.5rem; --jo-kpi-pad: 12px; --jo-kpi-pad-x: 12px; }
    .fi-page.jo-pano .jo-kpis .jo-kpi > .jo-kpi-top > .jo-kpi-ic { display: none !important; }
    .fi-page.jo-pano .jo-kpis .jo-kpi:has(> .jo-kpi-top > .jo-kpi-ic) { padding-left: var(--jo-kpi-pad-x) !important; }
    .fi-page.jo-pano .jo-kpis .jo-kpi--spark > .jo-spark { width: 100%; margin-left: 0; }
    .fi-page.jo-pano .jo-kpis .jo-kpi > .jo-kpi-note { flex-basis: 100%; }

    html body .fi-page.jo-pano .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-section .fi-section) > .fi-section-header { padding: 16px 16px 0 !important; }
    html body .fi-page.jo-pano .fi-section:not(.fi-section .fi-section) > .fi-section-content-ctn > .fi-section-content { padding: 12px 16px 16px !important; }
}