/* ============================================
   LAYOUT COLONNE — Grid 14 elementi (Ordine + Simmetria)
   ============================================ */

.container, .page-container, .layout-content {
    max-width: 1200px !important;
    width: 95% !important;
    margin: 0 auto !important;
}

.components-section .components-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(7, auto) !important;
    grid-auto-flow: column !important;  /* riempie colonna per colonna */
    gap: 10px !important;
    align-items: start !important;
    column-count: unset !important;
}

.components-section .component-container {
    margin: 0 !important;
    border: 0.5px solid #b3bac5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    display: block !important;
    align-self: start !important;  /* ogni card parte dall'alto, nessun stretching */
}

@media screen and (max-width: 768px) {
    .components-section .components-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: unset !important;
        grid-auto-flow: row !important;
    }
}


/* ============================================
   2. REGOLE GLOBALI TOOLTIP (Applica a tutti)
   ============================================ */
[data-component-id],
[data-component-id] .component-container,
[data-component-id] .component-inner,
[data-component-id] .name {
    overflow: visible !important;
    contain: none !important;
}

[data-component-id]:hover,
[data-component-id] .name:hover {
    z-index: 99999 !important;
    position: relative !important;
}

/* Stile del testo col cursore */
[data-component-id] .name {
    position: relative;
    cursor: help;
    text-decoration: underline dotted #b3bac5;
    text-underline-offset: 3px;
}

/* Design universale del rettangolo bianco (Il Tooltip) */
[data-component-id] .name::after {
    white-space: pre-wrap;
    position: absolute;
    left: 0; 
    z-index: 999999 !important;
    background: #ffffff;
    color: #172b4d;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    padding: 12px 16px;
    border-radius: 4px;
    border-left: 3px solid #0052cc;
    box-shadow: 0 4px 16px rgba(9, 30, 66, 0.2);
    width: 280px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Mostra il tooltip */
[data-component-id] .name:hover::after {
    opacity: 1;
}

/* ============================================
   3. TESTI E DIREZIONI SPECIFICHE DEI COMPONENTI
   ============================================ */

/* --- QUESTI SI APRONO VERSO IL BASSO (top) --- */
[data-component-id="kmt4qnq39n3x"] .name::after {
    content: "Dettaglio Couriers Group\A Informazioni sui servizi di consegna e tracking.";
    top: calc(100% + 8px);
}
[data-component-id="wy3wg36l2x4r"] .name::after {
    content: "Dettaglio eShip\A Informazioni sui servizi di consegna e tracking.";
    top: calc(100% + 8px);
}

/* --- QUESTI SI APRONO VERSO L'ALTO (bottom) --- */
[data-component-id="11zgqrbjshyt"] .name::after {
    content: "Dettaglio Tracking\A Monitoraggio in tempo reale dei flussi logistici e di spedizione.";
    bottom: calc(100% + 8px);
}
[data-component-id="dgm149b6p39r"] .name::after {
    content: "Dettaglio Waybill Group\A Informazioni sui servizi di consegna e tracking.";
    bottom: calc(100% + 8px);
}
[data-component-id="36ttz34n5p9m"] .name::after {
    content: "Dettaglio Shipment Quotation\A Informazioni sulle offerte di spedizione.";
    bottom: calc(100% + 8px);
}
[data-component-id="5ms1fcywz9lf"] .name::after {
    content: "Dettaglio Pricelist\A Informazioni sui prezzi e tariffe.";
    bottom: calc(100% + 8px);
}
[data-component-id="f32qmkj36r8c"] .name::after {
    content: "Dettaglio Customers & MOL Users\A Informazioni sui clienti e sugli utenti MOL.";
    bottom: calc(100% + 8px);
}
[data-component-id="dh26n2nxd2rj"] .name::after {
    content: "Dettaglio Invoicing\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}
[data-component-id="pwgjtghlfvhl"] .name::after {
    content: "Dettaglio Invoice Check\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}
[data-component-id="xt58snj6t5m6"] .name::after {
    content: "Dettaglio Authentication Login\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}
[data-component-id="459kfs8qc7l4"] .name::after {
    content: "Dettaglio Commercial Offer\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}
[data-component-id="mc3qhkvmn5h7"] .name::after {
    content: "Dettaglio Dashboard HUB\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}
[data-component-id="3q9rytcqn7jx"] .name::after {
    content: "Dettaglio HUB Status\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}
[data-component-id="q92rb8zlv0wh"] .name::after {
    content: "Dettaglio Royalty Report\A Informazioni sulle fatture.";
    bottom: calc(100% + 8px);
}