/* ============================================
   FONT CONFIGURATION
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');

html, body, .bd-main, .bd-content, .bd-article, .bd-sidebar, div.body, p, li, td, th, span, a {
    font-family: 'Familjen Grotesk', sans-serif !important;
}

.bd-content h1, .bd-content h2, .bd-content h3, .bd-content h4, .bd-content h5, .bd-content h6, 
.bd-sidebar h1, .bd-sidebar h2, .bd-sidebar h3, .bd-sidebar h4, .bd-sidebar h5, .bd-sidebar h6, 
h1, h2, h3, h4, h5, h6 {
    font-family: 'Familjen Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

.bd-sidebar-primary, .bd-sidebar-secondary, .toctree-l1, .toctree-l2, .toctree-l3, .navbar, .navbar-nav {
    font-family: 'Familjen Grotesk', sans-serif !important;
}

p code, li code {
    font-family: 'Familjen Grotesk', monospace !important;
}

input, button, select, textarea {
    font-family: 'Familjen Grotesk', sans-serif !important;
}

table, table th, table td {
    font-family: 'Familjen Grotesk', sans-serif !important;
}

/* ============================================
   TABLE HOVER EFFECTS
   ============================================ */

table tbody tr, table.docutils tbody tr, .docutils tbody tr, .bd-content table tbody tr {
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
}

table tbody tr:hover, table.docutils tbody tr:hover, .docutils tbody tr:hover, 
.bd-content table tbody tr:hover, table.list-table tbody tr:hover {
    background-color: #cfe2ff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

tbody tr:hover {
    background-color: #cfe2ff !important;
}

tbody tr:hover td, tbody tr:hover th {
    color: #212529 !important;
}

table thead tr:hover, thead tr:hover {
    background-color: inherit !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* ============================================
   INLINE ICON & TABLE ALIGNMENT FIX
   ============================================ */

.bd-content table img.inline-icon {
    height: 39px;
    width: auto;
    max-height: none;
}

.bd-content table td {
    line-height: 1.6;
}

/* MODIFICA QUI: 
   Ho cambiato vertical-align da 'middle' a 'top'.
   In questo modo il testo nella prima colonna è centrato orizzontalmente ma in alto.
*/
.bd-content table td:first-child {
    text-align: center;
    vertical-align: top !important; 
    padding-top: 15px; /* Opzionale: aggiunge un po' di respiro dal bordo superiore */
}

/* Dimensioni variabili icone */
.bd-content table img.inline-icon.icon-small { height: 30px; }
.bd-content table img.inline-icon.icon-medium { height: 50px; }
.bd-content table img.inline-icon.icon-large { height: 60px; }
.bd-content table img.inline-icon.icon-xl { height: 80px; }

/* Classe specifica per forzare l'allineamento in alto su TUTTE le celle di una tabella */
.align-top table td, 
.align-top table th,
.bd-content table.align-top td {
    vertical-align: top !important;
}

/* ============================================
   OPTIONAL: DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    table.docutils tbody tr:hover { background-color: #1e3a5f !important; }
    table.docutils tbody tr:nth-child(even):hover { background-color: #1e3a5f !important; }
    table.docutils tbody tr:nth-child(odd):hover { background-color: #1a2f4a !important; }
}

/* ============================================
   GESTIONE LOGO ARS
   Solo per immagini con classe img-logo (piccole, per il logo)
   ============================================ */

.only-light.img-logo, .only-dark.img-logo {
    width: 200px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: 10px;
}

/* Immagini grandi con only-light/only-dark (es. screenshot pagine) */
.only-light:not(.img-logo), .only-dark:not(.img-logo) {
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

html[data-theme="light"] .only-dark { display: none !important; }
html[data-theme="dark"] .only-light { display: none !important; }

.bd-content .only-light.img-logo, .bd-content .only-dark.img-logo {
    width: 250px !important;
}

/* ============================================
   VERSION / LANGUAGE SWITCHER
   ============================================ */

.fixed-bar {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid rgba(100, 100, 100, 0.28);
    border-radius: 8px;
    background: rgba(245, 245, 245, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px) saturate(180%);
    font-size: 0.9rem;
}

.fixed-bar .dropdown {
    position: relative;
    user-select: none;
}

.fixed-bar .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(100, 100, 100, 0.28);
    border-radius: 5px;
    background: rgba(200, 200, 200, 0.35);
    color: #222;
    white-space: nowrap;
    cursor: pointer;
}

.fixed-bar .dropdown-toggle:hover {
    border-color: rgba(26, 62, 114, 0.45);
    background: rgba(100, 150, 220, 0.18);
    color: #1a3e72;
}

.fixed-bar .dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

.fixed-bar .dropdown-menu {
    position: absolute;
    left: 0;
    bottom: 100%;
    display: none;
    min-width: 160px;
    max-height: 220px;
    overflow-y: auto;
    flex-direction: column;
    border: 1px solid rgba(150, 150, 150, 0.3);
    border-radius: 6px;
    background: rgba(250, 250, 250, 0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.fixed-bar .dropdown-menu.show {
    display: flex;
}

.fixed-bar .dropdown-menu a {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.45);
    color: #1a3e72;
    text-decoration: none;
    white-space: nowrap;
}

.fixed-bar .dropdown-menu a:last-child {
    border-bottom: none;
}

.fixed-bar .dropdown-menu a:hover {
    background: rgba(100, 150, 220, 0.15);
}

@media print {
    .fixed-bar {
        display: none !important;
    }
}

/* ============================================
   PAGE TOC VISIBILITY
   Keep nested headings visible in the right-side Contents panel.
   ============================================ */

@media (min-width: 1200px) {
    .bd-toc .nav .nav,
    .bd-toc .toc-entry > .nav,
    .bd-toc .toc-entry > ul.section-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .bd-toc .toc-entry {
        display: block !important;
    }

    .bd-sidebar-secondary .page-toc .section-nav,
    .bd-sidebar-secondary .page-toc .toc-entry > ul,
    .bd-sidebar-secondary #pst-page-toc-nav ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .bd-sidebar-secondary.hide:not(:hover) {
        max-height: none !important;
        overflow-y: auto !important;
    }

    .bd-sidebar-secondary.hide:not(:hover) nav.page-toc {
        opacity: 1 !important;
    }
}