/* common.css — regole CONDIVISE estratte da style.css. Vedi claude/MAPPATURA_CSS.md.
   Caricato dal layout dashboard views/layout/app.php PRIMA del CSS per-vista. */

/* ── Token source of truth ────────────────────────────────── */
:root {
    /* Palette brand (fissi, tema-indipendenti) */
    --grad-ui:   linear-gradient(135deg,#17046F 0%,#7E1FB0 45%,#FF33CC 100%);
    --grad-line: linear-gradient(90deg,#17046F 0%,#FF33CC 100%);
    --primary:   #7E1FB0;

    /* Superficie glass (light) */
    --glass:     rgba(255,255,255,0.55);
    --glass-brd: rgba(255,255,255,0.85);
    --gloss:     inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);
    --sheen:     .55;

    /* Compat aliases per le viste che usano --bg-card / --border */
    --bg-card:   var(--glass);
    --border:    var(--glass-brd);

    /* Superficie OPACA che approssima il vetro della card: serve alle sticky
     * table header (dove il glass traslucido lascerebbe trasparire le righe). */
    --table-head-bg: #F7F6FA;

    /* Sfondo pagina e testo */
    --bg:        #EEECF3;
    --text:      #1A1623;
    --text-muted:#6A6577;
    --text-light:#A3A0AE;

    /* Sidebar (scura in entrambi i temi) */
    --sidebar-bg:    #0A0617;
    --sidebar-text:  #B9B5CC;
    --sidebar-text-2:#6E6A85;
    --sidebar-active:#ffffff;

    /* Logo */
    --logo-fg: #FFFFFF;

    /* Raggi */
    --radius:      18px;
    --radius-sm:   14px;
    --radius-md:   18px;
    --radius-lg:   22px;
    --radius-pill: 999px;

    /* Ombre */
    --shadow:    0 1px 1px rgba(20,10,40,.05),0 14px 34px -14px rgba(40,16,80,.28);
    --shadow-md: 0 2px 2px rgba(20,10,40,.08),0 20px 44px -16px rgba(40,16,80,.38);

    /* Blob sfondo */
    --blob-a: .10;
    --blob-b: .08;

    /* Metriche (light) — manteniamo nomi --c-* per compatibilità ChartEngine */
    --c-revenue:        #B61FA8;
    --c-transactions:   #0F9E70;
    --c-sessions:       #1098C0;
    --c-pageviews:      #8C8A95;
    --c-viewitems:      #5A1FC0;
    --c-addtocarts:     #D9870E;
    --c-begincheckouts: #E0552E;
    --c-conversion:     #D01FB0;
    --c-positive:       #0F9E70;
    --c-negative:       #E0552E;
    --c-muted:          var(--text-muted);
    --c-danger:         #f87171;

    /* Palette categorica data-viz */
    --dv-1: #4F1FC0;
    --dv-2: #C026B8;
    --dv-3: #FF33CC;
    --dv-4: #FF3D5E;
    --dv-5: #1FB6D8;
    --dv-6: #14B88A;

    /* Grafici neutri */
    --grid:        rgba(20,10,40,0.07);
    --chart-axis:  #6A6577;
    --chart-split: rgba(20,10,40,0.06);
    --chart-sett-prec: var(--text-muted); /* light: invariato rispetto a oggi */

    /* Scrollbar a tema (thumb stondato) — derivati da --text-muted/--glass-brd, non fissi */
    --scrollbar-thumb:       rgba(106,101,119,0.45); /* --text-muted #6A6577 con alpha */
    --scrollbar-thumb-hover: rgba(106,101,119,0.65);
    --scrollbar-track:       transparent;
}

[data-theme="dark"] {
    --bg:        #070411;
    --text:      #F4F2FA;
    --text-muted:#A29EB4;
    --text-light:#67627A;

    --glass:     rgba(255,255,255,0.05);
    --glass-brd: rgba(255,255,255,0.12);
    --gloss:     inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.04);
    --sheen:     .10;

    --table-head-bg: #13111D;

    --shadow:    0 1px 1px rgba(0,0,0,.4),0 22px 50px -18px rgba(0,0,0,.65);
    --shadow-md: 0 2px 2px rgba(0,0,0,.5),0 28px 56px -18px rgba(0,0,0,.80);

    --blob-a: .30;
    --blob-b: .26;

    /* Metriche dark */
    --c-revenue:        #FF6AD9;
    --c-transactions:   #2FD79B;
    --c-sessions:       #4FD0E8;
    --c-pageviews:      #9C98AD;
    --c-viewitems:      #9B6BFF;
    --c-addtocarts:     #FFC04D;
    --c-begincheckouts: #FF8A5C;
    --c-conversion:     #FF7AE0;
    --c-positive:       #2FD79B;
    --c-negative:       #FF7A8A;

    /* Grafici neutri dark */
    --grid:        rgba(255,255,255,0.06);
    --chart-axis:  #A29EB4;
    --chart-split: rgba(255,255,255,0.06);
    --chart-sett-prec: #ebebeb; /* dark: 'Settimana Prec.' più leggibile */

    /* Scrollbar dark: stessa tinta di --text-muted dark (#A29EB4), alpha più alto per contrasto su --bg scuro */
    --scrollbar-thumb:       rgba(162,158,180,0.35);
    --scrollbar-thumb-hover: rgba(162,158,180,0.55);
    --scrollbar-track:       transparent;
}
/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }
/* ── Sfondo blob glassmorphism ────────────────────────────── */
.app-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(680px 520px at 8% -6%,   rgba(83,16,135,var(--blob-a)),  transparent 60%),
        radial-gradient(760px 560px at 102% 4%,  rgba(255,51,204,var(--blob-b)), transparent 58%),
        radial-gradient(640px 640px at 52% 116%, rgba(23,4,111,var(--blob-a)),   transparent 60%);
}
/* ── Layout ───────────────────────────────────────────────── */
.app-wrap { display: flex; height: 100vh; overflow: hidden; position: relative; }
/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease;
    z-index: 100;
    position: relative;
}
.sidebar.collapsed { width: 56px; }

.sidebar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    padding: 18px 16px 20px;
}
.brandlogo { height: 32px; width: auto; display: block; flex-shrink: 0; }
.brandlogo path { fill: var(--logo-fg); }
/* Simbolo compatto: visibile solo a sidebar collassata, al posto del wordmark */
.brandsymbol { display: none; height: 32px; width: auto; flex-shrink: 0; }
.sidebar.collapsed .brandlogo { display: none; }
.sidebar.collapsed .brandsymbol { display: block; }
.sidebar.collapsed .sidebar-logo { justify-content: center; }
.sidebar-logo-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--logo-fg);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-logo-sub {
    font-size: 0.72rem;
    color: var(--sidebar-text-2);
    white-space: nowrap;
    overflow: hidden;
}
/* Hide text when collapsed */
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-logo-sub { display: none; }

/* Identità cliente: dominio del sito sopra, username sotto.
   Unico consumatore ora è l'header (.topbar). Vedi views/layout/app.php. */
.customer-ident { min-width: 0; overflow: hidden; }
.customer-ident__top {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.customer-ident__sub {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Contesto HEADER (topbar): allineato a sinistra (avatar a sinistra del testo),
   colori del contenuto. */
.topbar .customer-ident { text-align: left; line-height: 1.3; }
.topbar .customer-ident__top { font-size: 13px; font-weight: 600; color: var(--text); }
.topbar .customer-ident__sub { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
/* Dark: username in grigio molto vicino al bianco (leggibilità su fondo scuro);
   resta appena sotto il bianco del dominio (var(--text) #F4F2FA) per differenziarlo. */
[data-theme="dark"] .topbar .customer-ident__sub { color: #ebebeb; }

/* Nav section labels */
.nav-section-label {
    padding: 14px 16px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sidebar-text-2);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar.collapsed .nav-section-label { opacity: 0; }

/* Nav items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
    border-radius: 11px;
    margin: 1px 4px;
    border: 1px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--logo-fg); }
.nav-item.active {
    background: var(--grad-ui);
    color: var(--logo-fg);
    box-shadow: var(--gloss);
    border-color: transparent;
}
.nav-item i { width: 16px; text-align: center; flex-shrink: 0; font-size: 0.85rem; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-label { display: none; }

/* Sidebar footer */
.sidebar-footer {
    margin-top: auto;
    padding: 12px 8px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--sidebar-text-2);
    cursor: pointer;
    padding: 9px 12px;
    border-radius: 9px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    font-weight: 500;
    gap: 10px;
}
.sidebar-toggle-btn:hover { color: var(--logo-fg); background: rgba(255,255,255,.07); }
.sidebar.collapsed .sidebar-toggle-btn { justify-content: center; }
/* ── Main content ─────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; }
/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    background: var(--glass);
    border-bottom: 1px solid var(--glass-brd);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;   /* necessario perché z-index abbia effetto */
    z-index: 20;          /* sopra .content-area (z-index:1) → dropdown cliccabile, sotto select2 (1000+) */
    /* Query container PROPRIO e nominato ("topbar"): .topbar non è discendente di
       .content-area (che è il container anonimo globale, vedi claude/PATTERN_CONTAINER_QUERIES.md),
       quindi serve un container dedicato per farla reagire alla propria larghezza reale
       (sidebar espansa/collassata) invece che al viewport. Nominato per non collidere con
       le @container anonime esistenti, che continuano a risolvere su .content-area. */
    container: topbar / inline-size;
}
.topbar-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.topbar-subtitle { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }

/* Selettore cliente/stream in topbar (admin: adminCustomerSelector; customer multi-stream:
   customerStreamSelector) — estratto dagli inline style storici di app.php:252-253. */
.topbar-customer-select { display: flex; align-items: center; gap: 6px; margin-right: 8px; padding-right: 12px; border-right: 1px solid var(--border); flex-shrink: 0; }
.topbar-customer-select label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.topbar-customer-select__hint { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.topbar-customer-select__err { font-size: 11px; color: var(--c-negative); white-space: nowrap; }

/* Badge "stream condiviso" — pill sul modello di .badge-mock, mostrata quando il customer
   sta visualizzando uno stream non proprio (fratello di .customer-ident dentro .topbar-ident). */
.stream-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(126,31,176,.12);
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
[data-theme="dark"] .stream-badge { color: var(--c-viewitems); background: rgba(155,107,255,.16); }

/* Blocco identità header: avatar + testo (dominio/username) + logout.
   Nessun divisore verticale (Figma non ne ha uno). */
.topbar-ident { display: flex; align-items: center; gap: 9px; }
.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad-ui);
    flex-shrink: 0;
}
.topbar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    transition: all .15s;
    flex-shrink: 0;
}
.topbar-logout:hover { color: var(--c-danger); border-color: var(--c-danger); }
.topbar-logout i { font-size: 12px; }

/* Selettore tema nell'header — segmented pill (Figma .seg) */
.theme-seg { display:inline-flex; flex-shrink:0; gap:2px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius-pill); padding:3px; box-shadow:var(--shadow), var(--gloss); }
.theme-seg button { font-family:inherit; font-size:12.5px; font-weight:500; color:var(--text-muted); border:none; background:none; padding:6px 14px; border-radius:var(--radius-pill); display:flex; align-items:center; gap:6px; cursor:pointer; transition:color .15s; }
.theme-seg button i { font-size:15px; }
.theme-seg button.active { background:var(--grad-ui); color:#fff; box-shadow:var(--gloss); }

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    z-index: 1;
    /* Query container globale: la responsività del layout usa @container (larghezza REALE del
       contenuto, già al netto della sidebar toggle-based) invece di @media viewport, inaffidabili
       al collasso sidebar. Vedi claude/PATTERN_CONTAINER_QUERIES.md. */
    container-type: inline-size;
}
/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow), var(--gloss);
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,var(--sheen)), rgba(255,255,255,0));
    opacity: .9;
    z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card.flush { padding: 0; }

.card-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
/* Soglia ritarata sul content-box di .content-area (ex @media 900px viewport → 620px content-box:
   vp900 − sidebar 220 − scrollbar − padding 48). Vedi claude/PATTERN_CONTAINER_QUERIES.md. */
@container (max-width: 620px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow), var(--gloss);
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,var(--sheen)), rgba(255,255,255,0));
    opacity: .9;
    z-index: 0;
}
.kpi-card > * { position: relative; z-index: 1; }

.kpi-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1; }
.kpi-value.revenue-color     { color: var(--c-revenue); }
.kpi-value.transaction-color { color: var(--c-transactions); }
.kpi-value.session-color     { color: var(--c-sessions); }
.kpi-value.conversion-color  { color: var(--c-conversion); }
.kpi-change { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 0.75rem; font-weight: 600; margin-top: 6px; }
.kpi-change.pos { color: var(--c-positive); }
.kpi-change.neg { color: var(--c-negative); }
.kpi-prev { font-size: 0.72rem; color: var(--text-light); margin-top: 4px; }
/* Funnel segment colours via metric tokens */
.seg-sessions       { background: #1B0A6E; }
.seg-pageviews      { background: #3A128E; }
.seg-viewitems      { background: #5717A1; }
.seg-addtocarts     { background: #7A1FB0; }
.seg-begincheckouts { background: #9C24B2; }
.seg-transactions   { background: #BE2BB6; }
.seg-revenue        { background: #DF2FC9; }
.seg-conversion     { background: #FF33CC; }
/* ── Period tabs ──────────────────────────────────────────── */
.period-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.period-tab {
    padding: 7px 17px;
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-pill);
    background: var(--glass);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    font-family: 'Red Hat Display', system-ui, sans-serif;
}
.period-tab:hover { border-color: var(--primary); color: var(--primary); }
.period-tab.active { background: var(--grad-ui); border-color: transparent; color: var(--logo-fg); box-shadow: var(--gloss); }
/* ── Date range bar ───────────────────────────────────────── */
.date-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow), var(--gloss);
    padding: 10px 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.date-bar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,var(--sheen)), rgba(255,255,255,0));
    opacity: .9;
}
.date-bar label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); position: relative; }
.date-input {
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 0.78rem;
    background: var(--glass);
    color: var(--text);
    outline: none;
    position: relative;
}
.date-input:focus { border-color: var(--primary); }
/* ── Tables ───────────────────────────────────────────────── */
.data-table-wrap { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.data-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--logo-fg);
    white-space: nowrap;
}
.data-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--glass-brd);
    color: var(--text);
    white-space: nowrap;
}
.data-table tbody tr:hover { background: rgba(126,31,176,.06); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Table header colour variants — mapped to metric tokens */
.th-blue   { background: var(--c-sessions); }
.th-green  { background: var(--c-transactions); }
.th-pink   { background: var(--c-viewitems); }
.th-purple { background: var(--c-revenue); }
/* ── Live indicator ───────────────────────────────────────── */
.live-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-positive);
}
.live-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-positive);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(0.85); }
}
/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
    font-family: 'Red Hat Display', system-ui, sans-serif;
}
.btn-primary { background: var(--grad-ui); color: var(--logo-fg); border-color: transparent; box-shadow: var(--gloss); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-secondary { background: var(--glass); color: var(--text); border-color: var(--glass-brd); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 5px 10px; font-size: 0.75rem; }
/* ── Loader ───────────────────────────────────────────────── */
.loader-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--text-muted);
    font-size: 0.85rem;
    gap: 10px;
}
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-brd);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Filter ───────────────────────────────────────────────── */
.filter-select {
    padding: 7px 10px;
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-sm);
    background: var(--glass);
    color: var(--text);
    font-size: 0.82rem;
    outline: none;
}
/* ── Misc ─────────────────────────────────────────────────── */
/* .text-pos/.text-neg: usate SOLO da ChartEngine.pctBadge() (funzione dead-code, 0 call-site);
   tenute di proposito — rimozione a rischio zero rimandata (vedi §8 MAPPATURA_CSS.md). */
.text-pos    { color: var(--c-positive); font-weight: 700; }
.text-neg    { color: var(--c-negative); font-weight: 700; }
/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
}
.badge-mock {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--c-addtocarts);
    background: rgba(217,135,14,.18);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
}
[data-theme="dark"] .badge-mock { color: var(--c-addtocarts); background: rgba(255,192,77,.14); }
/* ── Chart containers ─────────────────────────────────────── */
.chart-wrap { width: 100%; position: relative; }
.chart-wrap canvas, .chart-wrap > div { width: 100% !important; }

.chart-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Soglia ritarata sul content-box di .content-area (ex @media 800px viewport → 520px content-box:
   vp800 − sidebar 220 − scrollbar − padding 48). Vedi claude/PATTERN_CONTAINER_QUERIES.md. */
@container (max-width: 520px)  { .chart-grid-2, .chart-grid-3 { grid-template-columns: 1fr; } }
/* ── Sortable table headers ───────────────────────────────── */
th.th-sortable { cursor: pointer; user-select: none; }
th.th-sortable:hover { opacity: .82; }
.th-sort {
    display: inline-block;
    font-size: 9px;
    opacity: .4;
    margin-left: 3px;
    vertical-align: middle;
    transition: opacity .12s;
}
th.th-sortable:hover .th-sort { opacity: .8; }
.th-sort.sort-on { opacity: 1; font-weight: 900; }
/* ── Table filter toolbar ─────────────────────────────────── */
.tbl-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.tbl-filter {
    flex: 1;
    min-width: 160px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
}
.card .tbl-filter {
    max-width: 300px;
}
.filter-invalid {
    border-color: var(--c-negative) !important;
    box-shadow: 0 0 0 2px rgba(224,85,46,.18);
}
.filter-err { font-size: 10px; color: var(--c-negative); white-space: nowrap; }
.tbl-count  { font-size: 11px; color: var(--c-muted); margin-left: auto; white-space: nowrap; }
/* ── Table card header (titolo + contatore, rif. Figma .tbl-head/.uline) ──
 * Resta SEMPRE dentro la card della tabella (il contatore non è mai nel
 * toolbar filtro standalone), con una riga a gradiente sotto, coerente con
 * il mock: card.flush + tbl-head(.t sinistra/.c destra) + uline. */
.tbl-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px 13px; }
.tbl-head .t { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.tbl-head .c { font-size: 11px; color: var(--text-light); }
.uline { height: 2px; background: var(--grad-line); }
/* ── Table pager (paginazione client-side tabelle prodotti/categorie) ──
 * Mostrato solo quando i record filtrati superano pageSize (totalPages > 1).
 * Bottoni allineati a .tbl-reset per coerenza tema light/dark. */
.tbl-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 12px 2px;
}
.pager-info { font-size: 11px; color: var(--c-muted); white-space: nowrap; }
.pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.pager-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-card);
}
.pager-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Griglia a 12 colonne (opt-in) ─────────────────────────────
   Il contenitore usa .grid-12; i figli usano .col-1 … .col-12.
   CSS Grid → gap-safe (niente overflow da percentuali + gap). */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: center; }
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Sotto una certa larghezza del CONTENUTO le colonne si impilano a piena riga
   (container query: reagisce a .content-area, affidabile col toggle sidebar).
   Soglia 360px CONFERMATA con Playwright (17/7, /funnel/source, sessione E2E + dati mock):
   nessun breakpoint tecnico — niente overflow/troncamento fino a container ~212px, il
   Reset (47px) non clippa mai e il placeholder del select ("Filtra sorgente…", ~91px) resta
   leggibile molto oltre. 360 è quindi una scelta ESTETICA: alla soglia il select è ancora
   ~235px (col-8 ≈ container × 0,66). Relazione misurata: container ≈ viewport − 268 (sidebar espansa). */
@container (max-width: 360px) {
    .grid-12 > [class*="col-"] { grid-column: 1 / -1; }
}

/* ── Select2 (tema globale — picker customer padre in admin, selettore
   cliente in dashboard) — chiaro/scuro via token esistenti ────────── */
.select2-container { width: 100% !important; }
/* Il dropdown aperto è appeso a <body> in un wrapper .select2-container: NON deve ereditare
   il width:100% globale (creava scrollbar di pagina all'apertura). La larghezza reale la porta
   il figlio .select2-dropdown (inline style di select2). I container inline delle toolbar non
   sono figli diretti di <body>, quindi non sono toccati da questa regola. */
body > .select2-container { width: auto !important; }
/* Topbar: selettore "Verifica cliente" / "Stream" — larghezza fissa, vince sul 100% globale */
.topbar-customer-select .select2-container { width: 200px !important; }
/* Funnel: Sorgente/Campagna affiancate — larghezza esplicita che vince sul 100% globale */
.funnel-filters .select2-container { width: 220px !important; }
.funnel-filters select[multiple] + .select2-container { width: 260px !important; }

/* @container topbar — soglie sul container nominato "topbar" (dichiarato sopra su .topbar,
   NON .content-area: la topbar non ne è discendente). Vedi claude/PATTERN_CONTAINER_QUERIES.md
   §7/§8. Piazzate qui (dopo la regola width:200px sopra) apposta: stessa specificità + !important
   su entrambe → vince l'ultima nell'ordine del foglio, quindi qui la 150px vince sotto soglia.
   Soglie tarate il 15/09/2026 via Playwright (content-box della topbar = clientWidth - 60,
   customer con selettore stream + badge "Stream condiviso"):
   - viewport 1280 → content 1000: senza riduzioni, overflow 76px → soglia 1 alzata a 1100
     così a 1280 (sidebar espansa) il selettore diventa compatto e il badge resta solo icona.
   - viewport 1100 → content 820: con blocco 1 attivo, overflow 0.
   - viewport 1024 → content 744: senza blocco 2, overflow 41px (select 163 + theme 92 +
     ident 203 + account 188) → soglia 2 alzata a 800 così a 1024 il wrap la assorbe.
   - viewport 900 → content 620: overflow 165 (68 pre-esistente lato admin, fuori scope).
   - viewport 800 → content 520: con blocco 2 attivo (wrap), overflow 0.
   - viewport 400 → content 120: overflow 152 anche senza selettore, pre-esistente, fuori scope. */
@container topbar (max-width: 1100px) {
    .topbar-customer-select label { display: none; }
    .topbar-customer-select .select2-container { width: 150px !important; }
    .stream-badge__txt { display: none; }
    .theme-seg button span { display: none; }
}
@container topbar (max-width: 800px) {
    .topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
    .customer-ident__sub { display: none; }
}
.select2-container--default .select2-selection--single {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 8px;
    height:        38px;
    font-family:   inherit;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:       var(--text);
    line-height: 36px;
    padding-left: 12px;
    font-size:   13px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--text-muted) transparent; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--text-muted); }
/* Filtri tabella (/products PRODOTTI+CATEGORIE): in dark il placeholder su --text-muted
   (#A29EB4, ~2.6:1) è sotto WCAG AA → alzato a #ebebeb, scope .tbl-toolbar (non globale). */
[data-theme="dark"] .tbl-toolbar .select2-container--default
    .select2-selection--single .select2-selection__placeholder { color: #ebebeb; }
.select2-dropdown {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 8px;
    color:         var(--text);
    font-size:     13px;
    z-index:       1000;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 8px;
    color:         var(--text);
    font-family:   inherit;
    font-size:     13px;
}
.select2-container--default .select2-results__option,
.select2-container--default .select2-results__group { color: var(--text); font-size: 13px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary);
    color:      var(--logo-fg, #fff);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background: var(--glass);
    color:      var(--text);
}
/* Hover leggibile in entrambi i temi, anche per la variante multiple (non dipende
   da [aria-selected], che nel multiple non matcha sempre lo stato evidenziato) */
.select2-container--default .select2-results__option--highlighted {
    background: var(--primary);
    color:      var(--logo-fg, #fff);
}
/* Stato selezionato+hover: resta leggibile con la stessa combinazione primary/testo chiaro */
.select2-container--default .select2-results__option--highlighted[aria-selected=true],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background: var(--primary);
    color:      var(--logo-fg, #fff);
}

/* ── Select2 (variante multiple — es. Sorgente multiselect nel funnel) ── */
.select2-container--default .select2-selection--multiple {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 8px;
    min-height:    38px;
    font-family:   inherit;
    display:       flex;
    align-items:   center;
}
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color:      var(--text);
    padding:    0 8px;
    line-height: 1.4;
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    gap:        4px;
    width:      100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color:       var(--text-muted);
    line-height: 36px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background:    var(--glass);
    border:        1px solid var(--border);
    border-radius: 6px;
    color:         var(--text);
    padding:       1px 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-muted);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--text);
}

/* ── FIX 3 — /funnel Sorgente: multiselect a dimensione fissa (niente tag/crescita) ──
 * Solo i tag (.select2-selection__choice) sono nascosti: il search-field inline resta
 * VISIBILE, così ricerca e placeholder nativo di select2 funzionano. Il testo del
 * placeholder ("Tutte le sorgenti" / "N selezionate") è pilotato da JS
 * (updateSourcePlaceholder() in funnel.php). Scoping: solo la select con classe
 * .src-multi-fixed (Sorgente di /funnel). */
.src-multi-fixed + .select2-container .select2-selection--multiple {
    height:     38px;
    overflow:   hidden;
    flex-wrap:  nowrap;
}
.src-multi-fixed + .select2-container .select2-selection--multiple .select2-selection__choice {
    display: none;
}
.src-multi-fixed + .select2-container .select2-selection--multiple .select2-selection__placeholder {
    white-space: nowrap;
    overflow:    visible;
}
/* Search field inline visibile e a piena larghezza: ricerca funzionante + placeholder intero */
.src-multi-fixed + .select2-container .select2-selection--multiple .select2-search--inline {
    width:  100%;
    margin: 0;
}
.src-multi-fixed + .select2-container .select2-selection--multiple .select2-search__field {
    width:       100% !important; /* vince sull'auto-size inline di select2 che troncava il placeholder */
    margin-top:  0;
    height:      36px;
    line-height: 36px;
    color:       var(--text);
    font-size:   13px;
}
.src-multi-fixed + .select2-container .select2-selection--multiple .select2-search__field::placeholder {
    color:   var(--text-muted);
    opacity: 1; /* Firefox abbassa l'opacità di default */
}
/* Dropdown Sorgente (/funnel) — select2 4.1.0-rc.0 usa la classe --selected (live) per la
   voce scelta; [aria-selected=true] tenuto come fallback compat. Il checkmark è un pseudo-
   elemento keyed su --selected → si aggiorna in tempo reale su select/deselect. */

/* Voce selezionata a RIPOSO: nessun grigio → resta il bg normale del dropdown, testo leggibile */
.src-multi-dd .select2-results__option--selected {
    background: transparent;
    color:      var(--text);
}

/* Spazio a sinistra per la spunta su TUTTE le voci (allineamento costante) */
.src-multi-dd .select2-results__option {
    position:     relative;
    padding-left: 1.9em;
}
/* Checkmark: invisibile di default, visibile quando --selected (o aria fallback) → LIVE */
.src-multi-dd .select2-results__option::before {
    content:    '✓';
    position:   absolute;
    left:       0.7em;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--primary);   /* viola a riposo */
    font-weight: 700;
    opacity:    0;
}
.src-multi-dd .select2-results__option--selected::before,
.src-multi-dd .select2-results__option[aria-selected=true]::before {
    opacity: 1;
}

/* Evidenziata (hover o focus tastiera) VINCE sempre: bg viola + testo e spunta bianchi,
   anche se selezionata */
.src-multi-dd .select2-results__option--highlighted {
    background: var(--primary);
    color:      var(--logo-fg, #fff);
}
.src-multi-dd .select2-results__option--highlighted::before {
    color: var(--logo-fg, #fff);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Classi estratte dagli style="..." inline delle viste dashboard
 * (branch bugfix/css-annidato — zero-inline). Estrazione VERBATIM: i valori
 * sono identici agli inline sostituiti. Cross-view qui; le classi usate in una
 * sola vista stanno nel rispettivo per-view .css.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Utility spaziatura/layout (piccolo set ad alta frequenza) ─────────── */
.m-0        { margin: 0; }
.mb-0       { margin-bottom: 0; }
.mb-10      { margin-bottom: 10px; }
.mb-20      { margin-bottom: 20px; }
.ml-auto    { margin-left: auto; }
.py-8       { padding: 8px 0; }
.py-12      { padding: 12px 0; }
.flex-wrap  { flex-wrap: wrap; }
.clickable  { cursor: pointer; }

/* ── Riga filtri allineata a destra (barra periodo/grafici) ────────────── */
.filters-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Colore-metrica (titoli grafico / accenti) ─────────────────────────── */
.c-revenue        { color: var(--c-revenue); }
.c-transactions   { color: var(--c-transactions); }
.c-sessions       { color: var(--c-sessions); }
.c-conversion     { color: var(--c-conversion); }
.c-viewitems      { color: var(--c-viewitems); }
.c-addtocarts     { color: var(--c-addtocarts); }
.c-begincheckouts { color: var(--c-begincheckouts); }
.c-pageviews      { color: var(--c-pageviews); }
.c-muted          { color: var(--c-muted); }

/* ── Altezze container grafico + placeholder "dato non disponibile" ────── */
.chart-h200 { height: 200px; }
.chart-h220 { height: 220px; }
.chart-h260 { height: 260px; }
.chart-h280 { height: 280px; }
.chart-fill { flex: 1; min-height: 260px; }
.chart-msg  { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; }

/* ── Ellissi testo + larghezze massime ─────────────────────────────────── */
.ellipsis { overflow: hidden; text-overflow: ellipsis; }
.mw-180   { max-width: 180px; }
.mw-200   { max-width: 200px; }
.mw-260   { max-width: 260px; }

/* ── Empty-state "Seleziona un cliente" (layout app.php + /overview) ────── */
.empty-state       { max-width: 540px; margin: 80px auto; text-align: center; padding: 40px 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.empty-state-icon  { font-size: 48px; margin-bottom: 20px; color: var(--text-muted); }
.empty-state-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.empty-state-text  { color: var(--text-muted); line-height: 1.6; }

/* ── Modale errore endpoint (globale, spostata da views/layout/app.php) ───
 * Vedi claude/PIANO_GESTIONE_ERRORE_ENDPOINT.md — invocata da
 * window.showEndpointErrorModal(). Selettori per ID: nessun conflitto con le
 * classi qui sopra. #f87171 tokenizzato in var(--c-danger). */
#endpoint-error-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 6, 20, .45);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#endpoint-error-modal-overlay.is-open { display: flex; }
#endpoint-error-modal {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 18px);
    box-shadow: var(--shadow-md);
    padding: 28px 26px 22px;
    text-align: center;
}
#endpoint-error-modal .eem-icon {
    font-size: 34px;
    color: var(--c-danger);
    margin-bottom: 14px;
}
#endpoint-error-modal .eem-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
#endpoint-error-modal .eem-message {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: 20px;
}
#endpoint-error-modal .eem-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: opacity .15s;
}
#endpoint-error-modal .eem-close-btn:hover { opacity: .8; }

/* ── Scrollbar a tema (chiaro/scuro) ───────────────────────────
   Default browser: traccia bianca + cursore grigio squadrato, stonato rispetto
   alla dashboard. Stondiamo il thumb e deriviamo i colori dai token (vedi
   --scrollbar-thumb / --scrollbar-thumb-hover / --scrollbar-track in :root e
   [data-theme="dark"]) così lo stile segue automaticamente il tema attivo.
   Cross-browser: WebKit/Blink via ::-webkit-scrollbar*, Firefox via
   scrollbar-width/scrollbar-color (ereditate: bastano su :root/body). */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* ::-webkit-scrollbar NON è ereditato come una property normale: va dichiarato
   sui contenitori che scrollano. Regola globale (pagina + qualunque overflow) +
   rifiniture mirate su .table-scroll e sui dropdown select2. */
*::-webkit-scrollbar {
    width:  10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
    background:    var(--scrollbar-thumb);
    border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
/* Contenitori interni della dashboard (tabelle .table-scroll definite per-vista,
   dropdown select2 quando i risultati scrollano) — stessa palette, thumb un filo
   più sottile per non invadere spazi già stretti. */
.table-scroll,
.select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.table-scroll::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar {
    width:  9px;
    height: 9px;
}