:root{
    --color-vvf: #851A1B;
    --color-vvf-hover: #6c1516;
    --color-vvf-rgb: 11, 78, 133;
    --color-vvf-focus: 0 0 0 0.25rem rgba(26, 27, 133, 0.5);
    --color-pc: #0d4a8a; /* Cambia il colore primario */
    --color-pc-hover: #0b417c;
    --color-pc-rgb: 11, 78, 133;
    --color-pc-focus: 0 0 0 0.25rem rgba(26, 27, 133, 0.5);

    /* PATCH MINIMA: piccolo margine extra per non tagliare il footer modale */
    --modal-extra: .5rem; /* se serve, alza a .75rem */
}

body {
    padding-top: 56px; /* Per la navbar fissa in alto */
}

[data-domain="vvf"], [data-domain="tas"] {
    --color: var(--color-vvf); /* Cambia il colore primario */
    --color-hover: var(--color-vvf-hover);
    --color-rgb: var(--color-vvf-rgb);
    --color-focus: var(--color-vvf-focus);
    /*--icon-width: 35px;*/
    --icon-height: 30px;
}

[data-domain="pc"] {
    --color: var(--color-pc); /* Cambia il colore primario */
    --color-hover: var(--color-pc-hover);
    --color-rgb: var(--color-pc-rgb);
    --color-focus: var(--color-pc-focus);
}

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

.btn-custom {
    background-color: var(--color) !important;
    border-color: var(--color) !important;
    color: #fff !important;
}

.btn-custom:hover {
    background-color: var(--color-hover) !important; /* Un colore leggermente più scuro */
    border-color: var(--color-hover) !important;
}

.btn-custom:focus, .btn-custom.focus { box-shadow: var(--color-focus) !important; }

.card-custom .fixed-icon,
.table-responsive .table .fixed-icon {
    width: auto;
    height: var(--icon-height);
    margin: 0 6px 0 0 !important; /* elimina vuoto a sinistra, solo 6px a destra */
    object-fit: contain; /* non deforma */
    vertical-align: middle; /* centra rispetto al testo */
    display: inline-block; /* si comporta bene accanto al testo */
}

/* Dropdown utente scuro */
.navbar .dropdown-menu {
    background-color: #2b2b2b; /* sfondo scuro */
    border: 1px solid #444; /* bordo leggero */
    color: #fff; /* testo chiaro */
}
/* Link nel menu */
.navbar .dropdown-menu .dropdown-item { color: #ddd; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: #444;
    color: #fff;
}
/* Divider più visibile su sfondo scuro */
.navbar .dropdown-menu .dropdown-divider { border-color: #555; }

/* Allineamento coerente nel menu collassato (<= LG) */
@media (max-width: 991.98px) {
    .navbar .navbar-nav { align-items: stretch !important; }
    .navbar .navbar-nav .nav-item { width: 100%; }
    .navbar .navbar-nav .btn,
    .navbar .navbar-nav .navbar-text {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar .navbar-nav .btn {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important;
    }
}

.main-content-scrollable { transform: none !important; }

.bg-color-pc { background-color: var(--color-pc); }
.bg-color-vvf { background-color: var(--color-vvf); }

/* -------- MODAL PATCH -------- */

/* Layout flessibile: header/footer fissi, body che scorre
   + margini reali Bootstrap + safe-area + extra anti-taglio */
.modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(
            100dvh
            - (var(--bs-modal-margin, 1.75rem) * 2)
            - env(safe-area-inset-top, 0px)
            - env(safe-area-inset-bottom, 0px)
            - var(--modal-extra)
    );
}

.modal-header,
.modal-footer { flex: 0 0 auto; }

.modal-body {
    flex: 1 1 auto;
    min-height: 0;                 /* fondamentale per far funzionare overflow */
    overflow-y: auto;              /* attiva la scrollbar interna */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Se usi già .modal-dialog-scrollable, rafforza l'altezza in viewport dinamico */
.modal-dialog-scrollable .modal-body {
    max-height: calc(100dvh - 3.5rem - 3.5rem); /* ~ header + footer */
}

/* Quando la modale è aperta, blocca lo scroll del wrapper di pagina, non del body */
.modal-open .main-content-scrollable { overflow: hidden; }

/* impedisce che i bottoni finiscano dietro la gesture bar */
.modal-footer{
    padding-bottom: calc(var(--bs-modal-padding-y, 1.75rem) + env(safe-area-inset-bottom, 0px));
}

/* L'immagine non supera l'altezza del contenuto del bottone */
.btn .img-fit-btn {
    max-height: calc(var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5));
    width: auto;          /* mantieni il ratio */
    display: inline-block; /* evita spazio extra di baseline */
}

/* Overlay globale per indicare le richieste HTTP in corso */
.global-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.global-loading-overlay.is-active {
    opacity: 1;
    pointer-events: all;
}

.global-loading-indicator {
    background: rgba(0, 0, 0, 0.55);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}