/* ============================================================
   AIMON RESPONSIVE — comportamento mobile centralizzato
   File: static/css/aimon-responsive.css
   Va caricato PER ULTIMO (dopo aimon-common, dashboard, footer
   e i css di pagina), così vince sugli override esistenti a
   parità di specificità.

   Contiene SOLO ciò che riguarda l'adattamento mobile:
     - pulsante hamburger
     - sidebar sinistra -> drawer off-canvas
     - velo (overlay) dietro il drawer
     - reset dei margini del contenuto sotto il breakpoint

   Breakpoint standard del progetto: 1200 / 992 / 576.
   Il passaggio a drawer avviene a 992px.

   Dipende da --aimon-header-h, impostata da aimon-drawer.js
   (misura l'altezza reale dell'header). Fallback 73px.
   ============================================================ */


/* ============================================================
   1. HAMBURGER — nascosto su desktop, visibile <= 992px
   ============================================================ */
.aimon-menu-toggle {
    display: none;                 /* mostrato solo in mobile (sotto) */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 0.25rem;
    background: transparent;
    border: 1px solid var(--aimon-border, #e2e8f0);
    border-radius: 10px;
    color: var(--aimon-primary, #735de1);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast, .15s) ease;
    flex-shrink: 0;
}
.aimon-menu-toggle:hover,
.aimon-menu-toggle:focus-visible {
    background: var(--surface-sunken, #f1f5f9);
    outline: none;
}


/* ============================================================
   1b. LENTE RICERCA — nascosta su desktop, visibile <= 992px
   ============================================================ */
.aimon-search-toggle {
    display: none;                 /* mostrata solo in mobile (sotto) */
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(115, 93, 225, 0.12);        /* viola chiaro tenue */
    border: 1px solid rgba(115, 93, 225, 0.30);
    border-radius: 10px;
    color: var(--aimon-primary, #735de1);        /* icona viola */
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast, .15s) ease;
    flex-shrink: 0;
}
.aimon-search-toggle:hover,
.aimon-search-toggle:focus-visible {
    background: rgba(115, 93, 225, 0.20);
    outline: none;
}


/* ============================================================
   2. OVERLAY (velo) — creato via JS, parte sotto l'header
   ============================================================ */
.aimon-drawer-overlay {
    position: fixed;
    inset: var(--aimon-header-h, 73px) 0 0 0;   /* copre solo sotto l'header */
    background: rgba(35, 28, 78, 0.38);         /* viola scuro, più leggero */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base, .25s) ease,
                visibility var(--dur-base, .25s) ease;
    z-index: 1040;                 /* sotto l'header (1000? no: 1040 > header) */
}
.aimon-drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   3. BREAKPOINT 992px — sidebar sinistra diventa drawer
   Selettori "html body ..." per pareggiare la specificità
   degli override !important in aimon-common.css / footer.css
   e vincere grazie all'ordine di caricamento (questo file
   è l'ultimo).
   ============================================================ */
@media (max-width: 992px) {

    /* ---- CONTENIMENTO ORIZZONTALE -------------------------
       Impedisce che un elemento più largo del viewport allarghi
       la pagina creando scroll orizzontale e fascia vuota a destra. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    html body .aimon-header,
    html body .aimon-main-content,
    html body .header-content {
        max-width: 100vw !important;
    }
    html body .aimon-main-content * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Header: FIXED su mobile. In questo contesto position:sticky
       non resta agganciato in modo affidabile anche con top/parent
       corretti; fixed è indipendente dal contesto di scroll.
       Vetro leggero (trasparenza + blur): con fixed è stabile. */
    html body .aimon-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Hamburger visibile */
    .aimon-menu-toggle { display: inline-flex; }

    /* Lente visibile; barra di ricerca nascosta finché non si apre */
    .aimon-search-toggle { display: inline-flex; }
    html body .header-search { display: none !important; }

    /* Logo immagine ridotto su mobile */
    html body .aimon-logo-img { height: 34px !important; }

    /* Header compatto: su schermi stretti lo username testuale
       spinge i controlli fuori dal bordo. Resta la sola icona. */
    html body .user-name-text { display: none !important; }
    html body .user-dropdown-btn {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    html body .header-left { gap: 1rem !important; }
    html body .header-right {
        gap: 0.75rem !important;
        margin-right: 0.5rem !important;   /* stacca dal bordo destro */
    }
    html body .header-content { gap: 0.75rem !important; }

    /* Ricerca aperta: campo a tutta larghezza sotto l'header */
    html body .aimon-header.search-open .header-search {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-width: none;
        margin: 0;
        padding: 0.6rem 1rem;
        background: var(--surface, #ffffff);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        z-index: 1001;
    }
    html body .aimon-header { position: sticky; }  /* contesto per l'absolute */

    /* Contenuto a tutta larghezza + spazio per l'header fixed.
       --aimon-header-h è misurata da aimon-drawer.js. */
    html body .aimon-main-content,
    html body .aimon-main-content.has-right-sidebar {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: var(--aimon-header-h, 73px) !important;
    }

    /* Sidebar destra: sempre nascosta in mobile */
    html body .aimon-right-sidebar {
        display: none !important;
    }

    /* Sidebar sinistra -> pannello off-canvas.
       Sovrascrive width/height/max-height forzati altrove
       (l'override globale usa height: fit-content !important). */
    html body .aimon-sidebar {
        position: fixed !important;
        width: min(80vw, 280px) !important;
        height: calc(100vh - var(--aimon-header-h, 73px)) !important;
        max-height: none !important;
        top: var(--aimon-header-h, 73px) !important;
        left: 0 !important;
        background: var(--surface, #ffffff) !important;   /* bianco pieno */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateX(-100%);
        transition: transform var(--dur-base, .25s) var(--ease-out, cubic-bezier(.16,1,.3,1));
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22) !important;
        border-radius: 0 16px 16px 0 !important;
        z-index: 1050 !important;   /* sopra l'overlay (1040) */
    }

    /* Stato aperto (classe aggiunta dal JS) */
    html body .aimon-sidebar.is-open {
        transform: translateX(0);
    }
}


/* ============================================================
   4. GUARDIA DESKTOP — se si allarga la finestra col drawer
   aperto, forza lo stato chiuso e nasconde il velo
   ============================================================ */
@media (min-width: 993px) {
    .aimon-drawer-overlay { display: none !important; }
    html body .aimon-sidebar.is-open { transform: none; }
}


/* ============================================================
   4b. SEZIONE REGIME — collassa il grid a colonna singola
   Il grid .regime-unified-layout è 1fr 280px: la colonna destra
   fissa a 280px non lascia spazio alla sinistra su schermi
   stretti, causando accavallamento. Su mobile: una colonna.
   ============================================================ */
@media (max-width: 992px) {
    html body .regime-unified-layout {
        grid-template-columns: 1fr !important;
    }
    html body .regime-left-col,
    html body .aimon-rate-panel-unified {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* Regione geografiche: gia gestite, ma garantisco il wrap */
    html body .geo-regions-grid,
    html body .global-categories-grid {
        flex-wrap: wrap !important;
    }
}


/* ============================================================
   4d. LIQUIDITY FLOW MONITOR — contenimento
   Le aree hanno larghezze fisse collassate solo a certi
   breakpoint; il testo narrativo laterale sfora. Forzo la
   colonna singola a piena larghezza e il wrap del testo.
   ============================================================ */
@media (max-width: 992px) {
    html body .liq-columns-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    html body .liq-gauge-area,
    html body .liq-summary-area,
    html body .liq-flows-area,
    html body .liq-context-text {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
    html body .liq-context-text {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}


/* ============================================================
   4e. FOREX — giudizio (Risk-On/Cautela/Neutrale) più piccolo
   ============================================================ */
@media (max-width: 992px) {
    html body .forex-col .asset-regime-label {
        font-size: 0.5rem !important;
        line-height: 1.1 !important;
    }
}


/* Abbreviazioni intestazioni Top Rate: piene su desktop */
.top-asset-pane .hdr-short { display: none; }

/* ============================================================
   4f. TOP RATE — griglia ad aree: nome sopra, badge sotto
   (rank a sx, prezzo a dx). Evita che nome e badge si
   comprimano/sovrappongano su schermi stretti.
   ============================================================ */
@media (max-width: 992px) {
    html body .top-asset-pane .aimon-asset-item {
        display: grid !important;
        grid-template-columns: 20px 1fr auto !important;
        grid-template-areas:
            "rank name  price"
            "rank badge price" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 2px !important;
    }
    html body .asset-rank-col       { grid-area: rank !important;  align-self: center !important; }
    html body .asset-name-col-smaller  { grid-area: name !important;  min-width: 0 !important; align-items: flex-start !important; }
    html body .asset-aimon-col-smaller { grid-area: badge !important; justify-content: flex-start !important; justify-self: start !important; }
    html body .asset-price-col-smaller { grid-area: price !important; align-items: flex-end !important; }

    /* Simbolo in evidenza, nome azienda piccolo sotto */
    html body .compact-asset-symbol {
        font-size: 0.8rem !important; font-weight: 700 !important;
        color: var(--text-primary, #1e293b) !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    html body .aimon-asset-name {
        font-size: 0.6rem !important; color: var(--text-muted, #94a3b8) !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    html body .aimon-asset-name .asset-icon { display: none !important; }

    /* Badge compatto, larghezza-contenuto */
    html body .top-asset-pane .aimon-rate-badge {
        font-size: 0.62rem !important; padding: 0.1rem 0.35rem !important; white-space: nowrap !important;
    }

    /* Prezzo compatto a destra */
    html body .aimon-asset-price  { font-size: 0.75rem !important; white-space: nowrap !important; }
    html body .aimon-asset-change { font-size: 0.62rem !important; white-space: nowrap !important; }

    /* Intestazione su UNA riga: # | Az. | AImon R. | Prezzo */
    html body .top-asset-pane .assets-header-row-with-rank {
        display: grid !important;
        grid-template-columns: 20px 1fr auto auto !important;
        column-gap: 8px !important;
        align-items: center !important;
    }
    html body .top-asset-pane .assets-header-row-with-rank > div {
        white-space: nowrap !important; font-size: 0.65rem !important;
        font-weight: 600 !important; color: var(--text-muted, #94a3b8) !important;
        text-align: left !important;
    }

    /* Abbreviazioni: mostra le corte, nascondi le piene */
    .top-asset-pane .hdr-full  { display: none !important; }
    .top-asset-pane .hdr-short { display: inline !important; }
}

/* ============================================================
   4g. LIQUIDITY — impila gli elementi del gauge in verticale
   Gli span (label, badge, trend, footer) restano affiancati:
   forzo la colonna e contengo la label che sfora.
   ============================================================ */
@media (max-width: 992px) {
    html body .liq-gauge-area,
    html body .liq-flows-area,
    html body .liq-summary-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
    }
    html body .liq-gauge-label,
    html body .liq-gauge-footer {
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
    html body .liq-trend-row {
        flex-direction: row !important;   /* -0.6 pts vs 7gg resta in riga */
        gap: 4px !important;
        justify-content: center !important;
    }
    /* Direzione dei flussi: le 2 colonne (col1/col2) impilate */
    html body .liq-flows-area > div {
        flex-direction: column !important;
    }
}


/* ============================================================
   4h. TABELLA AZIONI/SETTORI — scroll orizzontale + colonne
   # e nome congelate. Righe: 10 celle, la 2a e' il nome.
   ============================================================ */
@media (max-width: 992px) {
    /* Scroll orizzontale */
    html body .stocks-table-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* CAUSA del blocco: border-collapse:collapse disattiva
       position:sticky sulle celle. Serve 'separate'. */
    html body .stocks-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    /* Colonna 1 (#): larghezza fissa reale (border-box) */
    html body .stocks-table > thead > tr > th:nth-child(1),
    html body .stocks-table > tbody > tr > td:nth-child(1) {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        background: #ffffff !important;
    }

    /* Colonna 2 (nome): larghezza FISSA cosi' header e righe
       combaciano e la colonna 3 parte allineata (niente
       "NOMESETTORE"). Agganciata a 42px, con ombra a destra. */
    html body .stocks-table > thead > tr > th:nth-child(2),
    html body .stocks-table > tbody > tr > td:nth-child(2) {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 42px !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: #ffffff !important;
        box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18) !important;
    }

    /* Intestazione: le due celle congelate DEVONO stare sopra le
       th mobili (che ora hanno sfondo opaco e le coprivano). */
    html body .stocks-table > thead > tr > th:nth-child(1),
    html body .stocks-table > thead > tr > th:nth-child(2) {
        z-index: 10 !important;
        background: #f1f5f9 !important;
    }
    /* Le th mobili (dalla 3) restano sotto le congelate */
    html body .stocks-table > thead > tr > th:nth-child(n+3) {
        z-index: 1 !important;
    }
    /* Anche le td mobili sotto le celle congelate delle righe */
    html body .stocks-table > tbody > tr > td:nth-child(n+3) {
        z-index: 1 !important;
    }

    /* Intestazioni: box-sizing coerente, sfondo OPACO, testo su
       una riga. Il <div> interno (titolo + icona) non deve sforare. */
    html body .stocks-table > thead > tr > th {
        box-sizing: border-box !important;
        white-space: nowrap !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        text-align: left !important;
        background: #f1f5f9 !important;
        overflow: hidden !important;
    }
    html body .stocks-table > thead > tr > th > div {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Colonne scorrevoli (dalla 3 in poi): larghezza ESPLICITA
       identica in header e righe, così combaciano. */
    html body .stocks-table > thead > tr > th:nth-child(n+3),
    html body .stocks-table > tbody > tr > td:nth-child(n+3) {
        box-sizing: border-box !important;
        width: 104px !important;
        min-width: 104px !important;
        white-space: nowrap !important;
    }
}


/* ============================================================
   4i. DETTAGLIO ASSET — card affiancate che si troncano su
   schermi stretti: le impilo a colonna piena.
   ============================================================ */
@media (max-width: 576px) {
    /* Card livelli (SUPPORTO/ZONA/RESISTENZA): una per riga,
       cosi' il valore intero ($189.240,50) non viene troncato. */
    html body .sd-lv-box {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    /* TREND e MOMENTUM: impilati (MOMENTUM non piu' tagliato) */
    html body .timing-indicators-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* Barra del grafico: titolo + pulsanti (1D/1W/1M/1Y) +
       "Timing" non stanno in riga -> vanno a capo invece di sforare. */
    html body .detail-card-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Grafico: lo swipe verticale scorre la PAGINA, non il grafico
       (Lightweight Charts altrimenti cattura il tocco). */
    html body #lw-chart, html body #etfd-chart,
    html body #lw-chart canvas, html body #etfd-chart canvas,
    html body #lw-chart table, html body #etfd-chart table {
        touch-action: pan-y !important;
    }

    /* Fondamentali: griglie a piu' colonne -> una colonna,
       cosi' le card non sforano ne' si troncano. */
    html body .sdf-grid2,
    html body .sdf-metric-grid3,
    html body .sd-fund-grid,
    html body .sd-metric-grid,
    html body .sd-eco-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tab Breve/Medio/Lungo: etichetta sopra, durata sotto. */
    html body .sd-levels-tf-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }
    html body .sd-levels-tf-sub {
        display: block !important;
    }

    /* Calendario Eventi + Consensus Analisti: gli eventi hanno 4
       blocchi in riga (icona/badge/testo/valore) che si comprimono
       e vanno a capo lettera per lettera. Li impilo in verticale. */
    html body .sdf-cal-event {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    html body .sdf-cal-content { min-width: 0 !important; width: 100% !important; }
    html body .sdf-cal-right,
    html body .sdf-cal-stat {
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* Slider Conservativo/Aggressivo: l'etichetta destra sforava.
       Font ridotto + puo' comprimersi, cosi' rientra. */
    html body .sd-slider-edge-label {
        font-size: 9px !important;
        flex-shrink: 1 !important;
        white-space: nowrap !important;
    }
    html body .sd-slider-input { min-width: 0 !important; }

}


/* ============================================================
   4j. DETTAGLIO — ordine sezioni: AImon Rate + Timing (colonna
   destra) PRIMA di Grafico + Periodi (colonna sinistra).
   ============================================================ */
@media (max-width: 992px) {
    html body #sd-panel-trading .asset-detail-row-1 {
        display: flex !important;
        flex-direction: column !important;
    }
    html body #sd-panel-trading .asset-detail-right-col { order: -1 !important; }
    html body #sd-panel-trading .asset-detail-row-1 > div:first-child { order: 0 !important; }
}


/* ============================================================
   4k. DETTAGLIO SETTORE — barra tab che sfora: scroll + padding
   ridotto, cosi' "Stagionalita'" non esce dai limiti.
   ============================================================ */
@media (max-width: 992px) {
    html body .sd-tab-bar {
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow: hidden !important;
    }
    html body .sd-tab-bar-inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
    }
    html body .sd-tab {
        padding: 12px 12px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Header settore: i box stat (AImon Rate, Qualita' dati)
       affiancati sforavano -> vanno a capo. */
    html body .etfd-header-stats {
        flex-wrap: wrap !important;
    }
    html body .etfd-proxy-link {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Card header settore: la griglia a 2 colonne sforava a destra.
       Una colonna + contenimento nella larghezza schermo. */
    html body .etfd-header,
    html body .etfd-header-grid,
    html body .etfd-header-stats,
    html body .etfd-header-main {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    html body .etfd-header-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    html body .etfd-header-stats-box { min-width: 0 !important; }
}


/* ============================================================
   4l. TABELLA ETF — stesso trattamento di Azioni/Cripto:
   scroll orizzontale + colonne # e nome congelate.
   ============================================================ */
@media (max-width: 992px) {
    html body .etfs-table-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html body .etfs-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    html body .etfs-table > thead > tr > th,
    html body .etfs-table > tbody > tr > td {
        white-space: nowrap !important;
    }
    /* Colonna 1 (#) */
    html body .etfs-table > thead > tr > th:nth-child(1),
    html body .etfs-table > tbody > tr > td:nth-child(1) {
        position: -webkit-sticky !important; position: sticky !important;
        left: 0 !important; z-index: 5 !important;
        box-sizing: border-box !important;
        width: 44px !important; min-width: 44px !important; max-width: 44px !important;
        padding-left: 6px !important; padding-right: 6px !important;
        background: #ffffff !important;
    }
    /* Colonna 2 (nome) */
    html body .etfs-table > thead > tr > th:nth-child(2),
    html body .etfs-table > tbody > tr > td:nth-child(2) {
        position: -webkit-sticky !important; position: sticky !important;
        left: 44px !important; z-index: 5 !important;
        box-sizing: border-box !important;
        width: 150px !important; min-width: 150px !important; max-width: 150px !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        background: #ffffff !important;
        box-shadow: 6px 0 8px -4px rgba(0,0,0,0.18) !important;
    }
    /* Intestazioni congelate sopra le altre */
    html body .etfs-table > thead > tr > th {
        box-sizing: border-box !important;
        background: #f1f5f9 !important;
        overflow: hidden !important;
    }
    html body .etfs-table > thead > tr > th:nth-child(1),
    html body .etfs-table > thead > tr > th:nth-child(2) { z-index: 10 !important; }
    html body .etfs-table > thead > tr > th:nth-child(n+3),
    html body .etfs-table > tbody > tr > td:nth-child(n+3) {
        z-index: 1 !important;
        box-sizing: border-box !important;
        width: 104px !important; min-width: 104px !important;
    }
}


/* ============================================================
   4m. DETTAGLIO FOREX — gauge e grafico "Andamento" affiancati
   (.fx-top-row) si schiacciano: li impilo su mobile.
   ============================================================ */
@media (max-width: 992px) {
    html body .fx-top-row {
        flex-direction: column !important;
        align-items: center !important;
    }
    html body .fx-spark-side {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    html body .fx-spark-big {
        width: 100% !important;
    }

    /* Tabella Coppie in un grid annidato: il container deve restare
       largo quanto lo schermo (width:100%) e scrollare la tabella al
       suo interno; i wrapper non devono allargarsi oltre lo schermo. */
    html body .fx-two-col { grid-template-columns: 1fr !important; }
    html body .fx-two-col > * { min-width: 0 !important; max-width: 100% !important; }
    html body .fx-two-col .stocks-table-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html body .fx-two-col .stocks-table {
        min-width: 620px !important;
    }
    /* Colonna Coppia (congelata) piu' stretta: EUR/USD e' corto. */
    html body .fx-two-col .stocks-table > thead > tr > th:nth-child(2),
    html body .fx-two-col .stocks-table > tbody > tr > td:nth-child(2) {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        left: 44px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Colonne dati (dalla 3): larghezza propria + padding, cosi' la
       Prezzo non resta a ridosso della colonna congelata. */
    html body .fx-two-col .stocks-table > thead > tr > th:nth-child(n+3),
    html body .fx-two-col .stocks-table > tbody > tr > td:nth-child(n+3) {
        min-width: 92px !important;
        white-space: nowrap !important;
        padding-left: 14px !important;
    }
    /* Trend 7D: stocks.css lo nasconde su mobile (display:none).
       Qui lo RI-mostro, con larghezza propria per il mini-grafico. */
    html body .fx-two-col .stocks-table .chart-7d-cell,
    html body .fx-two-col .stocks-table > thead > tr > th:last-child,
    html body .fx-two-col .stocks-table > tbody > tr > td:last-child {
        display: table-cell !important;
        min-width: 120px !important;
        width: 120px !important;
    }
    html body .fx-two-col .stocks-table .fx-trend-cell {
        display: block !important;
        min-width: 100px !important;
    }
    html body .fx-two-col .stocks-table .mini-chart-container {
        display: block !important;
        width: 100px !important;
        height: 34px !important;
    }

    /* Spazio tra le due card quando impilate su mobile */
    html body .fx-two-col > div { margin-bottom: 16px !important; }
}


/* ============================================================
   4n. TABELLA BOND ETF — scroll orizzontale + # e ETF congelati.
   (4 colonne: # / ETF / Emittente / AImon Rate ETF)
   ============================================================ */
@media (max-width: 992px) {
    /* La card fa da contenitore scrollabile */
    html body .bonds-etf-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html body .bonds-etf-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        min-width: 560px !important;
    }
    html body .bonds-etf-table th,
    html body .bonds-etf-table td { white-space: nowrap !important; }

    /* Colonna 1 (#) congelata */
    html body .bonds-etf-table > thead > tr > th:nth-child(1),
    html body .bonds-etf-table > tbody > tr > td:nth-child(1) {
        position: -webkit-sticky !important; position: sticky !important;
        left: 0 !important; z-index: 5 !important;
        box-sizing: border-box !important;
        width: 40px !important; min-width: 40px !important; max-width: 40px !important;
        background: #ffffff !important;
    }
    /* Colonna 2 (ETF) congelata */
    html body .bonds-etf-table > thead > tr > th:nth-child(2),
    html body .bonds-etf-table > tbody > tr > td:nth-child(2) {
        position: -webkit-sticky !important; position: sticky !important;
        left: 40px !important; z-index: 5 !important;
        box-sizing: border-box !important;
        width: 108px !important; min-width: 108px !important; max-width: 108px !important;
        white-space: normal !important;
        background: #ffffff !important;
        box-shadow: 6px 0 8px -4px rgba(0,0,0,0.15) !important;
    }
    html body .bonds-etf-table > thead > tr > th {
        background: #f8fafc !important; box-sizing: border-box !important;
    }
    html body .bonds-etf-table > thead > tr > th:nth-child(1),
    html body .bonds-etf-table > thead > tr > th:nth-child(2) { z-index: 10 !important; }
    /* Righe-titolo area (STATI UNITI, ecc.): la cella colspan e' larga
       quanto la tabella e lo sticky sulla cella non tiene il testo a
       vista. Ancoro il TESTO (in uno span) a sinistra: la cella scorre
       ma "STATI UNITI" resta visibile. */
    html body .bonds-etf-table .bonds-group-row td {
        background: #eef2ff !important;
        position: relative !important;
    }
    html body .bonds-etf-table .bonds-group-label {
        position: -webkit-sticky !important; position: sticky !important;
        left: 12px !important;
        display: inline-block !important;
    }

    /* Riduzione testi tabella bond solo su mobile */
    html body .bonds-etf-table { font-size: 0.82rem !important; }
    html body .bonds-etf-table th { font-size: 0.72rem !important; }
    html body .bonds-etf-table .bonds-group-row td { font-size: 0.75rem !important; }
}


/* ============================================================
   4o. TABELLA .stocks-table — nomi lunghi (es. Petrolio greggio
   WTI): la colonna nome congelata va a capo su due righe invece
   di troncare, cosi' il nome intero e' leggibile.
   ============================================================ */
@media (max-width: 992px) {
    html body .stocks-table > tbody > tr > td:nth-child(2) {
        white-space: normal !important;
        line-height: 1.15 !important;
    }
    /* Commodities: nomi lunghi (Petrolio greggio WTI) -> colonna nome
       piu' stretta, testo a capo e spezza le parole lunghe. */
    html body .commodities-table > thead > tr > th:nth-child(2),
    html body .commodities-table > tbody > tr > td:nth-child(2) {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
        left: 44px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        line-height: 1.15 !important;
    }
}
/* Card comparto: a 2 colonne sforano su telefono stretto -> 1 colonna */
@media (max-width: 576px) {
    html body .comm-subtype-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   4p. TABELLA STAGIONALITA' COMMODITY (.cd-seas-table):
   colonna anni fissa a sinistra, i mesi scorrono.
   ============================================================ */
@media (max-width: 992px) {
    html body .cd-seas-heatmap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* (border-collapse e' gia' 'separate' nel CSS della pagina) */

    /* Prima colonna: angolo header + anni (2024/2023/Media) fissi */
    html body .cd-seas-table > thead > tr > th.cd-seas-corner,
    html body .cd-seas-table > tbody > tr > td.cd-seas-year {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        background: #ffffff !important;
        box-shadow: 4px 0 6px -3px rgba(0,0,0,0.15) !important;
    }
    /* header sticky sopra le celle mesi */
    html body .cd-seas-table > thead > tr > th.cd-seas-corner { z-index: 8 !important; background:#f8fafc !important; }
    /* i mesi non si stringano troppo */
    html body .cd-seas-table > thead > tr > th:not(.cd-seas-corner),
    html body .cd-seas-table > tbody > tr > td.cd-seas-cell {
        min-width: 52px !important;
    }
}


/* ============================================================
   4q. HEADER DETTAGLIO — box variazione (24H/7G/1M/YTD): erano
   in flex con overflow:hidden, l'ultimo (YTD) veniva tagliato.
   Li faccio andare a capo e li rendo visibili.
   ============================================================ */
@media (max-width: 992px) {
    html body .idxh-stats {
        flex-wrap: wrap !important;
        overflow: visible !important;
        width: 100% !important;
    }
    html body .idxh-stat {
        flex: 1 1 auto !important;
        min-width: 70px !important;
    }
}


/* ============================================================
   4r. MATRICE CORRELAZIONE COMMODITIES (.comm-corr-table):
   prima colonna (simboli di riga CC/CL/GC...) fissa, il resto
   scorre. Ogni riga inizia con <th>, piu' l'angolo in alto-sx.
   ============================================================ */
@media (max-width: 992px) {
    html body #comm-corr-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html body .comm-corr-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    /* Angolo header (prima th della prima riga) */
    html body .comm-corr-table > thead > tr > th:first-child {
        position: -webkit-sticky !important; position: sticky !important;
        left: 0 !important; z-index: 8 !important;
        background: #f8fafc !important;
    }
    /* Simbolo di riga: primo th di ogni riga del corpo */
    html body .comm-corr-table > tbody > tr > th:first-child {
        position: -webkit-sticky !important; position: sticky !important;
        left: 0 !important; z-index: 6 !important;
        background: #ffffff !important;
        box-shadow: 4px 0 6px -3px rgba(0,0,0,0.15) !important;
        min-width: 48px !important;
    }
    /* celle dati: larghezza minima leggibile */
    html body .comm-corr-table > tbody > tr > td {
        min-width: 56px !important;
        text-align: center !important;
    }
}


/* ============================================================
   5. BREAKPOINT 576px — rifiniture fini
   (le regole di contenuto specifiche restano nei css di pagina;
   qui solo aggiustamenti trasversali al layout/drawer)
   ============================================================ */
@media (max-width: 576px) {
    /* Su schermi piccoli: solo icona utente, header più stretto */
    html body .user-name-text { display: none !important; }
    html body .user-dropdown-btn {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }
    html body .aimon-logo { font-size: 1.15rem !important; }

    /* Drawer un filo più stretto su schermi molto piccoli */
    html body .aimon-sidebar {
        width: min(86vw, 260px) !important;
    }
    /* Contenuto: padding ridotto se non già gestito dalla pagina */
    html body .aimon-main-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Icone asset nelle card Market Overview: dashboard.css le
       riduce a 12px a questo breakpoint, troppo piccole. */
    .ticker-asset-icon {
        width: 22px !important;
        height: 22px !important;
    }
}


/* ============================================================
   VOCI SIDEBAR SOLO-MOBILE
   Voci di menu (es. News) che su desktop stanno nella sidebar
   destra; qui compaiono nel drawer sinistro solo <=992px.
   ============================================================ */
.aimon-sidebar .sidebar-item.aimon-mobile-only { display: none; }

@media (max-width: 992px) {
    html body .aimon-sidebar .sidebar-item.aimon-mobile-only {
        display: flex;
    }
}


/* ============================================================
   CALENDARIO BANCHE CENTRALI - prima colonna (Data) congelata
   su mobile, resto scorrevole in orizzontale. <=992px.
   ============================================================ */
@media (max-width: 992px) {
    html body .cbc-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    html body .cbc-table {
        border-collapse: separate !important;
        border-spacing: 0;
        min-width: 640px;
    }
    html body .cbc-table thead th:first-child,
    html body .cbc-table tbody td:first-child {
        position: sticky !important;
        left: 0;
        z-index: 2;
    }
    html body .cbc-table tbody td:first-child {
        background: #ffffff;
    }
    html body .cbc-table tbody tr.cbc-next td:first-child {
        background: #f5f3ff;
    }
    html body .cbc-table tbody tr:hover td:first-child {
        background: #f1f5f9;
    }
    html body .cbc-table thead th:first-child {
        background: #eef2f7;
        z-index: 3;
    }
    html body .cbc-table thead th:first-child,
    html body .cbc-table tbody td:first-child {
        box-shadow: 1px 0 0 #e2e8f0;
    }
}


/* ============================================================
   CBC LEGENDA - contrasto su mobile
   Il grigio chiaro #94a3b8 e' poco leggibile sullo sfondo
   violetto della pagina; su <=992px uso un grigio piu' scuro.
   ============================================================ */
@media (max-width: 992px) {
    html body .cbc-legend {
        color: #334155 !important;
    }
}


/* ============================================================
   PAGINE LEGALI - tabelle contenute su mobile
   Le <table> in .legal-doc-card sono width:100% ma con
   table-layout:auto il testo lungo le allarga oltre lo schermo.
   Su mobile forzo layout fisso + wrap e riduco padding/font.
   ============================================================ */
@media (max-width: 992px) {
    html body .legal-doc-card table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    html body .legal-doc-card th,
    html body .legal-doc-card td {
        word-break: break-word;
        overflow-wrap: anywhere;
        padding: .45rem .5rem;
        font-size: .82rem;
    }
    html body .legal-doc-card {
        padding: 20px 16px;
    }
}


/* ============================================================
   LIQUIDITY - card dei flussi: testata in colonna su telefono
   Su schermi stretti la riga from | barra | to non entra e le
   etichette vengono troncate. Le impilo e tolgo l'ellipsis.
   ============================================================ */
@media (max-width: 576px) {
    html body .liq-flow-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }
    html body .liq-flow-head .from,
    html body .liq-flow-head .to {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
    }
}


/* ============================================================
   FIX RICERCA MOBILE - barra a tutta larghezza quando aperta
   .header-search ha max-width:400px + margin:0 2rem (desktop),
   che la tenevano stretta anche da aperta. Qui li azzero e
   forzo container/input a piena larghezza.
   ============================================================ */
@media (max-width: 992px) {
    html body .aimon-header.search-open .header-search {
        max-width: none !important;
        margin: 0 !important;
        flex: none !important;
        width: 100% !important;
    }
    html body .aimon-header.search-open #global-search-container {
        width: 100% !important;
        max-width: none !important;
    }
    html body .aimon-header.search-open .search-input {
        width: 100% !important;
    }
}


/* ============================================================
   RICERCA LOCALE (liste + News) - fixed su mobile (no sforo)
   Ancorata alla viewport (position:fixed + left/right) per non
   sforare a sinistra; posizionata sotto l'header. Larga quanto
   lo schermo meno un piccolo margine.
   ============================================================ */
@media (max-width: 992px) {
    html body .search-box-expanded.open {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        top: var(--aimon-header-h, 64px) !important;
        transform: none !important;
        z-index: 1002 !important;
    }
    html body .search-box-expanded.open .search-expanded-input {
        width: 100% !important;
        flex: 1 1 auto;
    }
}

/* ============================================================
   MARKET OVERVIEW v2 - compatta + swipe + sottotitoli mobile
   - compatto: 2 slot (gli altri 6 nascosti finche' non si espande);
   - pulsante Mostra tutti/meno (toggle .mo-expanded via JS);
   - touch-action per lo swipe orizzontale delle card;
   - riattiva i .section-subtitle (nascosti su mobile da dashboard.css).
   Rotazione automatica + swipe gestiti da market-overview-mobile.js.
   ============================================================ */
@media (max-width: 576px) {
    /* Compatto: solo 2 slot su una riga */
    html body .market-overview-section:not(.mo-expanded) .market-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    html body .market-overview-section:not(.mo-expanded) .market-ticker-box[data-slot='2'],
    html body .market-overview-section:not(.mo-expanded) .market-ticker-box[data-slot='3'],
    html body .market-overview-section:not(.mo-expanded) .market-ticker-box[data-slot='4'],
    html body .market-overview-section:not(.mo-expanded) .market-ticker-box[data-slot='5'],
    html body .market-overview-section:not(.mo-expanded) .market-ticker-box[data-slot='6'],
    html body .market-overview-section:not(.mo-expanded) .market-ticker-box[data-slot='7'] {
        display: none !important;
    }
    html body .market-overview-section:not(.mo-expanded) #group-labels {
        display: none !important;
    }
    /* Swipe: consente lo scroll verticale della pagina ma cattura l'orizzontale */
    html body #market-grid { touch-action: pan-y; }
    /* Pulsante Mostra tutti / Mostra meno */
    html body .mo-toggle-btn {
        display: block;
        margin: 10px auto 0;
        padding: 6px 16px;
        font-size: .8rem;
        font-weight: 600;
        color: #735de1;
        background: rgba(115, 93, 225, 0.08);
        border: 1px solid rgba(115, 93, 225, 0.25);
        border-radius: 999px;
        cursor: pointer;
        line-height: 1.2;
    }
    html body .mo-toggle-btn i { margin-left: 4px; }
    /* Sottotitoli di sezione: riattivati su mobile, a capo sotto il titolo */
    html body .section-header-bar { flex-wrap: wrap; }
    html body .section-subtitle {
        display: block !important;
        flex: 1 1 100% !important;
        margin-top: 4px !important;
        font-size: .78rem;
    }
}

@media (min-width: 577px) {
    html body .mo-toggle-btn { display: none !important; }
}


/* ============================================================
   MARKET OVERVIEW A - leggibilita' nomi + sottotitoli (mobile)
   A1: sottotitoli non piu' tagliati a sinistra (header padding-left:0);
   A2: nomi asset su 2 righe (prima troncati a 1) + card piu' alta.
   ============================================================ */
@media (max-width: 576px) {
    /* A1 - sottotitolo: rientra dal bordo e si allinea al titolo */
    html body .section-header-bar { padding-left: 18px; }
    html body .section-subtitle {
        padding-left: 2px;
        white-space: normal !important;
    }
    /* A2 - nomi asset leggibili: fino a 2 righe, card un filo piu' alta */
    html body .market-ticker-box {
        aspect-ratio: auto !important;
        min-height: 74px;
    }
    html body .ticker-name {
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
        font-size: 0.6rem !important;
        line-height: 1.15 !important;
    }
}


/* ============================================================
   SOTTOTITOLI - allineati al titolo su mobile
   Il titolo .section-title ha margin-left:22px; qui allineo il
   sottotitolo allo stesso rientro cosi' parte esattamente sotto il
   titolo. Annulla i tentativi precedenti e nasconde il divider.
   ============================================================ */
@media (max-width: 576px) {
    html body .section-header-bar { padding-left: 0; }
    html body .section-subtitle {
        margin-left: 22px !important;
        padding-left: 0 !important;
        margin-right: 12px;
    }
    /* Il divider verticale ha senso solo in riga (desktop): a capo lo nascondo */
    html body .section-header-bar .section-divider { display: none !important; }
}