/* ===========================================================
   BASE.CSS - Versione migliorata AGID compatibile
   Variabili e colori principali
   =========================================================== */
:root {
    --primary: #02509A;
    --primary-dark: #003F7F;
    --primary-hover: #003F7F;
    --accent: #00BDF2;
    --night: #1A1F26;
    --white: #FFFFFF;
    --muted-bg: #f8f9fa;
}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.it-header-wrapper {
    background-color: var(--night);
    color: var(--white);
}

.it-header-slim-wrapper {
    background-color: var(--night);
    color: var(--white);
    border-bottom: 1px solid #2e3640;
}

    .it-header-slim-wrapper a {
        color: var(--white);
        text-decoration: none;
    }

        .it-header-slim-wrapper a:hover {
            color: var(--accent);
        }

.it-header-center-wrapper {
    background-color: var(--primary);
}

    .it-header-center-wrapper a img {
        max-height: 70px;
        object-fit: contain;
    }

.it-brand-text h2, .it-brand-text h3 {
    color: var(--white) !important;
}

.it-header-navbar-wrapper {
    background-color: var(--primary);
}

.navbar-nav .nav-link {
    color: var(--white) !important;
    font-weight: 500;
    padding: 0.75rem 1rem;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background-color: var(--primary-dark);
        border-radius: 4px;
    }

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 500;
}

    .btn-outline-primary:hover {
        background-color: var(--primary);
        color: var(--white);
    }

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
}

    .btn-primary:hover {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
    }

/* header small buttons */
.it-access-top-wrapper .btn,
.header-slim-right-zone .btn {
    background-color: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    transition: all .2s ease-in-out;
}

    .it-access-top-wrapper .btn:hover,
    .header-slim-right-zone .btn:hover {
        background-color: var(--accent);
        border-color: var(--accent);
        color: var(--night);
    }

/* ===========================================================
   DROPDOWN / AREA PERSONALE
   - regole mirate per rimuovere la freccia/rombo e per icone
   =========================================================== */
.dropdown-menu {
    background-color: #004080;
    border: none;
    border-radius: .25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

    /* testo interno dropdown */
    .dropdown-menu .list-item,
    .dropdown-menu .list-item span {
        color: var(--white) !important;
        font-weight: 500;
    }

        .dropdown-menu .list-item:hover,
        .dropdown-menu .list-item:focus {
            background-color: #0066cc;
            color: var(--white) !important;
            text-decoration: none;
        }

    /* forza fill solo per SVG all'interno dei dropdown (mirato) */
    .dropdown-menu svg,
    .dropdown-menu svg * {
        fill: var(--white) !important;
        stroke: var(--white) !important;
    }

    /* rimuove eventuali pseudo frecce decorative predefinite */
    .dropdown-menu::before,
    .dropdown-menu::after {
        display: none !important;
        content: none !important;
    }

/* ===========================================================
   SPINNER / LOADING MODAL
   =========================================================== */
.progress-spinner {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-block;
    position: relative;
}

    .progress-spinner .spinner-inner {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: .35rem solid rgba(0,0,0,0.08);
        border-top-color: #0066cc;
        border-right-color: #0066cc;
        border-bottom-color: rgba(0,102,204,0.25);
        border-left-color: rgba(0,102,204,0.25);
        animation: spin-rotate 1s linear infinite;
    }

@keyframes spin-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* disattiva rotazioni o animazioni sul testo (problema segnalato) */
#loadingModal .loading-text {
    transform: none !important;
    animation: none !important;
}

/* spacing e look modale */
#loadingModal .modal-body {
    background-color: var(--muted-bg) !important;
    padding: 2.5rem 2rem;
}

#loadingModal .progress-spinner-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loadingModal .modal-header {
    background-color: #0066cc !important;
    color: var(--white) !important;
    padding: 1rem 1.5rem;
}

#loadingModal .modal-title {
    font-weight: 600;
    color: var(--white) !important;
    display: flex;
    align-items: center;
}

    #loadingModal .modal-title svg {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .6rem;
        fill: currentColor;
    }

#loadingModal .modal-content {
    border-radius: 1rem !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.15);
    border: none;
}

/* ===========================================================
   MODALI: forzo bianco per titolo/icone (mirato solo alle modali target)
   =========================================================== */
#contactModal .modal-header .icon,
#loadingModal .modal-header .icon,
#contactModal .modal-title,
#loadingModal .modal-title {
    color: var(--white) !important;
}

    #contactModal .modal-header .icon *, #loadingModal .modal-header .icon * {
        fill: var(--white) !important;
        stroke: var(--white) !important;
    }

#contactModal .modal-footer .btn .icon, #loadingModal .modal-footer .btn .icon,
#contactModal .modal-footer .btn .icon *, #loadingModal .modal-footer .btn .icon * {
    fill: var(--white) !important;
    stroke: var(--white) !important;
    color: var(--white) !important;
}

/* ===========================================================
   CARD
   =========================================================== */
.card {
    border-radius: 8px;
    background-color: var(--muted-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all .2s ease-in-out;
}

    .card:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transform: translateY(-2px);
    }

    .card .icon {
        transition: transform .2s ease, color .2s ease;
    }

    .card:hover .icon {
        transform: scale(1.1);
        color: var(--primary);
    }

/* ===========================================================
   HEADINGS / TEXT
   Nota: headings generali scuri, ma override per footer/brand dove serve
   =========================================================== */
h1, h2, h3, h4, h5 {
    color: #1A1F26;
}

/* footer specific heading override (evita conflitti con regola generale) */
#footer-bg h3,
#footer-bg h2 {
    color: var(--white) !important;
}

/* ===========================================================
   FOOTER
   =========================================================== */
#footer-bg {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

    #footer-bg ul li a {
        color: #B9D6FF !important;
        font-weight: bold;
        text-decoration: none;
        transition: color .2s ease-in-out;
    }

        #footer-bg ul li a:hover, #footer-bg ul li a:focus {
            color: var(--white) !important;
            text-decoration: underline;
        }

    #footer-bg .list-group-item {
        background-color: transparent !important;
        border: 0;
        font-weight: bold;
        padding-top: 5px;
        color: var(--white) !important;
    }

    #footer-bg .footer-bottom {
        background-color: var(--primary-dark) !important;
        color: var(--white) !important;
        font-size: .9rem;
        text-align: center;
        padding: 8px 0;
    }

        #footer-bg .footer-bottom a {
            color: var(--white) !important;
            font-weight: 600;
        }

/* ===========================================================
   ACCESSIBILITÀ / LINK / FORM
   =========================================================== */
.badge.bg-danger {
    background-color: #E60028 !important;
}

.badge.bg-light {
    background-color: #F8F9FA !important;
    color: #1C1C1C !important;
}

a:focus, button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

    a:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(0,189,242,.25);
}

/* section titles */
.it-header-block h1, .it-header-block .h4 {
    color: #1A1F26;
}

.it-header-block span {
    color: #333;
}

/* responsive tweaks */
@media (max-width: 991px) {
    .navbar-nav .nav-link {
        padding: .5rem .75rem;
    }

    .header-slim-right-zone {
        flex-direction: column;
        align-items: flex-end;
    }

    .it-brand-text h2 {
        font-size: 1.2rem;
    }
}

/* utility */
.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-dark {
    background-color: var(--night) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.btn-warning:hover {
    background-color: #ffca2c;
    color: #000;
    transform: scale(1.03);
    transition: all 0.2s ease-in-out;
}

/* Font più moderno e leggibile */
.steppers-header,
.progress-step {
    font-family: "Titillium Web", "Open Sans", sans-serif;
}

/* Cerchietto numerato */
.steppers-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background-color: #fff;
    color: #02509a;
    font-weight: 700;
    font-size: 0.95rem;
    margin-right: 0.5rem;
    transition: all 0.3s ease-in-out;
}

/* Label step (testo accanto al numero) */
.progress-step {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

    /* Step attivo */
    .progress-step.active {
        background-color: #eaf3fb; /* sfondo chiaro blu */
        color: #02509a;
        border-radius: 6px;
        box-shadow: inset 0 -3px 0 #02509a;
    }

        /* Cerchio step attivo */
        .progress-step.active .steppers-number {
            background-color: #02509a;
            color: #fff;
            border-color: #02509a;
            box-shadow: 0 0 0 4px rgba(2, 80, 154, 0.15);
        }

    /* Hover su step non attivo */
    .progress-step:hover:not(.active) {
        background-color: #f8fafc;
        color: #00457a;
    }

    /* Step completato (opzionale, se hai logica CSS per completed) */
    .progress-step.completed .steppers-number {
        background-color: #1a8754;
        border-color: #1a8754;
        color: #fff;
    }
/* Font generale */
.steppers-header,
.progress-step {
    font-family: "Titillium Web", "Open Sans", sans-serif;
}

/* STEP BASE (non attivo) */
.progress-step {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563; /* grigio scuro elegante */
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background-color: #f9fafb; /* sfondo chiaro */
    transition: all 0.3s ease-in-out;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb; /* leggero bordo */
}

/* Cerchietto numerato - non attivo */
.steppers-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background-color: #ffffff;
    color: #64748b;
    font-weight: 700;
    font-size: 0.95rem;
    margin-right: 0.5rem;
    transition: all 0.3s ease-in-out;
}

/* Hover su step non attivo */
.progress-step:hover:not(.active) {
    background-color: #f1f5f9;
    color: #02509a;
    border-color: #dbeafe;
}

    .progress-step:hover:not(.active) .steppers-number {
        border-color: #93c5fd;
        color: #02509a;
    }

/* STEP ATTIVO */
.progress-step.active {
    background-color: #eaf3fb;
    color: #02509a;
    border-color: #c7e0f9;
    box-shadow: inset 0 -3px 0 #02509a;
}

    /* Cerchio step attivo */
    .progress-step.active .steppers-number {
        background-color: #02509a;
        color: #ffffff;
        border-color: #02509a;
        box-shadow: 0 0 0 4px rgba(2, 80, 154, 0.15);
    }

/* STEP COMPLETATO (facoltativo) */
.progress-step.completed {
    background-color: #f0fdf4;
    color: #1a8754;
    border-color: #86efac;
}

    .progress-step.completed .steppers-number {
        background-color: #1a8754;
        border-color: #1a8754;
        color: #ffffff;
    }

/* Responsive migliorato */
@media (max-width: 768px) {
    .progress-step {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .steppers-number {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* Container principale */
.breadcrumb-container {
    background-color: #f9fafb; /* grigio chiarissimo */
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Lista breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

/* Ogni elemento */
.breadcrumb-item {
    display: flex;
    align-items: center;
    color: #4b5563;
    font-family: "Titillium Web", "Open Sans", sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    position: relative;
    transition: all 0.2s ease;
}

    /* Link cliccabili */
    .breadcrumb-item a {
        color: #02509a;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover {
            color: #003366;
            text-decoration: underline;
        }

    /* Separatore (/) */
    .breadcrumb-item .separator {
        margin: 0 0.5rem;
        color: #9ca3af;
        font-weight: 400;
    }

    /* Icona */
    .breadcrumb-item svg.icon {
        width: 1rem;
        height: 1rem;
        margin-right: 0.4rem;
        fill: #02509a;
        transition: fill 0.2s ease;
    }

    /* Step attivo (ultimo) */
    .breadcrumb-item.active {
        color: #111827;
        font-weight: 700;
    }

        .breadcrumb-item.active svg.icon {
            fill: #111827;
        }

    /* Effetto hover solo sugli elementi precedenti */
    .breadcrumb-item:not(.active):hover svg.icon {
        fill: #003366;
    }

/* Responsive */
@media (max-width: 768px) {
    .breadcrumb-container {
        padding: 0.5rem 1rem;
    }

    .breadcrumb-item {
        font-size: 0.85rem;
    }

        .breadcrumb-item .separator {
            margin: 0 0.25rem;
        }
}
/* ==========================
   VERIFICA ISTANZA — RESTYLE MIGLIORATO
   Distanze e allineamento ottimizzati
   ========================== */

#containerVerificaIstanza {
  background: #f9fbfd;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 6px 18px rgba(2,40,80,0.06);
  max-width: 650px;
  margin: 2rem auto;
  transition: all 0.2s ease;
}

#containerVerificaIstanza:hover {
  box-shadow: 0 10px 28px rgba(2,40,80,0.08);
}

#containerVerificaIstanza p {
  color: #374151;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

#containerVerificaIstanza .form-group {
  position: relative;
  margin-bottom: 1.8rem;
  text-align: left;
}

/* --- Input --- */
#containerVerificaIstanza .form-control {
  width: 100%;
  font-size: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background-color: #fff;
  color: #1f2937;
  transition: all 0.15s ease;
  margin-top: 0.4rem; /* 👉 distanza tra label e campo */
}

#containerVerificaIstanza .form-control:focus {
  border-color: #02509A;
  box-shadow: 0 0 0 3px rgba(2,80,154,0.15);
  outline: none;
}

/* --- Label --- */
#containerVerificaIstanza label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e3a8a;
  margin-bottom: 0.2rem;
  display: block;
  letter-spacing: 0.2px;
}

/* --- Errori --- */
#containerVerificaIstanza .invalid-feedback {
  color: #cc334d;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* --- Bottone --- */
#containerVerificaIstanza .btn-submit {
  text-align: center;
  margin-top: 1.4rem;
}

#containerVerificaIstanza .btn-primary {
  background: linear-gradient(90deg, #02509A, #0369b3);
  border: none;
  border-radius: 10px;
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(2,80,154,0.2);
}

#containerVerificaIstanza .btn-primary:hover {
  background: linear-gradient(90deg, #0369b3, #014b8a);
  box-shadow: 0 6px 16px rgba(2,80,154,0.25);
  transform: translateY(-2px);
}

#containerVerificaIstanza .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(2,80,154,0.2);
}

/* --- Placeholder --- */
#containerVerificaIstanza input::placeholder {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  #containerVerificaIstanza {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  #containerVerificaIstanza .form-group {
    margin-bottom: 1.3rem;
  }

  #containerVerificaIstanza .btn-primary {
    width: 100%;
  }
}

/* --- Intro text migliorato --- */
.intro-text {
    max-width: 700px;
    margin-bottom: 1.5rem;
    color: #1f2937;
    font-size: 1.05rem;
    line-height: 1.6;
}

    .intro-text strong {
        color: #0b5ed7;
        font-weight: 600;
    }

/* --- Breadcrumb moderno --- */
.enhanced-breadcrumb {
    background: #f9fbfd;
    border: 1px solid #e1e7ef;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    width: fit-content;
    margin: 0 auto;
}

    .enhanced-breadcrumb .breadcrumb-item {
        font-weight: 600;
        color: #02509A;
        font-size: 0.95rem;
    }

        .enhanced-breadcrumb .breadcrumb-item svg {
            color: #0369b3;
            margin-right: 0.4rem;
        }

    .enhanced-breadcrumb .separator {
        color: #ccc;
    }


/* Stile comune a tutti gli step dello stepper */
div[id^="stepper"] {
    background-color: #ffffff; /* sfondo bianco */
    border-radius: 0.25rem; /* bordi arrotondati */
    padding: 1.5rem; /* padding interno */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* ombra leggera */
}

    /* Dropdown all’interno di ogni step e del form manageDataForm */
    div[id^="stepper"] .dropdown-menu,
    #manageDataForm .dropdown-menu {
        background-color: #ffffff; /* sfondo bianco neutro */
        border: 1px solid #dcdcdc; /* bordo leggero grigio */
        border-radius: 0.25rem; /* bordi arrotondati */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* ombra leggera */
    }


    /* Pulsante avanti e indietro */
    div[id^="stepper"] .steppers-btn-next,
    div[id^="stepper"] .steppers-btn-prev {
        min-width: 100px;
        font-weight: 500;
    }

    div[id^="stepper"] {
    background-color: #f8f9fa; /* grigio chiaro neutro */
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Verifica che queste regole siano caricate e abbiano sufficiente specificità */
.agid-panel-blue .panel-heading {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}