:root {
    --ink: #1f2937;
    --muted: #5b6778;
    --line: #d8e0ea;
    --panel: #f3f6fa;
    --brand: #0c5f8f;
    --brand-dark: #074c73;
    --sidebar-w: 320px;
    --sidebar-collapsed-w: 0px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: linear-gradient(180deg, #edf2f7 0%, #e8eef4 100%);
    font: 14px/1.5 "Segoe UI", Tahoma, Arial, sans-serif;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

#sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    z-index: 20;
}

body.nav-collapsed #sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));
    box-shadow: none;
}

#sidebar h2 {
    margin: 0 0 10px;
    color: var(--brand);
    font-size: 16px;
    letter-spacing: 0.2px;
}

#sidebar input {
    width: 100%;
    margin: 0 0 10px;
    padding: 7px 9px;
    border: 1px solid #c8d3df;
    border-radius: 8px;
    font-size: 13px;
}

#toc-list details { margin: 2px 0; }
#toc-list details > details { margin-left: 10px; }

#toc-list summary {
    cursor: pointer;
    padding: 3px 6px;
    color: var(--brand);
    font-weight: 600;
    border-radius: 6px;
    list-style: none;
}

#toc-list summary:hover { background: #dbe7f3; }

#toc-list ul {
    list-style: none;
    margin: 0 0 2px 10px;
    padding: 0;
}

#toc-list li { margin: 1px 0; }

#toc-list a {
    color: #2d3b4f;
    text-decoration: none;
    display: block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
}

#toc-list a:hover,
#toc-list a.active {
    background: var(--brand);
    color: #fff;
}

#main {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 16px 22px;
    transition: padding-left 0.22s ease;
}

body.nav-collapsed #main {
    padding-left: 24px;
}

.page-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 15;
    background: rgba(232, 238, 244, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 0 10px;
}

.page-nav a {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.page-nav a:hover { background: var(--brand-dark); }
.page-nav .toc-link { background: #6b7280; }

#nav-toggle {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #243447;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#nav-toggle:hover { background: #1a2635; }

.breadcrumb {
    margin-bottom: 14px;
    padding: 8px 12px;
    border-left: 4px solid var(--brand);
    background: #f7fafc;
    color: var(--muted);
    font-size: 12px;
}

article {
    width: 100%;
    max-width: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

h1.bigtext1 {
    margin: 18px 0 10px;
    color: var(--brand);
    font-size: 21px;
}

p { margin: 0 0 10px; }
.contents_testonormale,
.contents_testonota { line-height: 1.52; }

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img {
    max-width: 100%;
    height: auto;
}

/* Use available screen space for electrical diagrams. */
iframe[src*="schemazoompre.aspx"],
embed[type="image/svg+xml"] {
    display: block;
    width: min(100%, 1800px) !important;
    height: clamp(440px, 72vh, 980px) !important;
    margin: 12px auto;
    border: 0;
}

center > iframe[src*="schemazoompre.aspx"],
center > embed[type="image/svg+xml"] {
    width: min(100%, 1800px) !important;
}

/* Keep Stellantis "spacer gifs" from polluting layout. */
img[src*="none.gif"] {
    opacity: 0;
    width: 1px !important;
    min-width: 1px !important;
}

/* Do not globally style layout tables. */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
    margin: 8px 0;
    font-size: 14px;
}

table.gruppofase { width: 100%; }

/* True data tables generated by the catalog parser. */
table.contents_table,
table#SchemaTop1_dlsSchema {
    width: 100%;
    border-collapse: collapse;
}

td.header_table {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    border: 1px solid var(--brand-dark);
    padding: 8px 10px;
}

td.body_table {
    border: 1px solid #d4dce6;
    padding: 8px 10px;
    vertical-align: top;
}

/* Procedure notes look like callouts instead of broken blocks. */
table.nota {
    width: 100%;
    border: 1px solid #e3d596;
    background: #fff9df;
    border-radius: 8px;
    margin: 10px 0 14px;
}

table.nota td {
    border: 0;
    padding: 9px 10px;
    vertical-align: top;
}

table.nota td:first-child {
    width: 36px;
}

/* Hidden iframe placeholders copied from legacy ASP markup. */
table[style*="height:0px"],
div[id^="iFrame__"] {
    display: none !important;
}

input[type="image"] {
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

.pdf-links {
    margin-top: 20px;
    padding: 10px 12px;
    border: 1px solid #bed5e8;
    border-radius: 8px;
    background: #f1f7fd;
}

.pdf-links h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--brand-dark);
}

.pdf-links ul {
    margin: 0;
    padding-left: 18px;
}

#nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 18;
}

@media (max-width: 980px) {
    body {
        font-size: 13px;
    }

    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(86vw, 360px);
        min-width: min(86vw, 360px);
        height: 100vh;
        border-right: 1px solid var(--line);
        border-bottom: 0;
        transform: translateX(-100%);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    }

    body.nav-open #sidebar { transform: translateX(0); }
    body.nav-open #nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    #main {
        padding: 14px;
    }

    body.nav-collapsed #main {
        padding-left: 14px;
    }

    article {
        padding: 12px;
        border-radius: 10px;
    }

    .page-nav {
        top: 0;
        margin: -4px 0 10px;
        padding-top: 8px;
    }
}