/* 
 * Custom CSS Overrides
 * Palette personalizzata
 */

:root {
    /* Primary: #016B93 (1, 107, 147) */
    --bs-primary: #016B93;
    --bs-primary-rgb: 1, 107, 147;

    /* Info: #099699 (9, 150, 153) */
    --bs-info: #099699;
    --bs-info-rgb: 9, 150, 153;

    /* Success: #36AE8D (54, 174, 141) */
    --bs-success: #36AE8D;
    --bs-success-rgb: 54, 174, 141;

    /* Secondary: #8DC883 (141, 200, 131) - Usato come colore di supporto */
    --bs-secondary: #8DC883;
    --bs-secondary-rgb: 141, 200, 131;

    /* Warning: #D5E18D (213, 225, 141) */
    --bs-warning: #D5E18D;
    --bs-warning-rgb: 213, 225, 141;

    /* Danger: #E05252 (224, 82, 82) - Scelto per armonizzare con la palette */
    --bs-danger: #E05252;
    --bs-danger-rgb: 224, 82, 82;

    /* Punti di Bianco e Nero armonizzati (Toni freddi/bluastri) */
    --bs-body-bg: #F5F7F9;
    --bs-body-color: #1A2226;

    /* Dimensioni layout */
    --sidebar-desktop-width: 60px;
    --app-header-height: 80px;
    --app-footer-height: 36px;
    --app-frame-radius: 18px;
    
    /* Sovrascrittura colori grigi per coerenza */
    --bs-gray-100: #F0F2F5;
    --bs-gray-200: #E4E7EB;
    --bs-gray-800: #2C3338;
    --bs-gray-900: #1A2226;
}

/* Logo Size Override */
.app-brand .logo {
    height: 70px !important; /* Ingrandisce il logo */
    max-height: 100% !important;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.app-header {
    height: var(--app-header-height); /* Fissa l'altezza della barra top per evitare che si ingrandisca */
    border-bottom: none !important;
    box-shadow: 0 8px 22px rgba(4,21,31,0.06), 0 2px 6px rgba(4,21,31,0.04) !important;
    z-index: 120 !important; /* Above sidebar to avoid overlap */
    background: #ffffff !important;
    clip-path: inset(0px -20px -1000px 0px); /* Clip left shadow, allow bottom for dropdowns */
    position: fixed;
    top: 0;
    left: calc(var(--sidebar-desktop-width) - 1px); /* sovrappone il bordo per eliminare fessure */
    right: 0;
    transition: none !important; /* mai animata con lo swup */
    animation: none !important;
}

.app-container {
    /* Sfondo di base bianco della pagina */
    background: var(--bs-body-bg);
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding-top: var(--app-header-height); /* Spazio per header fisso */
    padding-bottom: var(--app-footer-height); /* Spazio per footer fisso */
    min-height: 100vh;
}
.btn-warning, .btn-secondary {
    color: #1A2226;
}

/* Sidebar Overrides */
.sidebar-wrapper {
    z-index: 120 !important;
}

.sidebar-menu {
    background: var(--bs-primary) !important;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6) !important;
}

.sidebar-menu a {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    transition: all 0.2s ease;
    /* Animazione "aesthetic" di ingresso */
    opacity: 0;
    transform: translateX(-12px) scale(0.95);
    filter: blur(4px);
    animation: sidebarItemIn 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.sidebar-menu a.active {
    background: var(--bs-warning) !important; /* Giallo della palette per massimo contrasto */
    color: var(--bs-primary) !important; /* Icona blu scuro */
    box-shadow: inset 0 4px 5px rgba(0,0,0,0.5) !important; /* Effetto schiacciato concentrato */
}

.sidebar-menu a:hover {
    background: rgba(var(--bs-warning-rgb), 0.5) !important; /* Verde/Giallo al 50% */
    transform: translateY(-3px); /* Solleva l'elemento */
    box-shadow: 0 5px 8px rgba(0,0,0,0.4); /* Ombra esterna concentrata */
}

/* Correzione curve sidebar se necessario (spesso usano lo stesso colore del background) */
.sidebar-menu .nav-square1,
.sidebar-menu .nav-square2 {
    background: var(--bs-primary) !important;
}

/* Effetto "stagger" per le voci del sidemenu */
.sidebar-menu a:nth-child(1) { animation-delay: 0.05s; }
.sidebar-menu a:nth-child(2) { animation-delay: 0.10s; }
.sidebar-menu a:nth-child(3) { animation-delay: 0.15s; }
.sidebar-menu a:nth-child(4) { animation-delay: 0.20s; }
.sidebar-menu a:nth-child(5) { animation-delay: 0.25s; }
.sidebar-menu a:nth-child(6) { animation-delay: 0.30s; }
.sidebar-menu a:nth-child(7) { animation-delay: 0.35s; }
.sidebar-menu a:nth-child(8) { animation-delay: 0.40s; }
.sidebar-menu a:nth-child(9) { animation-delay: 0.45s; }
.sidebar-menu a:nth-child(10) { animation-delay: 0.50s; }

/* Sidebar width adjustment */
@media (min-width: 992px) {
    .sidebar-wrapper {
        width: var(--sidebar-desktop-width);
        border-right: none !important; /* evita righe di separazione */
        box-shadow: none !important; /* evita ombra sull'header */
        background: #ffffff !important; /* stesso bianco dell'header */
        border-radius: var(--app-frame-radius) 0 0 var(--app-frame-radius);
        overflow: hidden;
        margin-right: -1px; /* chiude microgap tra sidebar e header */
        z-index: 120 !important;
    }

    .main-container {
        padding-left: calc(var(--sidebar-desktop-width) - 1px);
    }

    .sidebar-menu .nav-circle1,
    .sidebar-menu .nav-circle2 {
        width: var(--sidebar-desktop-width);
    }

    /* Pulisce le estremità della sidebar per allinearla all'header */
    .sidebar-menu .nav-circle1,
    .sidebar-menu .nav-circle2,
    .sidebar-menu .nav-square1,
    .sidebar-menu .nav-square2 {
        display: none !important;
    }
}

/* Mostra il sidemenu anche su mobile quando l'hamburger è aperto
   e rende le icone "flottanti" nella parte blu, senza pannello dietro */
@media (max-width: 991.99px) {
    .app-header {
        left: 0; /* Su mobile la sidebar non occupa spazio */
    }

    body.mobile-menu-open .sidebar-wrapper {
        display: block !important;
        background: transparent !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    body.mobile-menu-open .sidebar-menu {
        background: transparent !important;
        box-shadow: none !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Nasconde i "tappi" superiori/inferiori della sidebar su mobile */
    body.mobile-menu-open .sidebar-menu .nav-circle1,
    body.mobile-menu-open .sidebar-menu .nav-circle2,
    body.mobile-menu-open .sidebar-menu .nav-square1,
    body.mobile-menu-open .sidebar-menu .nav-square2 {
        display: none !important;
    }

    /* Icone flottanti senza pillola colorata di sfondo */
    body.mobile-menu-open .sidebar-menu a {
        background: transparent !important;
        box-shadow: none !important;
        width: auto;
        min-width: 40px;
        padding: 6px 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    /* Stato attivo/hover più "aesthetic" ma comunque molto leggero */
    body.mobile-menu-open .sidebar-menu a.active {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
    }

    body.mobile-menu-open .sidebar-menu a:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    }

    /* Mostra il nome (tooltip) accanto all'icona in modalità mobile-menu-open */
    body.mobile-menu-open .sidebar-menu a::after {
        content: attr(data-bs-title);
        color: #ffffff;
        font-size: 0.9rem;
        letter-spacing: 0.01em;
        opacity: 0.9;
        transform: translateX(4px);
        white-space: nowrap;
    }
}

/* Footer Fix - Fixed Position */
.app-footer {
    position: fixed;
    bottom: 0 !important;
    left: var(--sidebar-desktop-width); /* Larghezza sidebar */
    right: 0;
    height: var(--app-footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    background: #ffffff !important;
    border-top: none !important;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    padding: 0rem 1.5rem;
    clip-path: inset(-1000px -20px 0px 0px); /* Clip left shadow */
}

/* Aggiungiamo padding al body per non nascondere il contenuto dietro al footer */
.app-body {
    padding-bottom: 0 !important;
    min-height: calc(100vh - var(--app-header-height) - var(--app-footer-height)) !important;
}

.app-body-card {
    height: 100%;
    position: relative;
    z-index: 1;
}

@media (max-width: 991.99px) {
    .app-footer {
        left: 0; /* Su mobile la sidebar sparisce */
    }
}

/* Hover Scale Effect for Cards */
.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale * {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: translateY(-5px) rotate(-1deg);
    box-shadow: 0 8px 12px rgba(0,0,0,0.4) !important; /* Ombra concentrata */
    border-radius: 1rem !important;
    background-color: var(--bs-primary) !important;
    border: none !important;
}

/* Change text colors on hover */
.hover-scale:hover .card-body,
.hover-scale:hover .text-primary,
.hover-scale:hover i,
.hover-scale:hover h4,
.hover-scale:hover h5,
.hover-scale:hover .card-title,
.hover-scale:hover .card-subtitle {
    color: #ffffff !important;
}

.hover-scale:hover .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Invert badge colors on hover */
.hover-scale:hover .badge {
    background-color: var(--bs-warning) !important; /* Colore del tasto sidebar attivo */
    color: var(--bs-primary) !important;
}

.hover-scale:hover .badge i {
    color: var(--bs-primary) !important;
}

/* Keyframes per l'entrata "aesthetic" del sidemenu */
@keyframes sidebarItemIn {
    0% {
        opacity: 0;
        transform: translateX(-12px) scale(0.95);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

/* Invert Avatar colors on hover */
.hover-scale:hover .avatar-initials {
    background-color: #ffffff !important;
    color: var(--bs-primary) !important;
}

/* Home Calendar Styling */
.home-calendar-card {
    background: linear-gradient(135deg, #ffffff 0%, #F5F7F9 100%);
}

.home-calendar-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.25rem 0.75rem 0.75rem;
    margin: 0 -0.75rem; /* evita che le ombre vengano tagliate ai bordi della card su schermi piccoli */
}

.home-calendar-scroll-inner {
    white-space: nowrap;
}

.home-calendar-scroll-inner > .home-calendar-col {
    display: inline-block;
    vertical-align: top;
    width: 280px;
    margin-right: 1rem;
}

.home-calendar-day {
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 230px;
    display: flex;
    flex-direction: column;
}

.home-calendar-day-today {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    box-shadow: 0 6px 14px rgba(1, 107, 147, 0.25);
    background: radial-gradient(circle at top left, rgba(1, 107, 147, 0.07), #ffffff);
}

.home-calendar-day:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}

.home-calendar-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.home-calendar-dot-closure {
    background-color: var(--bs-info);
}

.home-calendar-dot-leave {
    background-color: var(--bs-success);
}

.home-calendar-day .card-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Layout responsive: su schermi grandi il calendario occupa tutta la larghezza senza scroll */
@media (min-width: 992px) {
    .home-calendar-scroll {
        overflow-x: visible;
        margin: 0;
        padding: 0;
    }

    .home-calendar-scroll-inner {
        display: flex;
        flex-wrap: nowrap;
        white-space: normal;
        gap: 1.5rem;
        width: 100%;
    }

    .home-calendar-scroll-inner > .home-calendar-col {
        display: block;
        flex: 1 1 0;
        width: auto;
        margin-right: 0;
    }
}

/* Corner Smoothing for Unified Frame */
.app-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--app-header-height);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 100%, transparent 20px, #ffffff 20px);
    z-index: 19;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.app-header::after {
    content: "";
    position: absolute;
    right: 0;
    top: var(--app-header-height);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 100%, transparent 20px, #ffffff 20px);
    z-index: 19;
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.app-footer::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 0%, transparent 20px, #ffffff 20px);
    z-index: 99;
    filter: drop-shadow(2px -2px 3px rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.app-footer::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 0, transparent 20px, #ffffff 20px);
    z-index: 99;
    filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

/* Shell fissi: header, sidebar, footer non devono mai animarsi */
.app-header,
.sidebar-wrapper,
.app-footer {
    will-change: auto !important;
}

html.is-changing .app-header,
html.is-changing .sidebar-wrapper,
html.is-changing .app-footer {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    position: fixed;
}

/* Swup Page Transitions */
.swup-transition-fade {
    /* Base state */
    opacity: 1;
    transform: none; /* Avoid stacking context that hides Bootstrap modals behind backdrop */
    transform-origin: center top;
}

/* LEAVING (Old Page) */
html.is-changing.is-leaving.to-higher .swup-transition-fade {
    animation: sinkAndSlideOutUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html.is-changing.is-leaving.to-lower .swup-transition-fade {
    animation: sinkAndSlideOutDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ENTERING (New Page) */
html.is-changing:not(.is-leaving).to-higher .swup-transition-fade {
    animation: slideInUpAndRise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html.is-changing:not(.is-leaving).to-lower .swup-transition-fade {
    animation: slideInDownAndRise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* LEFT TRANSITION (Slide Left) */
/* LEAVING */
html.is-changing.is-leaving.to-left .swup-transition-fade {
    animation: sinkAndSlideOutLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ENTERING */
html.is-changing:not(.is-leaving).to-left .swup-transition-fade {
    animation: slideInRightAndRise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* RIGHT TRANSITION (Slide Right - Back) */
/* LEAVING */
html.is-changing.is-leaving.to-right .swup-transition-fade {
    animation: sinkAndSlideOutRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ENTERING */
html.is-changing:not(.is-leaving).to-right .swup-transition-fade {
    animation: slideInLeftAndRise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Mobile hamburger slide-out effect: inner page as card */
@media (max-width: 767.98px) {
    /* Quando il menu mobile è aperto, blocca lo scroll della pagina
       così non si vede la parte scrollabile dietro l'animazione */
    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden;
        height: 100%;
    }

    .app-body-card {
        /* Transizione più morbida sia in apertura che in chiusura */
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                    border-radius 0.55s ease,
                    box-shadow 0.55s ease,
                    margin 0.55s ease;
    }

    /* Quando il menu è visibile (aperto o in chiusura),
       aggiunge uno strato di sfondo blu tra il body e la card */
    body.mobile-menu-visible .app-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-info) 100%);
        z-index: 0;
    }

    body.mobile-menu-visible .app-container {
        perspective: 1200px;
        perspective-origin: center;
    }

    /* Quando il menu è aperto, centra verticalmente la card nello spazio tra header e footer */
    body.mobile-menu-open .app-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 0 !important;
    }

    body.mobile-menu-open .app-body-card {
        /* Altezza limitata per vedere solo una "finestra" della pagina */
        height: auto;
        max-height: calc(100vh - 140px); /* header + footer (~70px ciascuno) */
        /* Effetto porta con cerniera virtuale al centro:
           la pagina scorre verso destra e ruota con il lato sinistro verso l'interno */
        transform-origin: center center;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        /* alza la card con translateY negativo e spostala ancora un po' a destra
           per non far toccare il container di selezione alla pagina */
        transform: translateX(48vw) translateY(-4vh) scale(0.9) rotateY(-18deg);
        border-radius: 1.5rem;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        margin-top: 0;
        margin-bottom: 0;
        background-color: var(--bs-body-bg);
    }

    /* Ensure footer stays fixed and non segue la card trasformata
       quando il menu mobile è aperto. Ombre molto forti per effetto di profondità. */
    body.mobile-menu-open .app-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 2200 !important; /* Above transformed content */
        box-shadow: 0 -24px 60px rgba(0,0,0,0.6) !important;
    }

    /* Prevent content from being hidden behind the fixed footer
       quando il menu NON è aperto */
    body:not(.mobile-menu-open) .app-body {
        padding-bottom: 72px !important; /* adjust if your footer height changes */
    }

}

/* Keyframes */
@keyframes sinkAndSlideOutUp {
    0% { transform: scale(1) translateY(0); opacity: 1; }
    30% { transform: scale(0.95) translateY(0); opacity: 1; }
    100% { transform: scale(0.95) translateY(-50px); opacity: 0; }
}

@keyframes sinkAndSlideOutDown {
    0% { transform: scale(1) translateY(0); opacity: 1; }
    30% { transform: scale(0.95) translateY(0); opacity: 1; }
    100% { transform: scale(0.95) translateY(50px); opacity: 0; }
}

@keyframes slideInUpAndRise {
    0% { transform: scale(0.95) translateY(50px); opacity: 0; }
    70% { transform: scale(0.95) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes slideInDownAndRise {
    0% { transform: scale(0.95) translateY(-50px); opacity: 0; }
    70% { transform: scale(0.95) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes sinkAndSlideOutLeft {
    0% { transform: scale(1) translateX(0); opacity: 1; }
    30% { transform: scale(0.95) translateX(0); opacity: 1; }
    100% { transform: scale(0.95) translateX(-50px); opacity: 0; }
}

@keyframes slideInRightAndRise {
    0% { transform: scale(0.95) translateX(50px); opacity: 0; }
    70% { transform: scale(0.95) translateX(0); opacity: 1; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

@keyframes sinkAndSlideOutRight {
    0% { transform: scale(1) translateX(0); opacity: 1; }
    30% { transform: scale(0.95) translateX(0); opacity: 1; }
    100% { transform: scale(0.95) translateX(50px); opacity: 0; }
}

@keyframes slideInLeftAndRise {
    0% { transform: scale(0.95) translateX(-50px); opacity: 0; }
    70% { transform: scale(0.95) translateX(0); opacity: 1; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

/* Shadow behavior on fixed elements: keep static, no animations */
.app-footer,
.sidebar-wrapper {
    transition: none !important;
}

html.is-changing .app-header {
    box-shadow: none !important; /* l'header non partecipa all'animazione */
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Ombre forti su header e footer quando l'hamburger mobile è aperto */
@media (max-width: 767.98px) {
    body.mobile-menu-open .app-header {
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
        z-index: 2200 !important;
    }
}

/* Sink effect on page content while a modal overlay is open (match page transition feel) */
body.modal-open .swup-transition-fade > *:not(.modal) {
    /* Disable transforms here to avoid stacking-context issues that can put the backdrop above the modal */
    animation: none !important;
    transform: none !important;
    filter: none !important;
}
body.modal-open .modal-backdrop {
    z-index: 1050 !important;
}
body.modal-open .modal {
    z-index: 1060 !important;
}

@keyframes modalPreload {
    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
    30% { transform: scale(0.95); opacity: 0.95; filter: brightness(0.95); }
    100% { transform: scale(0.95); opacity: 0.75; filter: brightness(0.85); }
}

/* Header Action Button */
.header-action-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--bs-gray-900);
    transition: all 0.3s ease;
}

.header-action-btn i {
    font-size: 1.5rem; /* Ingrandisce l'icona */
}

/* Latest Events - Home Aesthetic */
.latest-events-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
    border-radius: 1rem !important;
}

.latest-events-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
    border-radius: 1.5rem !important;
}

.latest-event-item {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
    border-radius: 0.6rem !important;
    margin: 0.35rem 0.75rem; /* spazio interno ai lati senza sforare il container */
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.02),
        rgba(var(--bs-info-rgb), 0.06)
    );
}

.latest-event-item:hover {
    background-color: var(--bs-primary) !important; /* Colore pieno in hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important;
    border-radius: 1.1rem !important;
}

.latest-event-item small {
    color: rgba(var(--bs-primary-rgb), 0.75) !important;
}

.latest-event-item:hover .fw-semibold,
.latest-event-item:hover span,
.latest-event-item:hover small {
    color: #ffffff !important;
}

.latest-event-item:hover .badge {
    box-shadow: none !important;
}

/* Login Page Styling */
.login-bg {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-info) 100%);
    min-height: 100vh;
}

.login-bg .auth-wrapper {
    background: transparent;
}

.login-bg .auth-box {
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    max-width: 400px;
    width: 100%;
}

.login-bg .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.login-bg .btn-primary:hover {
    background-color: #015a7d !important; /* Slightly darker for hover */
    border-color: #015a7d !important;
}

.login-bg .form-control {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-gray-200);
    background-color: var(--bs-gray-100);
}

.login-bg .form-control:focus {
    background-color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(1, 107, 147, 0.15);
}

.login-bg .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.login-bg .text-primary {
    color: var(--bs-primary) !important;
}

.login-bg a {
    color: var(--bs-primary);
}

.login-bg a:hover {
    color: var(--bs-info);
}

.header-action-btn:hover {
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
}

/* Buttons inside hovered card */
.hover-scale:hover .btn {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #ffffff !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

.hover-scale:hover .btn:hover {
    background-color: #ffffff !important;
    color: var(--bs-primary) !important;
    border-color: #ffffff !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    border-radius: 1rem !important; /* Cambio radius */
}

.hover-scale:hover .btn:hover i {
    color: inherit !important;
}

.hover-scale:hover .btn-outline-danger:hover {
    color: var(--bs-danger) !important;
}

/* Expense Donut Chart Card - lift only, no color change */
.expense-chart-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
    border-radius: 1rem !important;
}

.expense-chart-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
    border-radius: 1.25rem !important;
}

/* Donut slice hover: prospettiva 3D leggera */
.expense-chart-card [class*="apexcharts-donut-slice"] {
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
    transform-origin: 50% 50%;
}

.expense-chart-card [class*="apexcharts-donut-slice"].expense-donut-slice-active {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)) brightness(1.05);
    opacity: 1 !important;
}

.expense-chart-card [class*="apexcharts-donut-slice"].expense-donut-slice-dimmed {
    transform: scale(0.97);
    opacity: 0.35;
}

/* Tooltip del grafico note spese - posizione gestita via JS */
.expense-chart-card .apexcharts-tooltip {
    transform: none !important;
}

.expense-chart-card .expense-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Card Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.card-enter {
    opacity: 0; /* Start hidden to avoid flash */
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.card-exit {
    animation: fadeOutDown 0.3s ease-in forwards;
}

/* Staggered delays for smoother entrance */
.card-enter:nth-child(1) { animation-delay: 0.05s; }
.card-enter:nth-child(2) { animation-delay: 0.07s; }
.card-enter:nth-child(3) { animation-delay: 0.09s; }
.card-enter:nth-child(4) { animation-delay: 0.11s; }
.card-enter:nth-child(5) { animation-delay: 0.13s; }
.card-enter:nth-child(6) { animation-delay: 0.15s; }
.card-enter:nth-child(7) { animation-delay: 0.17s; }
.card-enter:nth-child(8) { animation-delay: 0.19s; }
.card-enter:nth-child(9) { animation-delay: 0.21s; }
.card-enter:nth-child(10) { animation-delay: 0.23s; }
.card-enter:nth-child(11) { animation-delay: 0.25s; }
.card-enter:nth-child(12) { animation-delay: 0.27s; }

/* Grid Animation Helpers */
#employeesGrid {
    position: relative; /* Needed for absolute positioning of exiting cards */
}

.flip-transition {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Search Bar Hover Effect */
.search-hover {
    transition: all 0.3s ease;
}

.search-hover:hover {
    transform: translateY(-5px);
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: 50px !important; /* Fully rounded on hover */
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    color: #ffffff !important; /* Ensure text turns white */
}

.search-hover:hover input,
.search-hover:hover .input-group-text i,
.search-hover:hover .btn-link,
.search-hover:hover .btn-link i,
.search-hover:hover i { /* Target generic icons */
    color: #ffffff !important;
}

.search-hover:hover input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Search Bar Focus Effect - Sunk/Inset */
.search-hover:focus-within {
    transform: translateY(0) !important;
    box-shadow: inset 0 6px 14px rgba(0,0,0,0.45) !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: 1rem !important;
}

/* Keep colors white on focus */
.search-hover:focus-within input {
    color: #ffffff !important;
}

.search-hover:focus-within .input-group-text i,
.search-hover:focus-within .btn-link,
.search-hover:focus-within .btn-link i {
    color: #ffffff !important;
}

.search-hover:focus-within input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Active Filter State - Sunk/Inset */
.search-hover.active {
    transform: translateY(0) !important;
    box-shadow: inset 0 6px 14px rgba(0,0,0,0.45) !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: 50px !important; /* Keep it rounded if active */
    color: #ffffff !important;
}

.search-hover.active i {
    color: #ffffff !important;
}

/* Active Tab Style - Sunk/Inset */
.nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: inset 0 4px 5px rgba(0,0,0,0.3) !important;
    transform: translateY(1px);
    font-weight: bold !important;
}

/* Inactive Tab Hover Style - Lift/Rise */
.nav-pills .nav-link:not(.active) {
    transition: all 0.2s ease;
}

.nav-pills .nav-link:not(.active):hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    color: var(--bs-primary);
}

/* Custom Button Hover Effect - Lift, Radius & Color Change */
.btn-hover-effect {
    transition: all 0.3s ease;
}

.btn-hover-effect:hover {
    transform: translateY(-3px);
    border-radius: 50px !important; /* Diventa pillola */
    background-color: var(--bs-primary) !important; /* Default: Blu */
    color: #ffffff !important; /* Testo bianco */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
}

.btn-hover-effect:hover i {
    color: #ffffff !important;
}

/* Mantieni il colore originale per varianti success/danger */
.btn-success.btn-hover-effect:hover {
    background-color: var(--bs-success) !important;
}

.btn-danger.btn-hover-effect:hover {
    background-color: var(--bs-danger) !important;
}

/* Azioni outline: in hover si riempiono del proprio colore */
.btn-outline-primary.btn-hover-effect:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-success.btn-hover-effect:hover {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.btn-outline-danger.btn-hover-effect:hover {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

/* Bottoni chiari (es. "Dettagli") non devono diventare blu: mantengono il loro colore */
.btn-light.btn-hover-effect:hover {
    background-color: var(--bs-light) !important;
    color: var(--bs-body-color) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Input Hover Effect (Aesthetic) */
.input-hover-effect {
    transition: all 0.3s ease;
}

.input-hover-effect:hover {
    transform: translateY(-5px);
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    color: #ffffff !important;
    z-index: 2;
}

.input-hover-effect:hover::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.input-hover-effect:focus {
    transform: translateY(0);
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: 50px !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.2);
    color: #ffffff !important;
    z-index: 2;
}

.input-hover-effect:focus::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Force Primary Color on Form Checks */
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Ensure Primary Button uses the correct blue */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
    background-color: #015a7d !important; /* Slightly darker for hover */
    border-color: #015a7d !important;
}

/* Active state for the "Altro" tab button */
#other-tab.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.2) !important;
    border-radius: 50px !important;
}

/* Utility Classes */
.transition-all {
    transition: all 0.3s ease-in-out;
}

/* Mobile header typography */
@media (max-width: 767.98px) {
    .app-header-mobile .logo {
        height: 52px;
        width: auto;
    }

    .app-header-mobile .header-action-btn i {
        font-size: 1.9rem !important;
        color: var(--bs-gray-800) !important;
    }

    /* Nasconde il dropdown account sotto l'hamburger in mobile */
    .app-header-mobile .dropdown-menu {
        display: none !important;
    }

    .app-header-mobile .mobile-user-name {
        font-size: 0.9rem;
    }

    .app-header-mobile .mobile-user-role {
        font-size: 0.7rem;
    }
}

/* Ensure Bootstrap modals render above the backdrop
   Problem: `.modal-backdrop` can appear above custom fixed elements.
   Force stacking so the modal is interactable. */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal,
.modal.show {
    z-index: 1060 !important;
}

/* Some themes create new stacking contexts; make the dialog itself very high */
.modal-dialog {
    z-index: 1061 !important;
}

/* Ensure modal-open state doesn't interfere */
body.modal-open {
    overflow: auto; /* allow inner scroll when needed but do not create new stacking issues */
}

/* ==================================================
   Aesthetic polish for Expense Edit page
   Targets only forms that submit to the HR expenses routes
   to avoid impacting unrelated pages.
   ================================================== */

form[action*="/hr/expenses/"] .card {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.03), rgba(255,255,255,0.85));
    border: 1px solid rgba(var(--bs-primary-rgb), 0.06);
    border-radius: 1.25rem !important;
    padding: 0.35rem;
    box-shadow: 0 12px 30px rgba(2,18,28,0.06);
    backdrop-filter: blur(6px);
}

form[action*="/hr/expenses/"] .card .card-body {
    background: transparent;
    padding: 1.25rem 1.5rem;
}

/* Inputs and selects within the expense edit form */
form[action*="/hr/expenses/"] .form-control,
form[action*="/hr/expenses/"] .form-select {
    border-radius: 0.9rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.10);
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg,#ffffff, #fbfeff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 220ms cubic-bezier(.2,.9,.3,1);
}

form[action*="/hr/expenses/"] .form-control:focus,
form[action*="/hr/expenses/"] .form-select:focus {
    outline: none !important;
    border-color: rgba(var(--bs-primary-rgb), 0.9) !important;
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.08) !important;
    transform: translateY(-2px);
}

/* File input styling: modern button for selector */
form[action*="/hr/expenses/"] input[type="file"] {
    border-radius: 0.9rem;
    overflow: hidden;
    /* hide native selected-file text; we'll show a custom filename element */
    color: transparent; /* hides default filename text in most browsers */
}

form[action*="/hr/expenses/"] input[type="file"]::file-selector-button {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    color: #fff;
    border: none;
    padding: 0.45rem 0.9rem;
    margin-left: 8px; /* push the button slightly to the right */
    margin-right: 14px; /* spacing between button and filename */
    border-radius: 0.65rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Ensure the button text is visible even though input color is transparent */
form[action*="/hr/expenses/"] input[type="file"]::file-selector-button { color: #fff; }

form[action*="/hr/expenses/"] input[type="file"]::file-selector-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(1,107,147,0.18);
}

/* Highlight current PDF link */
form[action*="/hr/expenses/"] a[target="_blank"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}

form[action*="/hr/expenses/"] a[target="_blank"]:hover {
    color: var(--bs-info);
    text-decoration: underline;
}

/* Make the remove checkbox more visible and aligned */
form[action*="/hr/expenses/"] .form-check {
    margin-left: 0.6rem;
}

form[action*="/hr/expenses/"] .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--bs-danger);
}

form[action*="/hr/expenses/"] .form-check-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-danger);
}

/* Table rows: subtle lift on hover and softened borders */
form[action*="/hr/expenses/"] table.table tbody tr {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

form[action*="/hr/expenses/"] table.table tbody tr:hover {
    transform: translateY(-4px);
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb),0.02), rgba(255,255,255,0.9));
    box-shadow: 0 10px 20px rgba(2,18,28,0.05);
}

/* Totale documento styling */
form[action*="/hr/expenses/"] #document-total {
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

/* Primary/save button: pill with gradient */
form[action*="/hr/expenses/"] .btn-primary {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info)) !important;
    border: none !important;
    padding: 0.6rem 1.05rem !important;
    border-radius: 1.05rem !important;
    box-shadow: 0 12px 30px rgba(1,107,147,0.12) !important;
    font-weight: 700;
}

form[action*="/hr/expenses/"] .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(1,107,147,0.18) !important;
}

/* Adjust Save button radius: smaller at rest, more pronounced on hover
   Target the specific save button inside the expenses form to avoid
   affecting other primary buttons globally. */
form[action*="/hr/expenses/"] .card-footer .btn-primary.btn-hover-effect {
    border-radius: 0.45rem !important; /* smaller radius at rest */
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1),
                box-shadow 0.22s ease,
                border-radius 0.22s ease,
                background 0.22s ease;
}

form[action*="/hr/expenses/"] .card-footer .btn-primary.btn-hover-effect:hover,
form[action*="/hr/expenses/"] .card-footer .btn-primary.btn-hover-effect:focus {
    transform: translateY(-6px);
    border-radius: 1.25rem !important; /* pill-like on hover */
    box-shadow: 0 18px 40px rgba(var(--bs-primary-rgb), 0.18) !important;
    color: #ffffff !important;
}

/* Slight icon movement on hover for the save button */
form[action*="/hr/expenses/"] .card-footer .btn-primary.btn-hover-effect i {
    transition: transform 0.18s ease, color 0.18s ease;
}

form[action*="/hr/expenses/"] .card-footer .btn-primary.btn-hover-effect:hover i {
    transform: translateX(4px);
}

/* Make small helper texts more subtle */
form[action*="/hr/expenses/"] small.text-muted {
    color: rgba(26,34,38,0.6) !important;
}

/* Accessibility: focus rings for keyboard users */
form[action*="/hr/expenses/"] :focus {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.12);
    outline-offset: 3px;
}

/* End aesthetic polish */

/* ==================================================
   Specific hover/appearance for "Aggiungi riga" button
   Targets the button with id `#add-row` to provide
   lift, radius change and custom theme colors on hover.
   ================================================== */

#add-row {
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1),
                box-shadow 0.22s ease,
                border-radius 0.22s ease,
                background 0.22s ease,
                color 0.22s ease;
    border-radius: 0.35rem; /* keep small radius by default */
    padding: 0.45rem 0.9rem;
    background: transparent;
    box-shadow: none;
    border-width: 1px;
}

#add-row:hover,
#add-row:focus {
    transform: translateY(-6px);
    border-radius: 1.25rem !important; /* pill-like on hover */
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    color: #ffffff !important;
    box-shadow: 0 16px 36px rgba(var(--bs-primary-rgb), 0.14) !important;
    border-color: transparent !important;
}

#add-row i {
    transition: transform 0.18s ease, color 0.18s ease;
}

#add-row:hover i {
    transform: translateX(4px);
    color: #ffffff !important;
}

/* Make the small size look slightly larger visually while keeping layout */
#add-row.btn-sm {
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Focus ring for accessibility */
#add-row:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.12);
    outline-offset: 3px;
}

/* On small screens keep behavior but reduce transform distance */
@media (max-width: 576px) {
    #add-row:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(var(--bs-primary-rgb), 0.12) !important;
    }
}

/* ==================================================
   Apply same aesthetic behavior to delete buttons
   Targets `.remove-row-btn` which is used for row deletion
   in the expenses table. Uses danger colors and smaller
   lift to keep UX consistent and avoid accidental clicks.
   ================================================== */

.remove-row-btn {
    transition: transform 0.2s cubic-bezier(.2,.9,.3,1),
                box-shadow 0.2s ease,
                border-radius 0.18s ease,
                background 0.18s ease,
                color 0.18s ease;
    border-radius: 0.32rem; /* small by default */
    padding: 0.28rem 0.45rem;
    min-width: 38px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(var(--bs-danger-rgb, 224,82,82), 0.12);
    color: var(--bs-danger);
}

.remove-row-btn i {
    transition: transform 0.16s ease, color 0.16s ease;
}


.remove-row-btn {
    box-sizing: border-box; /* ensure border doesn't change layout */
}

.remove-row-btn:hover,
.remove-row-btn:focus {
    transform: translateY(-5px);
    border-radius: 1rem !important; /* more pronounced on hover */
    background: linear-gradient(90deg, var(--bs-danger), rgba(var(--bs-danger-rgb,224,82,82),0.85));
    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(var(--bs-danger-rgb,224,82,82), 0.12) !important;
    border-color: transparent !important;
}

/* Avoid horizontal shift: don't translate icon on X axis; use scale instead */
.remove-row-btn i {
    transform: translateX(0) scale(1);
}

.remove-row-btn:hover i {
    transform: scale(1.06);
    color: #ffffff !important;
}

/* Smaller lift on very small screens to avoid layout shift */
@media (max-width: 576px) {
    .remove-row-btn:hover { transform: translateY(-3px); }
}

/* Keep month/date input values readable on hover/focus inside HR expenses form
   Our global `.input-hover-effect:hover` makes text white; override it here
   so the value stays legible against the background. */
form[action*="/hr/expenses/"] input[type="month"].input-hover-effect,
form[action*="/hr/expenses/"] input[type="date"].input-hover-effect {
    color: var(--bs-body-color) !important;
}

form[action*="/hr/expenses/"] input[type="month"].input-hover-effect:hover,
form[action*="/hr/expenses/"] input[type="month"].input-hover-effect:focus,
form[action*="/hr/expenses/"] input[type="date"].input-hover-effect:hover,
form[action*="/hr/expenses/"] input[type="date"].input-hover-effect:focus {
    background: linear-gradient(180deg,#ffffff, #fbfeff) !important;
    color: var(--bs-body-color) !important;
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.08) !important;
    transform: translateY(0) !important; /* avoid extra lift for these inputs */
}