/* ============================================
   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);
}


/* ============================================
   SEZIONE 2 — Fortidia Websites
   Card grid stile Atlassian
   ============================================ */

.component-container:has([data-component-id="x90fc7vh0r15"]) {
    grid-column-start: 1 !important;
    grid-column-end: 3 !important;
    grid-row-start: 8 !important;
    grid-row-end: auto !important;
    margin-top: 64px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.component-container:has([data-component-id="x90fc7vh0r15"])::before {
    content: "Fortidia Status Pages" !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    font-size: 1.75rem !important;
    font-weight: 500 !important;
    line-height: 2.625rem !important;
    margin-bottom: 8px !important;
}

/* ============================================
   CARD BASE
   Per nuovi siti aggiungi l'id con virgola:
   [data-component-id="x90fc7vh0r15"],
   [data-component-id="NUOVO_ID"] { ... }
   ============================================ */
[data-component-id="x90fc7vh0r15"] {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #dfe1e6 !important;
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.08) !important;
    padding: 20px 24px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

[data-component-id="x90fc7vh0r15"] .name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #172b4d !important;
    cursor: default !important;
    text-decoration: none !important;
}

[data-component-id="x90fc7vh0r15"] .tooltip-base,
[data-component-id="x90fc7vh0r15"] .icon-indicator {
    display: none !important;
}

/* ============================================
   STATUS BADGE
   ============================================ */
[data-component-id="x90fc7vh0r15"] .component-status {
    display: inline-block !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 4px 10px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    border: none !important;
    line-height: 1.4 !important;
}

[data-component-id="x90fc7vh0r15"].status-green .component-status {
    background: #00875a !important;
    color: #ffffff !important;
}

[data-component-id="x90fc7vh0r15"].status-yellow .component-status {
    background: #FF8B00 !important;
    color: #ffffff !important;
}

[data-component-id="x90fc7vh0r15"].status-orange .component-status {
    background: #FF5630 !important;
    color: #ffffff !important;
}

[data-component-id="x90fc7vh0r15"].status-red .component-status {
    background: #DE350B !important;
    color: #ffffff !important;
}

[data-component-id="x90fc7vh0r15"].status-blue .component-status {
    background: #0052CC !important;
    color: #ffffff !important;
}

[data-component-id="x90fc7vh0r15"].status-yellow,
[data-component-id="x90fc7vh0r15"].status-orange,
[data-component-id="x90fc7vh0r15"].status-red {
    border-top-width: 3px !important;
    border-top-color: #FF8B00 !important;
}
/* ============================================
   URL ON HOVER — trigger su .name
   ============================================ */

/* Fix duplicato — nasconde il secondo .name */
[data-component-id="x90fc7vh0r15"] .name:last-child {
    display: none !important;
}

/* tooltip-base: invisibile ma presente nel DOM
   serve per leggere data-original-title via attr() */
[data-component-id="x90fc7vh0r15"] .tooltip-base {
    display: inline-block !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* URL nascosta di default */
[data-component-id="x90fc7vh0r15"] .tooltip-base::after {
    content: "" !important;
    display: none !important;
}

/* Mostra URL al hover del nome
   + mantiene visibile quando si hovera l'URL stesso */
[data-component-id="x90fc7vh0r15"] .name:hover ~ .tooltip-base::after,
[data-component-id="x90fc7vh0r15"] .tooltip-base:hover::after {
    content: attr(data-original-title) !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: #0052CC !important;
    font-size: 0.8rem !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    cursor: text !important;
    z-index: 10 !important;
}

/* Bridge: estende hover area di .name verso il tooltip-base */
[data-component-id="x90fc7vh0r15"] .name::after {
    content: "" !important;
    display: block !important;
    height: 16px !important;
    width: 100% !important;
    position: static !important;
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: auto !important;
}