/* ── Region overlay context-menu ───────────────────────────────────────────── */
@keyframes ri-overlay-in {
    from { opacity: 0; transform: translate(8px, 8px) scale(0.92); }
    to   { opacity: 1; transform: translate(8px, 8px) scale(1); }
}

#ri-region-action-overlay[style*="display: block"] > div,
#ri-region-action-overlay[style*="display:block"] > div {
    animation: ri-overlay-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#ri-region-action-overlay a,
#ri-region-action-overlay button:not(#ri-overlay-close-btn) {
    transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}

#ri-region-action-overlay a:hover,
#ri-region-action-overlay button:not(#ri-overlay-close-btn):hover {
    background: rgba(255, 255, 255, 0.09) !important;
    padding-left: 20px !important;
}

#ri-region-action-overlay a:active,
#ri-region-action-overlay button:not(#ri-overlay-close-btn):active {
    background: rgba(255, 255, 255, 0.16) !important;
    transform: scale(0.98);
}

#ri-overlay-close-btn {
    transition: color 0.1s ease, transform 0.1s ease;
}
#ri-overlay-close-btn:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.2);
}

/* ── Light mode overrides ──────────────────────────────────────────────────── */
/* Typography tokens */
:root {
    --font-size-secondary: 1.55rem;
    --font-size-primary: 1.75rem;
    --font-size-highlight: 2.00rem;
    --font-size-title: 2.40rem;
    --font-size-display: 3.6rem;
    --font-size-critical: 3.35rem;
    --font-size-icon: 2.75rem;
    --nav-action-icon-size: 22px;
}

@media (max-width: 992px) {
    :root {
        --font-size-display: 3.2rem;
        --font-size-critical: 3.1rem;
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-display: 2.65rem;
        --font-size-critical: 2.9rem;
        --font-size-highlight: 1.85rem;
    }
}

@media (max-width: 768px) {
    #drilldown-nav > div {
        padding: 6px 10px !important;
        font-size: var(--font-size-secondary) !important;
        row-gap: 4px;
    }
}

/* Attivati da body[data-theme="light"] impostato dal clientside callback      */

/* Drilldown bar (ha colori inline hardcoded) */
body[data-theme="light"] #drilldown-nav > div {
    background-color: #e9ecef !important;
    border-bottom-color: #ced4da !important;
}

body[data-theme="light"] #drilldown-nav span,
body[data-theme="light"] #drilldown-nav a {
    color: #495057 !important;
}

/* Contenuto pagine */
body[data-theme="light"] .page-content,
body[data-theme="light"] #page-content {
    background-color: #f8f9fa;
}

/* Testo muted nelle card */
body[data-theme="light"] .text-muted {
    color: #6c757d !important;
}

#rfq-update-btn,
#rfq-update-btn:disabled {
    color: #ffffff !important;
}

/* Modern top navigation */
#main-navbar.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    min-height: 88px;
    padding: 0.95rem 1.6rem !important;
    background:
        linear-gradient(90deg, rgba(18, 24, 36, 0.98), rgba(13, 17, 27, 0.94)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    /* Moove the navbar left */
    margin-left: -1.6rem;
    width: calc(100% + 3.2rem);
}

#main-navbar .container,
#main-navbar .container-fluid {
    gap: 16px;
}

#main-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff !important;
    font-size: var(--font-size-highlight);
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

#main-navbar .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 36px;
    background: #3498db;
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(52, 152, 219, 0.55);
}

#main-navbar .navbar-nav {
    align-items: center;
    gap: 10px;
    width: 100%;
}

#main-navbar .nav-link,
#main-navbar .dropdown-toggle {
    color: #edf4fb !important;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    padding: 0.72rem 0.85rem !important;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: var(--font-size-highlight);
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

#main-navbar .nav-link:hover,
#main-navbar .nav-link:focus,
#main-navbar .dropdown-toggle:hover,
#main-navbar .dropdown-toggle:focus,
#main-navbar .show > .dropdown-toggle {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.12);
}

#main-navbar .dropdown-menu {
    margin-top: 12px;
    padding: 10px;
    min-width: 280px;
    background: #1d2430;
    border: 1px solid #465366;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

#main-navbar .dropdown-item {
    min-height: 46px;
    color: #e8eef6;
    border-radius: 10px;
    font-size: var(--font-size-secondary);
    font-weight: 700;
    display: flex;
    align-items: center;
}

#main-navbar .dropdown-item:hover,
#main-navbar .dropdown-item:focus {
    color: #ffffff;
    background: rgba(52, 152, 219, 0.26);
}

#main-navbar .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
    margin: 5px 4px;
}

#main-navbar .theme-toggle {
    min-width: unset;
    min-height: unset;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin-left: 12px;
    color: #ffffff;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(93, 173, 226, 0.52);
    border-radius: 50%;
    line-height: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#main-navbar .nav-action-icon {
    width: var(--nav-action-icon-size);
    height: var(--nav-action-icon-size);
    flex: 0 0 var(--nav-action-icon-size);
    object-fit: contain;
    object-position: center;
}

#main-navbar .theme-toggle img.nav-action-icon,
#main-navbar .gear-btn img.nav-action-icon {
    display: block;
    filter: invert(1);
}

#main-navbar .theme-toggle img.nav-action-sun {
    transform: scale(1.4);
}

body[data-theme="light"] #main-navbar .theme-toggle img,
body[data-theme="light"] #main-navbar .gear-btn img {
    filter: none;
}

#main-navbar .theme-toggle:hover,
#main-navbar .theme-toggle:focus {
    color: #ffffff;
    background: rgba(52, 152, 219, 0.25);
    border-color: rgba(174, 214, 241, 0.9);
}

#main-navbar .gear-btn {
    min-width: unset;
    min-height: unset;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin-left: 8px;
    color: #ffffff;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(93, 173, 226, 0.52);
    border-radius: 50%;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#main-navbar .gear-btn:hover,
#main-navbar .gear-btn:focus {
    color: #ffffff;
    background: rgba(52, 152, 219, 0.25);
    border-color: rgba(174, 214, 241, 0.9);
}

#main-navbar .navbar-toggler {
    border-color: rgba(219, 229, 239, 0.32);
    border-radius: 12px;
    min-height: 48px;
}

body[data-theme="light"] #main-navbar.app-navbar {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.96)) !important;
    border-bottom-color: #d8e0e8;
    box-shadow: 0 12px 30px rgba(31, 45, 61, 0.13);
}

body[data-theme="light"] #main-navbar .navbar-brand,
body[data-theme="light"] #main-navbar .nav-link,
body[data-theme="light"] #main-navbar .dropdown-toggle {
    color: #23303d !important;
}

body[data-theme="light"] #main-navbar .nav-link:hover,
body[data-theme="light"] #main-navbar .nav-link:focus,
body[data-theme="light"] #main-navbar .dropdown-toggle:hover,
body[data-theme="light"] #main-navbar .dropdown-toggle:focus,
body[data-theme="light"] #main-navbar .show > .dropdown-toggle {
    color: #0f1720 !important;
    background: #edf3f8;
}

body[data-theme="light"] #main-navbar .dropdown-menu {
    background: #ffffff;
    border-color: #d6dee7;
    box-shadow: 0 14px 34px rgba(31, 45, 61, 0.14);
}

body[data-theme="light"] #main-navbar .dropdown-item {
    color: #23303d;
}

body[data-theme="light"] #main-navbar .dropdown-item:hover,
body[data-theme="light"] #main-navbar .dropdown-item:focus {
    color: #0f1720;
    background: #edf3f8;
}

body[data-theme="light"] #main-navbar .theme-toggle {
    color: #23303d;
    background: #ffffff;
    border-color: #b8c9da;
}

body[data-theme="light"] #main-navbar .gear-btn {
    color: #23303d;
    background: #ffffff;
    border-color: #b8c9da;
}

/* Partner institution logos */
.navbar-partner-logos {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    margin-right: 10px;
}

.navbar-partner-logo-link {
    display: inline-flex;
    align-items: center;
    opacity: 0.92;
    transition: opacity 0.18s;
}

.navbar-partner-logo-link:hover {
    opacity: 1;
}

.navbar-partner-logo {
    height: 34px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.93);
    border-radius: 7px;
    padding: 4px 8px;
    display: block;
}

body[data-theme="light"] .navbar-partner-logos {
    border-left-color: rgba(0, 0, 0, 0.14);
}

body[data-theme="light"] .navbar-partner-logo {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px) {
    #main-navbar.app-navbar {
        min-height: 76px;
        padding: 0.78rem 1rem !important;
    }

    #main-navbar .navbar-brand {
        font-size: var(--font-size-primary);
    }

    #main-navbar .navbar-nav {
        align-items: stretch;
        gap: 6px;
        padding-top: 10px;
    }

    #main-navbar .nav-link,
    #main-navbar .dropdown-toggle {
        width: 100%;
        min-height: 50px;
    }

    #main-navbar .theme-toggle {
        margin-left: 0;
        margin-top: 4px;
        width: auto;
        min-height: unset;
    }

    .navbar-partner-logos {
        border-left: none;
        padding-left: 0;
        margin-right: 0;
        gap: 8px;
    }

    .navbar-partner-logo {
        height: 38px;
        max-width: 105px;
        padding: 4px 8px;
    }
}

@media (max-width: 768px) {
    #main-navbar.app-navbar {
        min-height: auto;
        padding: 0.72rem 0.8rem !important;
    }

    #main-navbar .navbar-brand {
        font-size: 1.25rem;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main-navbar .navbar-nav {
        gap: 6px;
    }

    #main-navbar .nav-link,
    #main-navbar .dropdown-toggle {
        width: 100%;
        min-height: 46px;
        padding: 0.55rem 0.85rem !important;
        font-size: 0.95rem;
        justify-content: flex-start;
    }

    #main-navbar .theme-toggle,
    #main-navbar .gear-btn {
        margin-left: 6px;
    }

    .navbar-partner-logos {
        flex-wrap: wrap;
        gap: 6px;
    }

    .navbar-partner-logo {
        height: 32px;
        max-width: 90px;
        padding: 3px 6px;
    }
}

/* Dark mode contrast fixes */
body[data-theme="dark"] {
    color: #e9ecef;
    background-color: #08101e !important;
    /* Dash 4 dcc.Dropdown CSS variable overrides */
    --Dash-Fill-Inverse-Strong: rgba(10, 16, 32, 0.82);
    --Dash-Stroke-Strong: rgba(255, 255, 255, 0.12);
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.08);
    --Dash-Text-Primary: #e9ecef;
    --Dash-Text-Strong: #e9ecef;
    --Dash-Text-Weak: #b7c0cc;
    --Dash-Text-Disabled: #888d93;
    --Dash-Fill-Interactive-Strong: #3498db;
    --Dash-Fill-Interactive-Weak: rgba(52, 152, 219, 0.14);
    --Dash-Fill-Disabled: #3a4149;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.5);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.2);
}

/* Dash 4 dcc.Dropdown dark mode — trigger button */
body[data-theme="dark"] .dash-dropdown {
    background: rgba(10, 16, 32, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    color: #e9ecef;
}

/* Dash 4 dcc.Dropdown dark mode — selected option highlighted */
body[data-theme="dark"] .dash-dropdown-option[data-selected="true"],
body[data-theme="dark"] .dash-dropdown-option[aria-selected="true"] {
    background-color: #3498db;
    color: #ffffff;
}

body[data-theme="dark"] .dash-dropdown-option:hover {
    background-color: #3a4149;
    color: #ffffff;
}

/* dbc.Tabs dark mode — full rules in the glassmorphism block below */

body[data-theme="dark"] .tab-content {
    color: #e9ecef;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6 {
    color: #f1f4f8;
}

body[data-theme="dark"] label,
body[data-theme="dark"] .form-label,
body[data-theme="dark"] .form-check-label,
body[data-theme="dark"] .card-title {
    color: #f1f4f8;
}

body[data-theme="dark"] .text-muted {
    color: #b7c0cc !important;
}

/* ── Global glassmorphism: every dbc.Card / modal / list-group ─────────────── */
body[data-theme="dark"] .card,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .list-group-item {
    color: #e9ecef;
    background: rgba(14, 22, 42, 0.52) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.20);
    border-radius: 12px !important;
}

body[data-theme="dark"] .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e9ecef;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 12px 12px 0 0 !important;
}

body[data-theme="dark"] .card-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 12px 12px !important;
}

body[data-theme="light"] .card {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* KPI labels inside Bootstrap cards — make them fully visible */
body[data-theme="dark"] .card h6.text-muted,
body[data-theme="dark"] .card .text-muted {
    color: rgba(200, 212, 230, 0.90) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body[data-theme="dark"] .card h3 {
    font-weight: 800 !important;
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
body[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    gap: 4px;
}

body[data-theme="dark"] .nav-tabs .nav-link {
    color: rgba(200, 212, 230, 0.55);
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 7px 16px;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s, background 0.15s;
    border-bottom: 2px solid transparent;
    background: transparent !important;
}

body[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: rgba(200, 212, 230, 0.85);
    border-bottom: 2px solid rgba(255, 255, 255, 0.20);
}

body[data-theme="dark"] .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background: transparent !important;
    border-bottom: 2px solid #3498db !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

body[data-theme="dark"] .tab-content {
    background: transparent;
}

/* ── Modals ─────────────────────────────────────────────────────────────────── */
body[data-theme="dark"] .modal-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e9ecef;
    border-radius: 12px 12px 0 0 !important;
}

body[data-theme="dark"] .modal-body {
    background: transparent;
    color: #e9ecef;
}

body[data-theme="dark"] .modal-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 0 12px 12px !important;
}

/* ── HR dividers ─────────────────────────────────────────────────────────────── */
body[data-theme="dark"] hr {
    border-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 1;
}

/* ── Form controls inside glass cards ────────────────────────────────────────── */
body[data-theme="dark"] .card .form-control,
body[data-theme="dark"] .card .form-select {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e9ecef !important;
}

body[data-theme="dark"] .dropdown-menu {
    background: rgba(10, 16, 32, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

body[data-theme="dark"] .dropdown-item {
    color: #e9ecef;
}

body[data-theme="dark"] .dropdown-item:focus,
body[data-theme="dark"] .dropdown-item:hover {
    color: #ffffff;
    background-color: #3a4149;
}

/* ── Glassmorphism leaflet popups (all themes) ─────────────────────────────── */
.leaflet-popup-content-wrapper {
    background: rgba(8, 16, 30, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
    color: #e9ecef !important;
    border-radius: 12px !important;
}

.leaflet-popup-tip-container .leaflet-popup-tip {
    background: rgba(8, 16, 30, 0.75) !important;
    box-shadow: none !important;
}

body[data-theme="light"] .leaflet-popup-content-wrapper {
    background: rgba(240, 245, 255, 0.82) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    color: #1a1a2e !important;
}

body[data-theme="light"] .leaflet-popup-tip-container .leaflet-popup-tip {
    background: rgba(240, 245, 255, 0.82) !important;
}

.leaflet-popup-content h1,
.leaflet-popup-content h2,
.leaflet-popup-content h3,
.leaflet-popup-content h4,
.leaflet-popup-content h5,
.leaflet-popup-content h6,
.leaflet-popup-content p,
.leaflet-popup-content li {
    color: #e9ecef;
}

body[data-theme="light"] .leaflet-popup-content h1,
body[data-theme="light"] .leaflet-popup-content h2,
body[data-theme="light"] .leaflet-popup-content h3,
body[data-theme="light"] .leaflet-popup-content h4,
body[data-theme="light"] .leaflet-popup-content h5,
body[data-theme="light"] .leaflet-popup-content h6,
body[data-theme="light"] .leaflet-popup-content p,
body[data-theme="light"] .leaflet-popup-content li {
    color: #1a1a2e;
}

body[data-theme="dark"] .Select-control {
    background: rgba(10, 16, 32, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e9ecef;
    border-radius: 8px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[data-theme="dark"] .Select-control:hover,
body[data-theme="dark"] .Select.is-focused:not(.is-open) > .Select-control {
    border-color: #3498db;
    box-shadow: 0 0 0 0.12rem rgba(52, 152, 219, 0.18);
}

body[data-theme="dark"] .Select-placeholder,
body[data-theme="dark"] .Select-value,
body[data-theme="dark"] .Select-value-label,
body[data-theme="dark"] .Select-input,
body[data-theme="dark"] .Select-input > input {
    color: #e9ecef !important;
}

body[data-theme="dark"] .Select-arrow {
    border-color: #c8d0d8 transparent transparent;
}

body[data-theme="dark"] .Select.is-open .Select-arrow {
    border-color: transparent transparent #c8d0d8;
}

body[data-theme="dark"] .Select-menu-outer {
    color: #e9ecef;
    background: rgba(10, 16, 32, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

body[data-theme="dark"] .Select-option {
    color: #e9ecef;
    background: transparent !important;
}

body[data-theme="dark"] .Select-option.is-focused {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"] .Select-option.is-selected {
    color: #ffffff;
    background-color: #3498db;
}

/* ── Tool-panel info blocks (accent-border style) ───────────────────────── */
.tool-info-card {
    padding: 11px 14px 11px 15px;
    margin-bottom: 9px;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid #3498db;
    transition: background 0.15s, border-left-color 0.15s;
}

.tool-info-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tool-info-title {
    font-size: var(--font-size-secondary);
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}

.tool-info-body {
    font-size: var(--font-size-secondary);
    line-height: 1.6;
    margin: 0;
    color: #b7c0cc;
}

body[data-theme="light"] .tool-info-card {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .tool-info-card:hover {
    background: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .tool-info-body {
    color: #495057;
}

/* Retrofit & Risk right-panel: tab labels and tools-panel text */
#rfq-right-tabs .nav-link,
.tools-panel .nav-link {
    font-size: var(--font-size-secondary) !important;
    font-weight: 600;
}

.tools-panel .form-label,
.tools-panel label,
.tools-panel .fw-bold {
    font-size: var(--font-size-secondary);
}

/* Tools panel: forza tutto al token secondario (sovrascrive Bootstrap small) */
.tools-panel small {
    font-size: var(--font-size-secondary) !important;
}

/* Card a sinistra: uniforma al pannello strumenti SENZA !important,
   così gli stili inline (es. fontSize:"10px") vincono ancora */
.card small,
.card .small,
.card p {
    font-size: var(--font-size-secondary);
}

/* Retrofit sliders: keep percentage labels readable without changing behavior */
body[data-theme="dark"] .rc-slider-mark .rc-slider-mark-text,
body[data-theme="dark"] .tools-panel .rc-slider-mark .rc-slider-mark-text,
body[data-theme="dark"] #rfq-right-tabs .rc-slider-mark .rc-slider-mark-text {
    color: #ffffff !important;
    background-color: #050a10 !important;
    border: 1px solid #9fb4c8;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: var(--font-size-secondary);
    font-weight: 900;
    line-height: 1.2;
    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}

body[data-theme="dark"] .rc-slider-mark .rc-slider-mark-text-active,
body[data-theme="dark"] .tools-panel .rc-slider-mark .rc-slider-mark-text-active,
body[data-theme="dark"] #rfq-right-tabs .rc-slider-mark .rc-slider-mark-text-active {
    color: #ffffff !important;
    background-color: #0b74b8 !important;
    border-color: #d6ecff;
}

body[data-theme="dark"] .rc-slider-tooltip-inner,
body[data-theme="dark"] .tools-panel .rc-slider-tooltip-inner,
body[data-theme="dark"] #rfq-right-tabs .rc-slider-tooltip-inner {
    color: #ffffff !important;
    background-color: #111820 !important;
    border: 1px solid #3498db;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .rc-slider-tooltip-placement-bottom .rc-slider-tooltip-arrow {
    border-bottom-color: #111820 !important;
}

body[data-theme="light"] .tools-panel .rc-slider-mark-text {
    color: #212529 !important;
    background-color: transparent !important;
    border-color: transparent;
    padding: 0;
    text-shadow: none;
}

/* Tools panel — card container */
.tools-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 16px;
    overflow-y: auto;
}

body[data-theme="light"] .tools-panel {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.10);
}

/* Tools panel scrollbar */
.tools-panel::-webkit-scrollbar {
    width: 5px;
}
.tools-panel::-webkit-scrollbar-track {
    background: transparent;
}
.tools-panel::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}
body[data-theme="light"] .tools-panel::-webkit-scrollbar-thumb {
    background: #adb5bd;
}

/* ── Modern KPI cards ────────────────────────────────────────────────────── */
.kpi-card-modern {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top: 3px solid currentColor;
    border-radius: 12px;
    padding: 14px 18px 12px;
    transition: background 0.15s, transform 0.15s;
    height: 100%;
}
.kpi-card-modern:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}
body[data-theme="light"] .kpi-card-modern {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.10);
}
body[data-theme="light"] .kpi-card-modern:hover {
    background: rgba(0, 0, 0, 0.05);
}
.kpi-label {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 6px;
    line-height: 1.3;
}
body[data-theme="light"] .kpi-label {
    color: #1a1a2e !important;
}
.kpi-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.kpi-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}
body[data-theme="light"] .kpi-sub {
    color: rgba(0, 0, 0, 0.55);
}

/* ── Panel section labels (chip-style) ───────────────────────────────────── */
.panel-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 10px;
    margin-top: 4px;
    white-space: nowrap;
}
body[data-theme="light"] .panel-section-label {
    color: rgba(0, 0, 0, 0.65);
}
.panel-section-label::after {
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    min-width: 20px;
}
body[data-theme="light"] .panel-section-label::after {
    background: rgba(0, 0, 0, 0.12);
}

/* ── Province nav cards ───────────────────────────────────────────────────── */
.province-nav-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 10px !important;
    transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
}
.province-nav-card:hover {
    background: rgba(52, 152, 219, 0.12) !important;
    border-color: rgba(52, 152, 219, 0.35) !important;
    transform: translateY(-1px);
}
body[data-theme="light"] .province-nav-card {
    background: rgba(0, 0, 0, 0.025) !important;
    border-color: rgba(0, 0, 0, 0.09) !important;
}
body[data-theme="light"] .province-nav-card:hover {
    background: rgba(52, 152, 219, 0.08) !important;
    border-color: rgba(52, 152, 219, 0.30) !important;
}

/* ── Istat Data controls ─────────────────────────────────────────────────── */
/* Istat Data controls */
.istat-filter-bar {
    margin: 10px 0;
    padding: 0 10px;
}

.istat-filter-bar.row {
    margin-left: 0;
    margin-right: 0;
}

.istat-map-panel {
    width: 65%;
    min-width: 0;
    position: relative;
}

.istat-risk-legend {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    max-width: calc(100% - 24px);
    color: #e9ecef;
    background: rgba(6, 12, 26, 0.80);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40);
    padding: 8px 10px;
}

.istat-risk-legend-title {
    font-size: var(--font-size-secondary);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 6px;
}

.istat-risk-legend-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    font-size: var(--font-size-secondary);
}

.istat-dropdown .Select-control {
    min-height: 38px;
    height: 38px;
    background: rgba(10, 16, 32, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.istat-dropdown.is-focused:not(.is-open) > .Select-control,
.istat-dropdown .Select.is-focused:not(.is-open) > .Select-control,
.istat-dropdown .Select-control:hover {
    border-color: #3498db;
    box-shadow: 0 0 0 0.12rem rgba(52, 152, 219, 0.18);
}

.istat-dropdown .Select-placeholder,
.istat-dropdown .Select-value,
.istat-dropdown .Select-value-label,
.istat-dropdown .Select-input,
.istat-dropdown .Select-input > input {
    color: #e9ecef !important;
    line-height: 36px;
}

.istat-dropdown .Select-arrow {
    border-color: #c8d0d8 transparent transparent;
}

.istat-dropdown.is-open .Select-arrow,
.istat-dropdown .Select.is-open .Select-arrow {
    border-color: transparent transparent #c8d0d8;
}

.istat-dropdown .Select-menu-outer {
    background: rgba(10, 16, 32, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    margin-top: 4px;
    overflow: hidden;
    z-index: 2000;
}

.istat-dropdown .Select-option {
    background: transparent !important;
    color: #e9ecef;
}

.istat-dropdown .Select-option.is-focused {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff;
}

.istat-dropdown .Select-option.is-selected {
    background-color: #3498db;
    color: #ffffff;
}

.leaflet-popup-content select[id^="dropdown-"] {
    width: 100%;
    min-height: 34px;
    color: #e9ecef;
    background: rgba(10, 16, 32, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[data-theme="light"] .istat-dropdown .Select-control,
body[data-theme="light"] .istat-risk-legend,
body[data-theme="light"] .leaflet-popup-content select[id^="dropdown-"] {
    color: #212529;
    background-color: #ffffff;
    border-color: #ced4da;
}

body[data-theme="light"] .istat-dropdown .Select-placeholder,
body[data-theme="light"] .istat-dropdown .Select-value,
body[data-theme="light"] .istat-dropdown .Select-value-label,
body[data-theme="light"] .istat-dropdown .Select-input,
body[data-theme="light"] .istat-dropdown .Select-input > input {
    color: #212529 !important;
}

body[data-theme="light"] .istat-dropdown .Select-menu-outer {
    background-color: #ffffff;
    border-color: #ced4da;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .istat-dropdown .Select-option {
    background-color: #ffffff;
    color: #212529;
}

body[data-theme="light"] .istat-dropdown .Select-option.is-focused {
    background-color: #e9ecef;
    color: #212529;
}

body[data-theme="light"] .istat-dropdown .Select-option.is-selected {
    background-color: #2c3e50;
    color: #ffffff;
}

/* Bootstrap dbc.Select dark mode */
body[data-theme="dark"] .form-select {
    color: #e9ecef;
    background-color: rgba(10, 16, 32, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[data-theme="dark"] .form-select:focus {
    color: #e9ecef;
    background-color: rgba(10, 16, 32, 0.80) !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 0.15rem rgba(52, 152, 219, 0.22);
}

body[data-theme="dark"] .form-select option {
    background-color: #0a1020;
    color: #e9ecef;
}

/* dcc.Dropdown light mode — ensure readable text on white background */
body[data-theme="light"] .Select-control {
    background-color: #ffffff;
    border-color: #ced4da;
    color: #212529;
}

body[data-theme="light"] .Select-placeholder,
body[data-theme="light"] .Select-value,
body[data-theme="light"] .Select-value-label,
body[data-theme="light"] .Select-input,
body[data-theme="light"] .Select-input > input {
    color: #212529 !important;
}

body[data-theme="light"] .Select-menu-outer {
    background-color: #ffffff;
    border-color: #ced4da;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

body[data-theme="light"] .Select-option {
    background-color: #ffffff;
    color: #212529;
}

body[data-theme="light"] .Select-option.is-focused {
    background-color: #e9ecef;
    color: #212529;
}

body[data-theme="light"] .Select-option.is-selected {
    background-color: #3498db;
    color: #ffffff;
}

/* Dash 4 dcc.Dropdown light mode */
body[data-theme="light"] {
    --Dash-Fill-Inverse-Strong: #ffffff;
    --Dash-Stroke-Strong: #ced4da;
    --Dash-Text-Primary: #212529;
    --Dash-Text-Strong: #212529;
    --Dash-Text-Weak: #6c757d;
    --Dash-Text-Disabled: #adb5bd;
    --Dash-Fill-Interactive-Strong: #3498db;
    --Dash-Fill-Interactive-Weak: rgba(52, 152, 219, 0.08);
    --Dash-Fill-Disabled: #e9ecef;
}

body[data-theme="light"] .dash-dropdown {
    background-color: #ffffff;
    color: #212529;
}

body[data-theme="light"] .dash-dropdown-option:hover {
    background-color: #e9ecef;
    color: #212529;
}

body[data-theme="light"] .dash-dropdown-option[data-selected="true"],
body[data-theme="light"] .dash-dropdown-option[aria-selected="true"] {
    background-color: #3498db;
    color: #ffffff;
}

/* dbc.Tabs light mode */
body[data-theme="light"] .nav-tabs .nav-link {
    color: #495057;
}

body[data-theme="light"] .nav-tabs .nav-link.active {
    color: #212529;
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
}

/* ── Scale selector nav buttons ─────────────────────────────────────────── */
.scale-nav-btn {
    position: relative;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

.scale-nav-seismic:hover, .scale-nav-seismic:focus {
    color: #e74c3c !important;
    border-color: rgba(231, 76, 60, 0.35) !important;
}

.scale-nav-retrofit:hover, .scale-nav-retrofit:focus {
    color: #2ecc71 !important;
    border-color: rgba(46, 204, 113, 0.35) !important;
}

.scale-nav-evasim:hover, .scale-nav-evasim:focus {
    color: #3498db !important;
    border-color: rgba(52, 152, 219, 0.35) !important;
}

/* ── Scale selector overlay ─────────────────────────────────────────────── */
.scale-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    pointer-events: all;
}

.sc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 22, 0.55);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.sc-panel {
    position: absolute;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    width: min(940px, calc(100vw - 32px));
    background: rgba(16, 22, 38, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none;
    border-radius: 0 0 18px 18px;
    padding: 22px 28px 28px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px);
    pointer-events: all;
    animation: sc-slide-in 0.18s ease-out;
}

@keyframes sc-slide-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-context-label {
    font-size: var(--font-size-secondary);
    font-weight: 700;
    color: #8eadc8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sc-cards-container {
    display: flex;
    gap: 16px;
}

.sc-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    position: relative;
    overflow: hidden;
}

.sc-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sc-accent, #3498db);
    transform: scaleX(0);
    transition: transform 0.2s ease;
    transform-origin: left;
}

.sc-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    text-decoration: none !important;
    color: inherit !important;
}

.sc-card:hover::before {
    transform: scaleX(1);
}

.sc-icon {
    font-size: 2.2rem;
    line-height: 1;
    flex: 0 0 auto;
    margin-top: 2px;
}

.sc-title {
    font-size: var(--font-size-primary);
    font-weight: 800;
    color: #f0f4f8;
    margin: 0 0 6px;
    line-height: 1.2;
}

.sc-desc {
    font-size: var(--font-size-secondary);
    color: #8eadc8;
    margin: 0;
    line-height: 1.5;
}

.sc-arrow {
    position: absolute;
    bottom: 16px;
    right: 18px;
    font-size: var(--font-size-primary);
    color: var(--sc-accent, #3498db);
    opacity: 0;
    transition: opacity 0.18s, transform 0.18s;
}

.sc-card:hover .sc-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* ── Accented cards (per-card accent color — used by EVASIM) ──────────────── */
.sc-card-accented {
    border-left: 3px solid var(--sc-accent, #3498db);
    padding-left: 15px; /* compensate for the 3px border */
}

/* bottom bar always faintly visible, full on hover */
.sc-card-accented::before {
    opacity: 0.35;
    transform: scaleX(1);
}
.sc-card-accented:hover::before {
    opacity: 1;
}

/* icon gets a soft glow circle in the card accent color */
.sc-card-accented .sc-icon {
    background: color-mix(in srgb, var(--sc-accent, #3498db) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc-accent, #3498db) 35%, transparent);
    border-radius: 12px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, box-shadow 0.18s;
}
.sc-card-accented:hover .sc-icon {
    background: color-mix(in srgb, var(--sc-accent, #3498db) 28%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--sc-accent, #3498db) 40%, transparent);
}

/* tinted background on hover */
.sc-card-accented:hover {
    background: color-mix(in srgb, var(--sc-accent, #3498db) 8%, rgba(255,255,255,0.03));
    border-color: color-mix(in srgb, var(--sc-accent, #3498db) 55%, transparent);
    border-left-color: var(--sc-accent, #3498db);
}

/* small type badge */
.sc-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 20px;
    color: var(--sc-accent, #3498db);
    background: color-mix(in srgb, var(--sc-accent, #3498db) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc-accent, #3498db) 35%, transparent);
}

/* Light mode overrides */
body[data-theme="light"] .sc-card-accented .sc-icon {
    background: color-mix(in srgb, var(--sc-accent, #3498db) 10%, #fff);
    border-color: color-mix(in srgb, var(--sc-accent, #3498db) 30%, transparent);
}
body[data-theme="light"] .sc-card-accented:hover {
    background: color-mix(in srgb, var(--sc-accent, #3498db) 7%, #fff);
    border-color: color-mix(in srgb, var(--sc-accent, #3498db) 55%, transparent);
}
body[data-theme="light"] .sc-badge {
    background: color-mix(in srgb, var(--sc-accent, #3498db) 10%, #fff);
    border-color: color-mix(in srgb, var(--sc-accent, #3498db) 30%, transparent);
}

/* Light mode */
body[data-theme="light"] .sc-panel {
    background: rgba(245, 248, 252, 0.97);
    border-color: #d0dae6;
    box-shadow: 0 24px 50px rgba(31, 45, 61, 0.18);
}

body[data-theme="light"] .sc-context-label {
    color: #5a7590;
    border-bottom-color: rgba(0, 0, 0, 0.10);
}

body[data-theme="light"] .sc-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: #d0dae6;
}

body[data-theme="light"] .sc-card:hover {
    background: #ffffff;
    border-color: #a8bdd0;
}

body[data-theme="light"] .sc-title {
    color: #1a2535;
}

body[data-theme="light"] .sc-desc {
    color: #5a7590;
}

body[data-theme="light"] .sc-backdrop {
    background: rgba(180, 195, 210, 0.4);
}

@media (max-width: 768px) {
    .sc-panel {
        top: 76px;
        padding: 16px;
        border-radius: 0 0 14px 14px;
    }

    .sc-cards-container {
        flex-direction: column;
        gap: 12px;
    }

    .sc-card {
        padding: 16px 14px;
    }
}

/* ── Role selector (settings modal) ─────────────────────────────────────────── */
.role-selector-btn {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    transition: all 0.18s ease;
}