/* ==========================================================================
   Wallboard — design token della nuova dashboard AStar v3.

   Valori presi dal handoff del designer:
   Dashboard AStar Europe/design_handoff_trade_automation_dashboard/README.md (§ Design Tokens)

   Convive con style.css senza toccarlo: le pagine vecchie (index.php,
   user.php, settings.php) restano com'erano finche' le nuove non sono
   collaudate. Nessuna regola qui dentro usa selettori di elemento nudi che
   possano tracimare - tutto e' sotto .wb.
   ========================================================================== */

/* Font self-hosted (U1): variabili, subset latin, licenze OFL in
   assets/fonts/. Scaricati da Google Fonts (fonts.gstatic.com, subset
   'latin' dell'API css2) l'08/08/2026. font-display swap: prima il testo
   col carattere di sistema, poi il definitivo — mai una pagina bianca. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/Manrope-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-variable.woff2') format('woff2');
}

:root {
    /* Superfici */
    --wb-app:          #080B12;
    --wb-header:       #0A0E17;
    --wb-card:         #0E131D;
    --wb-thead:        #0B1019;
    --wb-hover:        #111828;
    --wb-badge:        #131A26;
    --wb-select:       #12213B;

    /* Bordi */
    --wb-bd-shell:     #1A2231;
    --wb-bd-card:      #1E2736;
    --wb-bd-div:       #161E2C;
    --wb-bd-row:       #121925;
    --wb-bd-select:    #24406B;
    --wb-bd-hover:     #2B384C;

    /* Testo */
    --wb-fg:           #E8EDF6;
    --wb-fg-table:     #DCE5F2;
    --wb-fg-2:         #A9B7CC;
    --wb-fg-muted:     #7C8AA3;
    --wb-fg-label:     #5F6E86;
    --wb-fg-off:       #4A5768;

    /* Semantica */
    --wb-pos:          #16C784;
    --wb-neg:          #F2545B;
    --wb-warn:         #FFC61A;
    --wb-accent:       #1B6FEA;
    --wb-accent-lt:    #4D93FF;
    --wb-accent-on:    #8FBBFF;

    --wb-warn-bg:      #1A1608;
    --wb-warn-bd:      #4A3A1A;

    --wb-radius-card:  14px;
    --wb-radius-btn:   9px;
    --wb-shadow:       0 40px 90px -30px rgba(0, 0, 0, .8);

    /* I woff2 sono in assets/fonts/. Se mancano si ricade sullo stack di
       sistema: la pagina resta leggibile, cambia solo il carattere. */
    --wb-ui:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wb-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.wb {
    background: var(--wb-app);
    color: var(--wb-fg);
    font-family: var(--wb-ui);
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.wb-num,
.wb .mono {
    font-family: var(--wb-mono);
    font-variant-numeric: tabular-nums;
}

.wb-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    min-height: 78px;
    padding: 12px 28px;
    background: var(--wb-header);
    border-bottom: 1px solid var(--wb-bd-shell);
}

/* ----------------------------------------------------------- baseline (U2)
   Overlay sui grafici equity: il riquadro "Iniziale" (oro, quota di
   partenza della baseline) e "Finale" (neutro, con la crescita %). I colori
   sono quelli puntuali del mockup v3, non token: vivono solo qui. */
.wb-chart-wrap { position: relative; }

.wb-chart-badge {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 9px;
    border-radius: 8px;
}
.wb-chart-badge.is-iniziale { left: 0;  bottom: 20px; background: #171205; border: 1px solid #4A3A10; }
.wb-chart-badge.is-finale   { right: 0; bottom: 20px; background: #12213B; border: 1px solid #24406B; }

.wb-chart-badge-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #5F6E86;
}
.is-iniziale > .wb-chart-badge-label { color: #8A7431; }

.wb-chart-badge-value {
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--wb-mono);
    white-space: nowrap;
    color: #E8EDF6;
}
.is-iniziale > .wb-chart-badge-value { color: var(--wb-warn); }

/* La stessa coppia, in linea nel card-head (dettaglio cliente). */
.wb-eq-tag { display: flex; align-items: baseline; gap: 6px; }
.wb-eq-tag .wb-eq-lbl {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #5F6E86;
}
.wb-eq-tag .wb-eq-val {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--wb-mono);
    white-space: nowrap;
    color: #E8EDF6;
}
.wb-eq-tag.is-oro .wb-eq-lbl { color: #8A7431; }
.wb-eq-tag.is-oro .wb-eq-val { color: var(--wb-warn); }

/* Pill del valore corrente in alto a destra sul grafico (mockup equity):
   puntino della serie, valore, crescita % colorata col segno. */
.wb-chart-pill {
    position: absolute;
    top: 10px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #0D1524;
    border: 1px solid #24406B;
    border-radius: 10px;
}
.wb-chart-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wb-accent);
    flex: none;
}
.wb-chart-pill-val {
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--wb-mono);
    white-space: nowrap;
    color: #E8EDF6;
}
.wb-chart-pill-pct {
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--wb-mono);
    white-space: nowrap;
}

/* Etichette date/ore sotto il grafico: HTML, non SVG (il viewBox stirato
   deformerebbe il testo). Posizionate in assoluto alla stessa frazione
   idx/(n-1) dei punti del path — Chart::asseX scrive left:%; prima e
   ultima si ancorano ai bordi per non uscire dal contenitore. */
.wb-chart-x {
    position: relative;
    height: 24px;
    margin: 4px 0 2px;
    font-family: var(--wb-mono);
    font-size: 11px;
    color: #5F6E86;
}
.wb-chart-x span {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.wb-chart-x span.is-primo  { transform: none; }
.wb-chart-x span.is-ultimo { transform: translateX(-100%); }

.wb-logo {
    /* 100px di resa da un PNG a 200px (retina). L'header ha min-height 78px
       e CRESCE a ~124px per far posto al logo: succede identico nel mockup
       v3 (stesso min-height, stessa immagine). Ombra ORO del rebrand
       A-STAR, non piu' il blu della prima bozza. */
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 2px 14px rgba(255, 198, 26, .3));
}

.wb-wordmark {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.wb-subtitle {
    font-size: 11.5px;
    color: var(--wb-fg-label);
    margin-top: 2px;
}

.wb-divider {
    width: 1px;
    height: 34px;
    background: var(--wb-bd-shell);
}

.wb-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wb-nav a {
    padding: 9px 16px;
    border-radius: var(--wb-radius-btn);
    font-size: 14px;
    font-weight: 500;
    color: var(--wb-fg-muted);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.wb-nav a:hover {
    background: var(--wb-hover);
    color: #C7D3E6;
}

.wb-nav a.is-active {
    background: var(--wb-select);
    color: var(--wb-accent-on);
    font-weight: 700;
}

/* Bottone e casella della tendina: sopra i 768px non esistono. La casella si
   nasconde agli occhi ma NON con display:none, o smette di essere raggiungibile
   da tastiera — e con lei la navigazione del telefono. */
.wb-menu-tog {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.wb-menu-btn { display: none; }

.wb-main {
    padding: 20px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.wb-card {
    background: var(--wb-card);
    border: 1px solid var(--wb-bd-card);
    border-radius: var(--wb-radius-card);
    overflow: hidden;
}

.wb-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--wb-bd-div);
}

.wb-card-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.wb-card-sub {
    font-size: 12px;
    color: var(--wb-fg-label);
}

.wb-card-body {
    padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   Tabelle — griglia, non <table>: header e righe condividono le colonne e la
   larghezza minima, cosi' sotto i 1100px scorrono invece di schiacciarsi.
   -------------------------------------------------------------------------- */

.wb-table-wrap {
    overflow-x: auto;
}

.wb-thead,
.wb-row {
    display: grid;
    gap: 10px;
    align-items: center;
}

.wb-thead {
    padding: 10px 18px;
    background: var(--wb-thead);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
}

.wb-row {
    padding: 11px 18px;
    border-bottom: 1px solid var(--wb-bd-row);
    font-size: 13.5px;
    color: var(--wb-fg-table);
}

.wb-row:hover {
    background: var(--wb-hover);
}

/* Il committente ha chiesto tutte le colonne centrate rispetto alla propria
   intestazione, TRANNE quella del nome che resta a sinistra. */
.wb-thead > *,
.wb-row > * {
    text-align: center;
    min-width: 0;
}

.wb-thead > .wb-col-name,
.wb-row > .wb-col-name {
    text-align: left;
}

.wb-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--wb-fg-label);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Avatar — sei coppie fondo/testo a rotazione
   -------------------------------------------------------------------------- */

.wb-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    flex: none;
}

.wb-av-0 { background: #1B2E4D; color: #8FBBFF; }
.wb-av-1 { background: #2E2340; color: #C6A8F0; }
.wb-av-2 { background: #123231; color: #6FD9C8; }
.wb-av-3 { background: #3A2A18; color: #F0C58A; }
.wb-av-4 { background: #3A1E24; color: #F2A0A6; }
.wb-av-5 { background: #1D3326; color: #8FD9A8; }

/* --------------------------------------------------------------------------
   Badge, pill, bottoni
   -------------------------------------------------------------------------- */

.wb-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    background: var(--wb-badge);
    border: 1px solid var(--wb-bd-card);
    color: var(--wb-fg-label);
    white-space: nowrap;
}

.wb-badge.is-accent {
    background: rgba(27, 111, 234, .16);
    border-color: #2C5FA8;
    color: var(--wb-accent-on);
}

.wb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.wb-pill.is-on  { background: rgba(22, 199, 132, .1); color: var(--wb-pos); }
.wb-pill.is-off { background: var(--wb-bd-shell);     color: #93A2B8; }

.wb-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--wb-radius-btn);
    border: 1px solid var(--wb-bd-card);
    background: transparent;
    color: var(--wb-fg-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}

.wb-btn:hover {
    background: var(--wb-hover);
    border-color: var(--wb-bd-hover);
    color: var(--wb-fg);
}

.wb-btn.is-primary {
    background: var(--wb-accent);
    border-color: var(--wb-accent);
    color: #fff;
}

.wb-btn.is-primary:hover { background: #1a63cf; }

.wb-btn.is-warn {
    background: var(--wb-warn-bg);
    border-color: var(--wb-warn-bd);
    color: var(--wb-warn);
}

.wb-btn.is-danger {
    background: rgba(242, 84, 91, .1);
    border-color: #5A2A2E;
    color: var(--wb-neg);
}

/* Il verde del "riaccendi": is-primary e' il blu dell'azione principale, e su
   una coppia disattiva/riattiva il colore deve dire lo STATO in cui si va, non
   l'importanza del bottone. Stessa costruzione di is-danger, con --wb-pos. */
.wb-btn.is-ok {
    background: rgba(22, 199, 132, .1);
    border-color: #215C48;
    color: var(--wb-pos);
}

.wb-btn.is-sm { padding: 5px 10px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.wb-field { display: flex; flex-direction: column; gap: 6px; }

.wb-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
}

.wb-input,
.wb-select-el,
.wb-textarea {
    padding: 9px 12px;
    border-radius: var(--wb-radius-btn);
    border: 1px solid var(--wb-bd-card);
    background: var(--wb-hover);
    color: var(--wb-fg);
    font-family: inherit;
    font-size: 13.5px;
    width: 100%;
    box-sizing: border-box;
}

.wb-input:focus,
.wb-select-el:focus,
.wb-textarea:focus {
    outline: none;
    border-color: var(--wb-bd-select);
    background: var(--wb-select);
}

.wb-textarea { resize: vertical; min-height: 68px; }

/* --------------------------------------------------------------------------
   Avvisi
   -------------------------------------------------------------------------- */

.wb-alert {
    padding: 11px 16px;
    border-radius: var(--wb-radius-btn);
    font-size: 13.5px;
    border: 1px solid;
}

.wb-alert.is-ok {
    background: rgba(22, 199, 132, .08);
    border-color: #1B5A40;
    color: var(--wb-pos);
}

.wb-alert.is-warn {
    background: var(--wb-warn-bg);
    border-color: var(--wb-warn-bd);
    color: var(--wb-warn);
}

.wb-alert.is-err {
    background: rgba(242, 84, 91, .09);
    border-color: #5A2A2E;
    color: var(--wb-neg);
}

.wb-alert.is-info {
    background: #0D1524;
    border-color: var(--wb-bd-shell);
    color: var(--wb-fg-2);
}

/* --------------------------------------------------------------------------
   Impostazioni (restyle 08/08): menu laterale + tab.
   I nomi .menu-item / .tab-content / .password-strength* / .chat-id-row /
   .email-row / .input-group / .toggle-password sono il CONTRATTO dello
   script inline di settings.php: qui si rivestono coi token wallboard,
   non si rinominano.
   -------------------------------------------------------------------------- */

.wb-settings { display: flex; gap: 16px; align-items: flex-start; }

.wb-settings-menu { width: 232px; flex: none; padding: 12px 10px; }
.wb-settings-content { flex: 1; min-width: 0; }

.wb-settings .menu-group { margin-bottom: 14px; }
.wb-settings .menu-group-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
    padding: 4px 10px 6px;
}
.wb-settings .menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 2px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--wb-fg-2);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.wb-settings .menu-item:hover { background: var(--wb-hover); color: var(--wb-fg); }
.wb-settings .menu-item.active { background: var(--wb-accent); color: #fff; }

.wb-settings .tab-content { display: none; }
.wb-settings .tab-content.active { display: flex; flex-direction: column; gap: 14px; }

.password-strength {
    height: 4px;
    background: var(--wb-bd-shell);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.password-strength-bar { height: 100%; width: 0; transition: all .3s; }
.strength-weak   { background: var(--wb-neg);  width: 33%; }
.strength-medium { background: var(--wb-warn); width: 66%; }
.strength-strong { background: var(--wb-pos);  width: 100%; }

.input-group { position: relative; }
.input-group .wb-input { width: 100%; }
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--wb-fg-muted);
    cursor: pointer;
    font-size: 15px;
}
.toggle-password:hover { color: var(--wb-fg); }

.chat-id-row, .email-row { background: #0A0F19; border-radius: 8px; }

.wb-settings code {
    background: #0A0F19;
    border: 1px solid var(--wb-bd-shell);
    padding: 2px 6px;
    border-radius: 6px;
    font-family: var(--wb-mono);
    font-size: 12px;
}

.wb-settings .danger-zone {
    border: 1px solid var(--wb-warn-bd);
    background: var(--wb-warn-bg);
    border-radius: 10px;
    padding: 14px 16px;
}

@media (max-width: 900px) {
    .wb-settings { flex-direction: column; }
    .wb-settings-menu { width: 100%; }
}

/* --------------------------------------------------------------------------
   Modale
   -------------------------------------------------------------------------- */

.wb-modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 11, .74);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 90;
}

.wb-modal.is-open { display: flex; }

.wb-modal-box {
    background: var(--wb-card);
    border: 1px solid var(--wb-bd-card);
    border-radius: var(--wb-radius-card);
    box-shadow: var(--wb-shadow);
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Schede KPI
   -------------------------------------------------------------------------- */

.wb-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 16px;
    overflow-x: auto;
}

/* Variante a riempimento: il dettaglio conto ha SEI KPI, non cinque. Era uno
   stile inline, che vinceva su tutto — media query comprese — e teneva le sei
   schede a piena larghezza sul telefono. */
.wb-kpis.is-auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.wb-kpi {
    background: var(--wb-card);
    border: 1px solid var(--wb-bd-card);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wb-kpi.is-alarm {
    background: linear-gradient(160deg, #1E1113, #0E131D 65%);
    border-color: #3A2126;
}

.wb-kpi-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
}

.wb-kpi.is-alarm .wb-kpi-label { color: #C9909A; }

.wb-kpi-value {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
    margin-top: 14px;
    line-height: 1;
}

.wb-kpi-unit  { font-size: 18px; font-weight: 600; color: var(--wb-fg-label); }
.wb-kpi-sub   { font-size: 13px; font-weight: 700; margin-top: 11px; }

/* --------------------------------------------------------------------------
   Layout a due colonne (contenuto principale + colonna di destra)
   -------------------------------------------------------------------------- */

.wb-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
}

/* Variante a meta' esatte: per le coppie di pari peso (Stato flotta +
   Health Check in fondo alla home), coi bordi esterni che combaciano con
   le schede sopra e le DUE ALTEZZE PARI (stretch): la card corta non resta
   sospesa accanto a quella lunga. */
.wb-split.is-pari {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
.wb-split.is-pari > .wb-card { display: flex; flex-direction: column; }
.wb-split.is-pari > .wb-card > .wb-card-body { flex: 1 1 auto; }

/* La variante .is-pari va NOMINATA: con due classi batte per specificita' il
   .wb-split nudo, e fino al 13/08 Stato flotta e Health Check restavano
   affiancati a qualunque larghezza — anche su telefono. */
@media (max-width: 1100px) {
    .wb-kpis { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
    .wb-split,
    .wb-split.is-pari { grid-template-columns: minmax(0, 1fr); }
}

.wb-scroll { overflow-y: auto; }

/* --------------------------------------------------------------------------
   Griglie delle tabelle. Sotto la larghezza minima si SCORRE invece di
   schiacciare le colonne: una cifra tagliata a meta' e' peggio di una barra
   di scorrimento.
   -------------------------------------------------------------------------- */

/* ------------------------------------------- modale impostazioni conto (U5)
   Il box standard e' 460px; il modale del mockup e' largo, a due colonne. */
.wb-modal-box.is-wide {
    max-width: min(1200px, calc(100vw - 40px));
    width: 100%;
}

.wb-mi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.wb-mi-grid > .is-full { grid-column: 1 / -1; }

.wb-mi-card {
    background: var(--wb-thead);
    border: 1px solid var(--wb-bd-card);
    border-radius: 12px;
    padding: 14px 16px;
}

/* Il valore k grande del coefficiente, spento quando lo slider e' bloccato. */
.wb-coef-val {
    font-size: 38px;
    font-weight: 700;
    font-family: var(--wb-mono);
    color: var(--wb-accent-on);
}
.wb-coef-val.is-locked { color: #5F6E86; }

.wb-range {
    width: 100%;
    accent-color: #1B6FEA;
}
.wb-range:disabled { opacity: .45; }

.wb-btn.is-locked { opacity: .7; }

/* Conferma della Copia: il bottone lo dice, senza popup. */
.wb-btn.is-copied { border-color: var(--wb-ok, #16C784); color: #16C784; }

/* Righe della lista eventi: dot, testo, doppio fuso a destra. */
.wb-evento {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--wb-bd-card);
    align-items: start;
}
.wb-evento.is-critico {
    border-left: 2px solid #F2545B;
    background: rgba(242, 84, 91, .07);
}
.wb-evento-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4D93FF; margin-top: 5px;
}
.wb-evento.is-critico .wb-evento-dot { background: #F2545B; }

/* La striscia SUBACCOUNT del dettaglio cliente (.wb-substrip, .wb-chip e
   compagni) e' stata tolta il 12/08 insieme alla substrip: i conti e le loro
   autorizzazioni si amministrano in clienti.php, e le regole non avevano piu'
   nessun elemento da vestire. */

/* ------------------------------------------------------ tabella Utenti (U3)
   Otto colonne (Commissioni omessa per decisione di progetto: la definizione
   va unificata con storico.php/fee.xml prima di esporla). Righe padre
   espandibili coi subaccount come righe figlie, nascoste di default. */
.wb-grid-utenti {
    /* "Iscrizione" (portafoglio al giorno di ingresso in dashboard) dall'08/08,
       e la % di P/L oggi dal 12/08 — stava impilata SOTTO il valore in dollari
       ed era illeggibile accanto alle altre colonne.
       I 92px del bottone Sospendi sono andati via col bottone: il comando vive
       in clienti.php e questa pagina e' di sola lettura. Resta la 34px del
       chevron. Dieci colonne, e test_wallboard_data.php le conta. */
    grid-template-columns: 1.7fr repeat(8, 1fr) 34px;
    min-width: 1238px;
}

/* ------------------------------------------------- tabella Utenti (clienti.php)
   Otto colonne: Alias ha la sua, e le ultime tre sono un'azione ciascuna.
   Stava scritta in uno stile INLINE (la costante GRIGLIA_CLIENTI), che vince su
   tutto tranne !important: finche' e' rimasta li', nessuna media query poteva
   toccare questa tabella e restava a 1200px anche sul telefono. */
.wb-grid-clienti {
    /* NOVE colonne, tutte in frazioni (13/08, seconda passata).
       Prima erano "1.7fr 170px repeat(6, 150px)": solo il nome cresceva, e su
       uno schermo largo si prendeva tutto lo spazio in piu' lasciando le altre
       sei ammassate a destra. In frazioni crescono INSIEME, e la tabella resta
       distribuita su tutta la larghezza a qualunque misura.
       I minmax non sono decorativi: sono la larghezza sotto la quale il
       contenuto non ci sta piu' — l'Alias ha dentro un campo e un bottone, le
       tre colonne d'azione hanno bottoni con etichette lunghe. La somma dei
       minimi piu' i gap fa il min-width, e non e' un numero a caso. */
    grid-template-columns:
        minmax(200px, 1.9fr)      /* Utente + conteggio conti  */
        minmax(170px, 1.2fr)      /* Alias: input + Salva      */
        minmax(105px, .9fr)       /* Attivo da                 */
        minmax(110px, .9fr)       /* Tipo conto IBKR           */
        minmax(130px, 1fr)        /* Impostazioni              */
        minmax(130px, 1fr)        /* Stato                     */
        minmax(105px, .9fr)       /* Modifica                  */
        minmax(135px, 1.05fr)     /* Spegni utente             */
        minmax(135px, 1.05fr);    /* Disattiva conto           */
    min-width: 1300px;
}

/* --------------------------------------------------- tabelle di settings.php
   IP bannati e Archivio utenti. Anche loro avevano la griglia scritta inline —
   e' stata la terza volta in un giorno — quindi nessuna media query poteva
   toccarle: su telefono restavano a 760 e 640px di larghezza minima. */
.wb-grid-ban {
    grid-template-columns: 1.2fr 1fr 1.2fr .9fr .8fr 110px;
    min-width: 760px;
}
.wb-grid-archivio {
    grid-template-columns: 1.2fr 1.4fr 1fr 130px;
    min-width: 640px;
}

/* Il contenitore del P/L di oggi porta data-pl-live e data-premio, che il JS
   usa come ancora per trovare le due celle figlie. `display: contents` lo
   toglie dal flusso senza toglierlo dal DOM: dollari e percentuale diventano
   due celle della griglia, e wallboard-live.js continua a cercarle dentro
   [data-pl-live] come ha sempre fatto. Senza questo, separare le due colonne
   avrebbe richiesto di cambiare anche il modo in cui il JS le trova. */
.wb-cella-pl-oggi { display: contents; }

/* La freccetta che apre il dettaglio. Era uno stile inline sulla <a>, e inline
   batte le media query: sul telefono restava a 16px in fondo alla scheda invece
   di salire accanto al nome. */
.wb-chevron {
    text-align: center;
    font-size: 16px;
}

.wb-caret {
    width: 14px;
    flex: none;
    text-align: center;
    font-size: 9px;
    color: #5F6E86;
}

/* La riga e' display:grid: l'attributo hidden da solo non basta a spegnerla. */
.wb-row[hidden] { display: none; }

.wb-row.is-toggle { cursor: pointer; }

.wb-subrow { background: #0A0F19; }

.wb-branch {
    width: 26px;
    flex: none;
    color: #2B384C;
    font-size: 13px;
    line-height: 1;
}

.wb-badge.is-gold {
    background: #171205;
    color: var(--wb-warn);
    border: 1px solid #4A3A10;
}

/* La % del P/L di oggi sul premio. Classe sua e non .wb-label-sm: quella
   arriva dopo nel foglio e col colore delle etichette spegnerebbe il
   verde/rosso di .wb-pos/.wb-neg.
   Dal 12/08 e' una colonna, non piu' una riga sotto il valore in dollari:
   niente rientro dall'alto e stessa taglia delle altre celle numeriche, o
   sembrerebbe una nota a margine di una colonna che non le appartiene. */
.wb-pct-premio { font-weight: 700; }

/* Marcatore "lordo" accanto al P/L di una riga le cui commissioni non sono
   ancora arrivate. Piccolo e spento: e' un'avvertenza, non un dato — ma deve
   esserci, perche' l'intestazione della colonna dice "netto comm." e su quella
   riga non e' ancora vero. */
.wb-lordo {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .55;
}

/* --------------------------------------------------------------------------
   Storico trade (mockup 08/08, fedele: contenuto, distanze, font, grandezze,
   allineamento). Famiglia wb-tr-*: la griglia generica wb-thead/wb-row non
   basta piu' — qui gli allineamenti sono per colonna (ORA centrata,
   STRATEGIA a sinistra, P/L a destra) e le taglie sono quelle del mock.
   -------------------------------------------------------------------------- */

.wb-tr-grid {
    /* Undici colonne. Dal 12/08 le Commissioni Broker sono l'ULTIMA: stavano
       fra il P/L in dollari e la sua percentuale, che invece sono lo stesso
       numero in due unita' e si leggono di fila. Le commissioni restano un
       dato importante — sul 06/08 si sono prese il 44% del lordo — ma sono
       di servizio, e in fondo non separano piu' niente.
       Le larghezze seguono le colonne, non le posizioni: .95fr al P/L, .85fr
       alla percentuale, 1fr alle commissioni. */
    grid-template-columns: 96px 1.7fr .8fr 1.1fr 1.1fr .9fr 1.4fr .9fr .95fr .85fr 1fr;
    display: grid;
    gap: 10px;
    align-items: center;
    min-width: 1180px;
    padding: 0 22px;
}
.wb-tr-grid > div { min-width: 0; text-align: center; }
.wb-tr-grid > div:nth-child(2) { text-align: left; }
/* Le colonne del P/L centrate come le altre (richiesta 08/08: "non tutta
   attaccata a destra"), con un filo d'aria dal bordo. */
.wb-tr-grid > div:last-child { padding-right: 10px; }

.wb-tr-head {
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--wb-thead);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
}
/* Nel mock FILL e SLIPPAGE sono in evidenza rispetto alle altre voci. */
.wb-tr-head > div:nth-child(6),
.wb-tr-head > div:nth-child(7) { color: #C7D0DE; }

.wb-tr-day {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 22px 9px;
    min-width: 1080px;
}
.wb-tr-day-data { font-size: 15px; font-weight: 800; color: #E8EDF6; }
/* Qui stava la regola del conteggio "N trade, M senza fill": sparito il 14/08
   col suo markup, e con lui la riga che lo nascondeva sotto i 768px. */
.wb-tr-day-lbl  {
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
}
.wb-tr-day-val  { font-family: var(--wb-mono); font-size: 14px; font-weight: 700; }
.wb-tr-day-pct  { font-family: var(--wb-mono); font-size: 12.5px; font-weight: 700; }
.wb-tr-day-line { flex: 1 1 auto; align-self: center; border-top: 1px solid #1A2231; margin-left: 6px; }

.wb-tr-row {
    padding-top: 14px;
    padding-bottom: 14px;
    background: #10151F;
    border-bottom: 1px solid var(--wb-bd-row);
    font-size: 13.5px;
}
.wb-tr-row:hover { background: var(--wb-hover); }
/* La riga e' display:grid: l'attributo hidden (ricerca) da solo non basta. */
.wb-tr-row[hidden] { display: none; }

.wb-tr-ora   { font-family: var(--wb-mono); font-size: 13.5px; color: #8593A9; }
.wb-tr-nome  { font-size: 14.5px; font-weight: 650; color: #E8EDF6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-tr-sotto { font-family: var(--wb-mono); font-size: 14px; font-weight: 700; color: #E8EDF6; }
.wb-tr-strike{ font-family: var(--wb-mono); font-size: 14px; color: #D7DEE9; }
.wb-tr-mid   { font-family: var(--wb-mono); font-size: 13.5px; color: #8593A9; }
.wb-tr-fill  { font-family: var(--wb-mono); font-size: 14px; font-weight: 700; color: #E8EDF6; }
.wb-tr-slip  { font-family: var(--wb-mono); font-size: 13.5px; font-weight: 700; }
.wb-tr-qty   { font-family: var(--wb-mono); font-size: 13.5px; color: #C6CFDD; }
.wb-tr-pl    { font-family: var(--wb-mono); font-size: 14px; font-weight: 700; }

/* La cella STRATEGIA: badge sigla + nome esteso, allineati a sinistra. */
.wb-tr-strat { display: flex; align-items: center; gap: 10px; }

/* Sigla della strategia: colore per IDENTITA' (fisso per sigla, mai per
   posizione), come i badge del mock. */
.wb-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: var(--wb-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
.wb-tag.is-ic  { background: rgba(27, 111, 234, .16); color: #6EA8FF; }
.wb-tag.is-bps { background: rgba(22, 199, 132, .14); color: var(--wb-pos); }
.wb-tag.is-bcs { background: rgba(242, 84, 91, .14); color: var(--wb-neg); }
.wb-tag.is-spr { background: rgba(22, 199, 132, .14); color: var(--wb-pos); }
.wb-tag.is-sl  { background: rgba(255, 198, 26, .12); color: var(--wb-warn); }
.wb-tag.is-nd  { background: var(--wb-badge); color: var(--wb-fg-label); }

/* Il costo dello slippage accanto al valore in punti. */
.wb-tr-costo {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: var(--wb-mono);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.wb-tr-costo.is-neg { background: rgba(242, 84, 91, .13); color: var(--wb-neg); }
.wb-tr-costo.is-pos { background: rgba(22, 199, 132, .12); color: var(--wb-pos); }

/* I filtri del card-head: chip come nel mock, non bottoni generici. */
.wb-tr-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid #2A3244;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #C6CFDD;
    text-decoration: none;
    white-space: nowrap;
}
.wb-tr-chip:hover { background: var(--wb-hover); }
.wb-tr-chip.is-active { background: #1C3D74; border-color: #2E5EAE; color: #fff; }
.wb-tr-chip.is-sigla { font-family: var(--wb-mono); font-size: 12px; font-weight: 700; }
.wb-tr-chip .wb-tr-chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--wb-fg-muted); flex: none;
}
.wb-tr-chip.is-alarm-on { border-color: #5A2A2E; color: var(--wb-neg); }
.wb-tr-chip.is-alarm-on .wb-tr-chip-dot { background: var(--wb-neg); }

/* Conferma con codice (modello del popup dello storico, richiesta 09/08):
   il codice in oro nel riquadro tratteggiato, le cinque celle sotto. */
.wb-otp-display {
    text-align: center;
    color: var(--wb-warn);
    font-size: 26px;
    letter-spacing: .35em;
    text-indent: .35em;   /* compensa l'ultimo letter-spacing: resta centrato */
    background: #101725;
    border: 1px dashed #4A3A10;
    border-radius: 8px;
    padding: 22px 0;
}
.wb-otp-celle { display: flex; justify-content: center; gap: 10px; }
.wb-otp-cella {
    width: 52px;
    height: 56px;
    text-align: center;
    font-size: 20px;
    background: #101725;
    border: 1px solid var(--wb-bd-shell);
    border-radius: 10px;
    color: var(--wb-fg);
}
.wb-otp-cella:focus {
    outline: none;
    border-color: var(--wb-warn);
    box-shadow: 0 0 0 2px rgba(255, 198, 26, .25);
}

/* La scheda del P/L mensile in fondo allo storico: una tessera per mese,
   e la fila cresce col calendario. */
.wb-mesi { display: flex; flex-wrap: wrap; gap: 10px; }
.wb-mese {
    min-width: 120px;
    padding: 10px 14px;
    background: #0A0F19;
    border: 1px solid var(--wb-bd-shell);
    border-radius: 10px;
}
.wb-mese-nome {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wb-fg-label);
    margin-bottom: 4px;
}
.wb-mese-pct { font-size: 17px; font-weight: 700; }
.wb-mese-val { font-size: 12px; margin-top: 2px; }

/* La ricerca con la lente, come nel mock. */
.wb-tr-search { position: relative; }
.wb-tr-search svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; stroke: var(--wb-fg-muted); fill: none;
    pointer-events: none;
}
.wb-tr-search .wb-input { padding: 7px 12px 7px 33px; width: 210px; border-radius: 10px; }

a.wb-row {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Pallini di stato
   -------------------------------------------------------------------------- */

.wb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--wb-fg-label);
    display: inline-block;
}

.wb-dot.is-on       { background: var(--wb-pos);  box-shadow: 0 0 0 0 rgba(22,199,132,.5); animation: pulseRing 2.4s infinite; }
.wb-dot.is-warn     { background: var(--wb-warn); animation: pulseRing 1.4s infinite; }
.wb-dot.is-standby  { background: var(--wb-accent-lt); }
.wb-dot.is-off      { background: var(--wb-fg-label); }
.wb-dot.is-err      { background: var(--wb-neg); }
.wb-dot.is-live     { background: var(--wb-pos); animation: blink 1.6s infinite; }

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(22, 199, 132, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(22, 199, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 199, 132, 0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* Chi preferisce meno movimento non deve subirlo: sono indicatori, non decori. */
@media (prefers-reduced-motion: reduce) {
    .wb-dot { animation: none !important; }
}

/* Il blocco mobile @768 stava QUI fino al 13/08 ed e' stato spostato in fondo
   al foglio: tre delle sue regole non si applicavano perche' .wb-seg a (piu'
   sotto), .wb-chart (piu' sotto) e .wb-split.is-pari le ribattevano per ordine
   o per specificita'. Un media query non vince da solo: pesa come una regola
   qualsiasi. */

/* --------------------------------------------------------------------------
   Riga della flotta
   -------------------------------------------------------------------------- */

.wb-fleet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 20px laterali come il wb-card-body: i contenuti delle due card
       affiancate in fondo alla home partono dallo stesso filo. */
    padding: 9px 20px;
    border-bottom: 1px solid var(--wb-bd-row);
}

.wb-fleet-row:hover { background: var(--wb-hover); }

.wb-fleet-row.is-master {
    background: linear-gradient(90deg, rgba(27, 111, 234, .11), rgba(27, 111, 234, 0) 62%);
    border-left: 2px solid var(--wb-accent);
}

/* --------------------------------------------------------------------------
   Feed dei trade
   -------------------------------------------------------------------------- */

.wb-feed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    font-size: 11.5px;
}

.wb-feed-row.is-alarm { background: rgba(242, 84, 91, .045); }

.wb-side {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--wb-fg-muted);
    flex: none;
}

.wb-side.is-open { color: var(--wb-pos); }

/* --------------------------------------------------------------------------
   Segmented control dei periodi
   -------------------------------------------------------------------------- */

.wb-seg {
    display: inline-flex;
    background: #0A0E17;
    border: 1px solid var(--wb-bd-shell);
    border-radius: 8px;
    overflow: hidden;
}

.wb-seg a {
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wb-fg-muted);
    text-decoration: none;
}

.wb-seg a.is-active { background: var(--wb-accent); color: #fff; }
.wb-seg a:hover:not(.is-active) { background: var(--wb-hover); color: var(--wb-fg); }

/* --------------------------------------------------------------------------
   Barre delle metriche
   -------------------------------------------------------------------------- */

.wb-bar {
    height: 4px;
    background: var(--wb-bd-shell);
    border-radius: 2px;
    overflow: hidden;
    margin: 5px 0 3px;
}

.wb-bar > span { display: block; height: 100%; border-radius: 2px; }
.wb-bar > span.is-ok   { background: var(--wb-pos); }
.wb-bar > span.is-warn { background: var(--wb-warn); }

/* --------------------------------------------------------------------------
   Grafico
   -------------------------------------------------------------------------- */

.wb-chart {
    width: 100%;
    height: 210px;
    display: block;
}

.wb-chart-sm { height: 130px; }

/* --------------------------------------------------------------------------
   Utility minime
   -------------------------------------------------------------------------- */

.wb-warn-t { color: var(--wb-warn); }

.wb-pos   { color: var(--wb-pos); }
.wb-neg   { color: var(--wb-neg); }
.wb-muted { color: var(--wb-fg-muted); }
.wb-label-sm { font-size: 11px; color: var(--wb-fg-label); }
.wb-stack { display: flex; flex-direction: column; gap: 14px; }
.wb-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-grow { flex: 1 1 auto; }
.wb-right { margin-left: auto; }

/* ==========================================================================
   Mobile — ULTIMO BLOCCO DEL FOGLIO, e deve restarci.

   Nato l'08/08 come "le tabelle scorrono in orizzontale", riscritto il 13/08
   su richiesta di Emiliano: da telefono i valori si leggono in colonna, non
   trascinando a destra. Stava a meta' foglio e tre delle sue regole erano
   morte — .wb-seg a e .wb-chart ridefinite piu' sotto, .wb-split ribattuta da
   .wb-split.is-pari. Un @media non ha nessun peso in piu': vale l'ordine e la
   specificita' di sempre. Se qualcuno aggiunge regole DOPO questo blocco, le
   schede tornano tabelle e nessuno se ne accorge finche' non apre il telefono.

   Il .wb-substrip che stava qui e' sparito col markup, il 12/08.
   ========================================================================== */
@media (max-width: 768px) {

    /* ---------------------------------------------------------- involucro */
    .wb-main { padding: 12px 12px 18px; gap: 12px; }
    .wb-card-head { padding: 12px 14px; }
    .wb-card-body { padding: 12px 14px; }
    /* .is-auto va nominata, come .wb-split.is-pari: due classi battono una. */
    .wb-kpis,
    .wb-kpis.is-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .wb-kpi-value { font-size: 19px; }
    .wb-chart { height: 170px; }
    .wb-chart-pill { top: 6px; padding: 5px 9px; }
    .wb-chart-pill-val { font-size: 12px; }
    .wb-mese { flex: 1 1 calc(50% - 10px); min-width: 0; }
    .wb-modal-box { max-width: calc(100vw - 24px); }
    .wb-mi-grid { grid-template-columns: minmax(0, 1fr); }

    /* Stato flotta e Health Check uno SOTTO l'altro: .is-pari va nominata,
       o vince per specificita' e restano affiancati. */
    .wb-split,
    .wb-split.is-pari { grid-template-columns: minmax(0, 1fr); }

    /* ------------------------------------------- navigazione, in verticale */
    .wb-header { padding: 10px 14px; min-height: 0; gap: 8px 12px; }
    /* 44px invece di 100: il logo da solo si prendeva un quarto di schermo. */
    .wb-logo { width: 44px; height: 44px; }
    .wb-header > .wb-divider { display: none; }

    /* ---- il menu diventa una tendina, a destra del wordmark (13/08) ----
       Il bottone chiude la prima riga dell'intestazione (margin-left:auto), la
       tendina si apre sotto e occupa tutta la larghezza. Chiusa di default:
       quattro voci a tutta pagina erano mezzo schermo prima dei numeri. */
    .wb-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-left: auto;
        padding: 10px 14px;
        border: 1px solid var(--wb-bd-hover);
        border-radius: var(--wb-radius-btn);
        background: var(--wb-badge);
        font-size: 14px;
        font-weight: 600;
        color: var(--wb-fg-2);
        cursor: pointer;
        user-select: none;
    }
    /* Le tre righe dell'hamburger, senza immagini ne' font di icone. */
    .wb-menu-icona {
        width: 16px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    }
    .wb-menu-tog:checked ~ .wb-menu-btn {
        border-color: var(--wb-bd-select);
        background: var(--wb-select);
        color: var(--wb-accent-on);
    }

    .wb-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 2px;
        padding: 6px;
        border: 1px solid var(--wb-bd-shell);
        border-radius: 12px;
        background: var(--wb-card);
    }
    .wb-menu-tog:checked ~ .wb-nav { display: flex; }
    /* 12px di padding = 43px di altezza: la soglia del dito, non dei 36px
       che bastavano al puntatore. */
    .wb-nav a { padding: 12px 14px; font-size: 15px; }

    /* Senza questo, orologio, pill dei mercati ed Esci restano schiacciati a
       destra su una colonna di trenta pixel. */
    .wb-header > .wb-right { margin-left: 0; width: 100%; }

    /* Periodi e chip filtro: a capo, mai in scorrimento. */
    .wb-card-head > div.wb-right { margin-left: 0; width: 100%; }
    .wb-seg { display: flex; flex-wrap: wrap; width: 100%; }
    .wb-seg a { flex: 1 1 auto; text-align: center; padding: 8px 10px; font-size: 12px; }
    .wb-tr-search { display: block; width: 100%; }
    .wb-tr-search .wb-input { width: 100%; }

    /* ================================================ tabelle a schede
       TUTTO quello che segue e' agganciato a #tabella-utenti / #tabella-trade,
       e non e' pignoleria: e' la condizione perche' CSS e markup si possano
       spedire in momenti diversi.

       Le etichette vivono nel markup (data-label). Se questo foglio arriva in
       produzione PRIMA di index.php e cliente.php, con un selettore di sola
       classe le righe diventerebbero schede senza nomi: colonne di numeri muti,
       peggio della tabella che scorre. Con l'id, finche' il markup non c'e'
       queste regole non trovano niente e la pagina resta esattamente com'era.
       Il 13/08 e' servito davvero — la produzione era indietro di un refactor e
       le due pagine non si potevano spedire.

       L'id serve anche a NON toccare le tabelle di settings.php e clienti.php,
       che hanno min-width proprie e devono continuare a scorrere: azzerare
       overflow-x a tutte avrebbe fatto traboccare la pagina in orizzontale. */
    #tabella-utenti,
    #tabella-clienti,
    #tabella-ban,
    #tabella-archivio,
    #tabella-trade { overflow-x: visible; }

    /* L'intestazione non ha senso quando ogni cella porta la sua etichetta. */
    #tabella-utenti .wb-thead,
    #tabella-clienti .wb-thead,
    #tabella-ban .wb-thead,
    #tabella-archivio .wb-thead,
    #tabella-trade .wb-tr-head { display: none; }

    #tabella-utenti .wb-row,
    #tabella-clienti .wb-row,
    #tabella-ban .wb-row,
    #tabella-archivio .wb-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 10px;
        min-width: 0;
        padding: 12px 14px;
    }

    /* Lo storico su telefono, seconda passata (13/08): resta la SIGLA della
       strategia a sinistra e la sua percentuale a destra, una riga per trade.
       Ora, sottostante, strike, MID, contratti e P/L in dollari si leggono dal
       computer. La riga della giornata porta data, P/L $ e P/L % fra parentesi.
       Due elementi su una riga: basta un flex con spazio in mezzo. */
    #tabella-trade .wb-tr-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        padding: 9px 14px 9px 22px;
    }

    /* RIASSERITO, e non e' ridondante: [hidden] su una riga display:flex non
       fa niente da solo, e le regole originali (piu' su nel foglio) le batte
       l'id, che pesa piu' di qualunque classe. Senza queste due righe si
       riaprono da sole le sotto-righe dei conti e ricompaiono le righe che la
       ricerca filtra. */
    #tabella-utenti .wb-row[hidden],
    #tabella-clienti .wb-row[hidden],
    #tabella-ban .wb-row[hidden],
    #tabella-archivio .wb-row[hidden],
    #tabella-trade .wb-tr-row[hidden] { display: none; }

    /* Il contenitore del P/L di oggi torna un blocco: display:contents serviva
       a promuovere i due figli a celle della griglia, e la griglia non c'e'
       piu'. I figli portano le etichette da soli. */
    #tabella-utenti .wb-cella-pl-oggi { display: block; width: 100%; }

    /* Testata della scheda Utenti: nome a sinistra e chevron a destra, sulla
       STESSA riga (13/08). Prima "Dettaglio ›" era una riga a se': una in piu'
       da scorrere per una freccia. */
    #tabella-utenti .wb-row > *,
    #tabella-clienti .wb-row > *,
    #tabella-ban .wb-row > *,
    #tabella-archivio .wb-row > * { flex: 1 1 100%; }
    /* order: il chevron e' l'ULTIMO figlio nel DOM, quindi senza riordino
       finisce in coda alla scheda. Qui sale accanto al nome. E flex-basis 0 sul
       nome, non auto: con auto la sua base e' la larghezza del contenuto, il
       chevron non ci sta e va a capo lo stesso. */
    #tabella-utenti .wb-row > .wb-col-name,
    #tabella-clienti .wb-row > .wb-col-name {
        order: -2;
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 4px;
    }
    #tabella-utenti .wb-row > .wb-chevron {
        order: -1;
        flex: 0 0 auto;
        margin-bottom: 4px;
        padding: 0 2px 0 12px;
        font-size: 26px;
        line-height: 1;
        color: var(--wb-accent-on);
    }
    #tabella-utenti .wb-subrow,
    #tabella-clienti .wb-subrow { border-left: 2px solid var(--wb-bd-hover); }

    /* Quello che su telefono non si legge. Il nome esteso della strategia esce
       perche' "BPS" dice la stessa cosa di "Bull Put Spread" in un quinto dello
       spazio; il resto perche' e' controllo dell'esecuzione, e si fa seduti. */
    #tabella-trade .wb-tr-nome,
    #tabella-trade .wb-tr-row > .wb-tr-ora,
    #tabella-trade .wb-tr-row > .wb-tr-sotto,
    #tabella-trade .wb-tr-row > .wb-tr-strike,
    #tabella-trade .wb-tr-row > .wb-tr-mid,
    #tabella-trade .wb-tr-row > .wb-tr-qty,
    /* .wb-tr-row ci va per forza: senza, questo selettore pesa quanto
       "#tabella-trade [data-label]" piu' sotto, che dice display:flex, e per
       ordine vince quello. Provato: le celle "nascoste" restavano in pagina e
       si sovrapponevano al badge del conto. */
    #tabella-trade .wb-tr-row [data-label="P/L netto"] { display: none; }

    /* Restano la sigla a sinistra e la percentuale a destra. La percentuale e'
       l'ALTRO .wb-tr-pl: il primo, quello in dollari, e' nascosto qui sopra per
       etichetta — le due celle condividono la classe e solo data-label le
       distingue. */
    #tabella-trade .wb-tr-row > .wb-tr-strat { flex: 0 1 auto; min-width: 0; }
    #tabella-trade .wb-tr-row [data-label="P/L %"] {
        flex: 0 0 auto;
        display: block;
        padding: 0;
        border-top: 0;
        text-align: right;
        font-size: 14px;
    }
    /* L'etichetta "P/L %" non si stampa: la riga ha due valori e si capisce. */
    #tabella-trade .wb-tr-row [data-label="P/L %"]::before { content: none; }

    /* La riga della giornata: data, P/L in dollari, P/L in percentuale FRA
       PARENTESI (richiesta 13/08). Le parentesi si mettono qui e non nel
       markup: su desktop la percentuale sta in colonna e non ne ha bisogno. */
    #tabella-trade .wb-tr-day {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 16px 14px 7px;
    }
    #tabella-trade .wb-tr-day-line,
    #tabella-trade .wb-tr-day-lbl { display: none; }
    #tabella-trade .wb-tr-day-data { font-size: 13.5px; }
    #tabella-trade .wb-tr-day-val  { margin-left: auto; }
    #tabella-trade .wb-tr-day-pct::before { content: '('; }
    #tabella-trade .wb-tr-day-pct::after  { content: ')'; }

    /* La cella: etichetta a sinistra, valore a destra, su una riga sola. */
    #tabella-utenti [data-label],
    #tabella-clienti [data-label],
    #tabella-ban [data-label],
    #tabella-archivio [data-label],
    #tabella-trade [data-label] {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 10px;
        padding: 6px 0;
        border-top: 1px solid var(--wb-bd-row);
        text-align: right;
    }
    #tabella-utenti [data-label]::before,
    #tabella-clienti [data-label]::before,
    #tabella-ban [data-label]::before,
    #tabella-archivio [data-label]::before,
    #tabella-trade [data-label]::before {
        content: attr(data-label);
        /* margin-right auto invece di justify-content: vince anche sul
           justify-content:center scritto inline nella cella Bot. */
        margin-right: auto;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--wb-fg-label);
        white-space: nowrap;
    }

    /* Le colonne che su telefono non si mostrano (semplificazione decisa il
       13/08). Restano nel markup e su desktop: qui si nascondono, non si
       cancellano.
       Il selettore ripete [data-label] apposta: senza, .wb-m-off perde contro
       la regola qui sopra, che dice display:flex ed e' piu' specifica.
       Provato: le celle nascoste si vedevano lo stesso, con l'etichetta e
       senza il valore. Non e' ridondanza, e' aritmetica. */
    #tabella-utenti [data-label].wb-m-off,
    #tabella-clienti [data-label].wb-m-off,
    #tabella-trade [data-label].wb-m-off { display: none; }

    /* ====================================== le KPI: ordine e sfoltimento
       Terza passata dal telefono (13/08). Due richieste che si tengono:
       "P/L totale" e "Bot attivi" si scambiano, e Max drawdown esce. Con
       cinque card in due colonne l'ultima restava orfana; con quattro le
       due file sono piene.

       L'`order` e' su TUTTE e quattro, non solo sulle due che si scambiano:
       gli ex aequo si ordinano per posizione nel DOM, quindi spostarne due
       sole darebbe "Bot, P/L oggi, Patrimonio, P/L totale" — cioe' non lo
       scambio chiesto. E una card aggiunta domani senza classe ha order 0 e
       finisce PRIMA di tutte, dove si vede subito.

       Si usa l'ordine visuale e non lo spostamento del markup perche' la
       richiesta vale SOLO per il telefono: su desktop le cinque card sono
       dove sono sempre state, e nessuno le ha toccate. */
    .wb-kpi.is-kpi-ploggi { order: 1; }
    .wb-kpi.is-kpi-bot    { order: 2; }
    .wb-kpi.is-kpi-patr   { order: 3; }
    .wb-kpi.is-kpi-pltot  { order: 4; }

    /* Max drawdown (home e scheda cliente) e Slippage medio (scheda cliente):
       nascoste, non tolte. Restano nel markup e su desktop — sono controllo
       dell'esecuzione, e si guarda seduti. Due classi perche' battano
       .wb-kpi, che pesa quanto una sola. */
    .wb-kpi.is-kpi-dd,
    .wb-kpi.is-kpi-slip { display: none; }

    /* =========================== gli utenti diventano riquadri separati
       Prima erano righe consecutive dentro un contenitore solo, separate da
       un filetto: si leggevano come un elenco continuo, e con sei valori a
       testa non si capiva dove finiva un conto e cominciava il successivo.
       Ora ogni scheda e' un riquadro suo, con l'aria intorno.

       Solo #tabella-utenti: clienti, ban e archivio restano come sono. */
    #tabella-utenti { padding: 12px 12px 2px; }

    #tabella-utenti .wb-row {
        gap: 0;
        margin: 0 0 10px;
        /* Niente padding in alto: la testata col nome arriva fino al bordo. */
        padding: 0 14px 10px;
        border: 1px solid var(--wb-bd-card);
        border-radius: 12px;
        background: var(--wb-app);
    }
    /* Il fondo di :hover e' scritto piu' su nel foglio e qui vincerebbe per
       ordine, schiarendo la scheda che il dito ha appena sfiorato e lasciandola
       cosi' finche' non se ne tocca un'altra. Al dito l'hover non serve. */
    #tabella-utenti .wb-row:hover { background: var(--wb-app); }

    /* Il conto sta DENTRO il suo utente, non accanto: rientrato e piu' stretto,
       col filetto di parentela che aveva gia'. */
    #tabella-utenti .wb-subrow {
        margin-left: 14px;
        border-left: 2px solid var(--wb-bd-select);
    }

    /* ===================== la testata della scheda: nome conto in evidenza
       Nome e chevron sono due figli distinti (order -2 e -1), non un elemento
       solo: il fondo continuo si ottiene dandolo a entrambi e chiudendo il
       buco fra loro con gap:0 qui sopra. I margini negativi valgono il padding
       laterale della scheda, cosi' la banda arriva ai bordi invece di
       fermarsi 14px prima. */
    #tabella-utenti .wb-row > .wb-col-name,
    #tabella-utenti .wb-row > .wb-chevron {
        /* align-self: stretch NON e' ornamentale, ed e' il difetto che Emiliano
           ha visto il 13/08 notte. La riga e' `align-items: center`, quindi ogni
           figlio e' alto quanto il suo contenuto e viene centrato: la cella del
           nome ne ha due (nome e numero di conto) e misura 55px, la freccia una
           sola e ne misura 49. Stesso identico colore di fondo — misurato,
           rgb(19,26,38) su entrambe — ma sopra e sotto la freccia restavano due
           strisce da 3px del fondo della scheda, e la banda sembrava di due
           tinte. Stirandole entrambe la banda torna una. */
        align-self: stretch;
        margin-bottom: 10px;
        padding-top: 11px;
        padding-bottom: 11px;
        border-bottom: 1px solid var(--wb-bd-card);
        background: var(--wb-badge);
    }
    /* E ora che la sua banda e' alta quanto quella del nome, il "›" va centrato
       dentro: senza, resterebbe appeso in alto nel riquadro stirato. */
    #tabella-utenti .wb-row > .wb-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #tabella-utenti .wb-row > .wb-col-name {
        margin-left: -14px;
        padding-left: 14px;
        /* 11px e non 12: dentro un bordo da 1px, o l'angolo si sdoppia. */
        border-top-left-radius: 11px;
    }
    #tabella-utenti .wb-row > .wb-chevron {
        margin-right: -14px;
        padding-right: 14px;
        border-top-right-radius: 11px;
    }
    /* La sotto-riga ha il filetto a sinistra: li' l'angolo tondo non c'e'. */
    #tabella-utenti .wb-subrow > .wb-col-name { border-top-left-radius: 0; }

    /* ============================ curva equity: i due valori sul loro punto
       "Iniziale" e "Finale" stavano negli ANGOLI del riquadro — in basso a
       sinistra e in alto a destra — cioe' a una quota che con la curva non
       c'entrava niente. Ora si posano sul punto che rappresentano.

       Le due quote le calcola il server (Chart::quoteEstremi) e le scrive sul
       .wb-chart-wrap in percentuale, perche' il viewBox e' stirato
       (preserveAspectRatio="none") e una percentuale resta vera a qualunque
       altezza: 210px su desktop, 170 qui, 190 di viewBox nella scheda cliente.

       I valori di ripiego sono gli angoli di prima: se il markup arrivasse in
       produzione senza il CSS o viceversa, i riquadri restano dov'erano invece
       di finire in un posto a caso.

       Il clamp e' un guardrail, non un margine di cortesia, e va tenuto
       PICCOLO: a 20px spostava le etichette di 10px agli estremi — misurato a
       video, punto a 160,3px ed etichetta a 150. Cioe' faceva esattamente il
       contrario di quello che e' stato chiesto, e a occhio sembrava giusto.

       4px basta perche' la curva ai bordi non ci arriva mai: area() lascia 12
       unita' di viewBox sopra e sotto, che a 170px di resa sono ~9,7px. Il
       clamp quindi non morde mai nella geometria vera, e resta solo per il
       caso degenere di un grafico alto quanto l'etichetta. */
    .wb-chart-wrap {
        --wb-y-ini: 100%;
        --wb-y-fin: 0%;
        --wb-y-pad: 4px;
    }
    .wb-chart-wrap > .wb-chart-badge.is-iniziale {
        top: clamp(var(--wb-y-pad), var(--wb-y-ini), calc(100% - var(--wb-y-pad)));
        bottom: auto;
        transform: translateY(-50%);
    }
    .wb-chart-wrap > .wb-chart-pill {
        top: clamp(var(--wb-y-pad), var(--wb-y-fin), calc(100% - var(--wb-y-pad)));
        transform: translateY(-50%);
    }

    /* ============ pagina Utenti: nome, stato e interruttore sulla stessa riga
       Richiesta del 13/08 notte. Prima l'interruttore stava su una riga sua, con
       l'etichetta "SPEGNI UTENTE" a sinistra e il bottone a destra: tre righe per
       dire una cosa sola. Ora i tre pezzi si leggono insieme.

       Lo stato NON prende un order proprio: pareggia con .wb-col-name (-2, dalla
       regola condivisa piu' su) e fra pari decide l'ordine del DOM, dove il nome
       viene prima. Un order suo sarebbe un numero in piu' da tenere allineato
       ogni volta che si tocca la riga. */
    /* Il nome su UNA riga. Senza nowrap, a 390px i tre pezzi non ci stanno e la
       cella del nome — che e' un flex a capo — impilava avatar, nome e badge uno
       sotto l'altro mentre pill e bottone restavano a destra: allineati sì, ma
       illeggibili. Con nowrap il nome accorcia invece di andare a capo. */
    #tabella-clienti .wb-row > .wb-col-name {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    /* Pill e bottone piu' magri: sono i due che rubano la larghezza al nome, e
       qui la gerarchia e' il nome per primo. */
    #tabella-clienti .wb-row .wb-pill { padding: 3px 7px; font-size: 10px; }
    #tabella-clienti .wb-row [data-label="Spegni utente"] .wb-btn,
    #tabella-clienti .wb-row [data-label="Disattiva conto"] .wb-btn {
        padding: 6px 9px;
        font-size: 12px;
    }

    #tabella-clienti .wb-row > .wb-cella-stato {
        order: -2;
        flex: 0 0 auto;
        margin-bottom: 4px;
    }
    #tabella-clienti .wb-row > [data-label="Spegni utente"],
    #tabella-clienti .wb-row > [data-label="Disattiva conto"] {
        order: -1;
        flex: 0 0 auto;
        margin-bottom: 4px;
        padding: 0 0 0 10px;
        /* Niente filetto: qui la cella non e' piu' una riga della scheda, e la
           linea la taglierebbe a meta' fra il nome e il bottone. */
        border-top: 0;
    }
    /* L'etichetta non si stampa: il bottone dice gia' "Spegni utente". Stampata
       sarebbe la stessa parola due volte, una sopra l'altra. */
    #tabella-clienti .wb-row > [data-label="Spegni utente"]::before,
    #tabella-clienti .wb-row > [data-label="Disattiva conto"]::before { content: none; }

    /* ================= storico trade: via il "—" solo, sotto la percentuale
       La riga del trade sul telefono porta due cose: la sigla a sinistra e la
       percentuale a destra. Quando la percentuale non c'e' — un'apertura, o una
       chiusura senza premio noto — quel trattino resta da solo in fondo e non
       dice niente a nessuno. Su desktop invece resta: li' e' una colonna, e una
       cella vuota sposterebbe la lettura di tutte le altre. */
    #tabella-trade .wb-tr-row [data-label="P/L %"].is-vuoto { display: none; }
}