/* 
 * 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: 130 !important; /* Above sidebar and fullscreen frosted overlays */
    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;
}

.patchnote-patch-container {
    border-radius: 12px;
    padding: 12px 14px;
    color: #1A2226;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.10) 0%,
        rgba(14, 165, 233, 0.10) 50%,
        rgba(34, 197, 94, 0.10) 100%
    );
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.patchnote-group-divider {
    height: 2px;
    margin: 20px 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(1, 107, 147, 0.2), rgba(141, 200, 131, 0.2));
}

/* 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 */
}

.ai-agent-chat-frosted-layer {
    position: fixed;
    top: var(--app-header-height);
    right: 0;
    bottom: var(--app-footer-height);
    left: var(--sidebar-desktop-width);
    z-index: 118;
    border-radius: var(--app-frame-radius) 0 0 var(--app-frame-radius);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.4) 26%, rgba(255, 255, 255, 0.18) 40%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.92) 30%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.08) 48%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.92) 30%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.08) 48%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.995);
    transition: opacity 0.38s ease, transform 0.46s cubic-bezier(0.22, 0.78, 0.2, 1), visibility 0.38s ease;
}

.ai-agent-chat-frosted-layer.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ai-agent-chat-frosted-layer-full {
    position: fixed;
    top: var(--app-header-height);
    right: 0;
    bottom: var(--app-footer-height);
    left: var(--sidebar-desktop-width);
    z-index: 119;
    border-radius: var(--app-frame-radius) 0 0 var(--app-frame-radius);
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(0.998);
    transition: opacity 0.42s cubic-bezier(0.22, 0.78, 0.2, 1), transform 0.42s cubic-bezier(0.22, 0.78, 0.2, 1), visibility 0.42s ease;
}

.ai-agent-chat-frosted-layer-full.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: none;
}

/* Keep the top-right curved frame corner visible over fullscreen frosted overlay */
.ai-agent-chat-frosted-layer-full.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 100%, transparent 20px, #ffffff 20px);
    z-index: 1;
    pointer-events: none;
}

body.ai-agent-chat-active .app-body,
body.ai-agent-chat-active .app-body-card,
body.ai-agent-chat-active #swup {
    margin-bottom: clamp(160px, 26vh, 320px);
    transition: margin-bottom 0.36s cubic-bezier(0.22, 0.78, 0.2, 1);
}

body.ai-agent-fab-stage-one-active .app-body,
body.ai-agent-fab-stage-one-active .app-body-card,
body.ai-agent-fab-stage-one-active #swup {
    margin-bottom: 50vh;
    transition: margin-bottom 0.36s cubic-bezier(0.22, 0.78, 0.2, 1);
}

/* Floating AI Agent Launcher */
.ai-agent-fab-group {
    bottom: 0.8rem;
    z-index: 1045;
    width: 56px;
    height: 56px;
    pointer-events: none;
    transition: width 0.46s cubic-bezier(0.22, 0.78, 0.2, 1), height 0.46s cubic-bezier(0.22, 0.78, 0.2, 1);
}

.ai-agent-fab-group > * {
    pointer-events: auto;
}

.ai-agent-fab-chat-stream {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(100%, clamp(280px, 50vw, 760px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.22, 0.78, 0.2, 1), visibility 0.28s ease;
}

.ai-agent-fab-chat-stream.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ai-agent-fab-chat-stream-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 136px;
    overflow-y: auto;
    transition: max-height 0.28s ease;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.22) 16%,
        rgba(0, 0, 0, 0.62) 30%,
        rgba(0, 0, 0, 1) 44%,
        rgba(0, 0, 0, 1) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.22) 16%,
        rgba(0, 0, 0, 0.62) 30%,
        rgba(0, 0, 0, 1) 44%,
        rgba(0, 0, 0, 1) 100%
    );
}

.ai-agent-fab-group.is-chat-fullscreen .ai-agent-fab-chat-stream-inner {
    max-height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - 9.5rem);
    mask-image: none;
    -webkit-mask-image: none;
    padding-right: 4px;
}

.ai-agent-fab-chat-empty {
    align-self: center;
    font-size: 0.78rem;
    color: rgba(var(--bs-primary-rgb), 0.8);
}

.ai-agent-fab-chat-bubble {
    max-width: 86%;
    padding: 8px 11px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.35;
    word-break: break-word;
    animation: aiAgentBubbleIn 0.22s ease;
}

.ai-agent-fab-chat-bubble.is-outgoing {
    align-self: flex-end;
    color: #ffffff;
    background: linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 50%,
            rgb(var(--bs-success-rgb)) 100%);
}

.ai-agent-fab-chat-bubble.is-incoming {
    align-self: flex-start;
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.92);
    border: 0.2px solid rgba(var(--bs-primary-rgb), 0.2);
}

.ai-agent-fab-group.is-chat-sending .ai-agent-fab-action.is-send-mode {
    opacity: 0.72;
}

@keyframes aiAgentBubbleIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-agent-fab-group.is-open {
    height: 112px;
}

.ai-agent-fab-group.is-open:not(.is-chat-transition) {
    width: 232px;
}

.ai-agent-fab-group.is-open.is-chat-transition {
    width: 286px;
}

.ai-agent-fab-group.is-open.is-chat-transition {
    transition: none;
    transform-origin: left center;
    animation: aiAgentChatShiftToCenter 0.9s cubic-bezier(0.22, 0.78, 0.2, 1) forwards;
    margin-right: 0 !important;
}

.ai-agent-fab-group.is-open.is-chat-transition-exit {
    animation: aiAgentChatShiftFromCenter 0.7s cubic-bezier(0.22, 0.78, 0.2, 1) forwards;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-panel {
    animation: aiAgentChatUnderShadowPulse 3.2s ease-in-out infinite;
}

.ai-agent-fab-chat-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(18px) scale(0.98);
    transition: max-width 0.48s cubic-bezier(0.22, 0.78, 0.2, 1), max-height 0.44s cubic-bezier(0.22, 0.78, 0.2, 1), transform 0.42s cubic-bezier(0.22, 0.78, 0.2, 1), opacity 0.36s ease, visibility 0.36s ease;
}

.ai-agent-fab-chat-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
    border: 0.2px solid transparent;
    border-radius: 9999px;
    padding: 0.2px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 12.5%,
            rgb(var(--bs-success-rgb)) 25%,
            rgb(var(--bs-secondary-rgb)) 37.5%,
            rgb(var(--bs-warning-rgb)) 50%,
            rgb(var(--bs-secondary-rgb)) 62.5%,
            rgb(var(--bs-success-rgb)) 75%,
            rgb(var(--bs-info-rgb)) 87.5%,
            rgb(var(--bs-primary-rgb)) 100%) border-box;
    background-size: 100% 100%, 320% 320%;
    background-position: center, 0% 50%;
    animation: aiAgentBreathGradient 6.4s ease-in-out infinite;
}

.ai-agent-fab-chat-input {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: inherit;
    padding: 0 14px;
    font-size: 0.86rem;
    color: var(--bs-body-color);
    background: #ffffff;
}

.ai-agent-fab-chat-input::placeholder {
    color: var(--bs-gray-500);
}

.ai-agent-fab-chat-input:focus {
    outline: 0;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-chat-composer {
    opacity: 1;
    transform: translateX(0) scale(1);
    flex: 0 0 auto;
    width: clamp(220px, 30vw, 400px);
    max-width: min(100%, clamp(220px, 30vw, 400px));
    max-height: 60px;
    visibility: visible;
    pointer-events: auto;
    justify-self: center;
}

.ai-agent-fab-group.is-open.is-chat-transition.is-chat-composer-exit .ai-agent-fab-chat-composer {
    opacity: 0;
    transform: translateX(16px) scale(0.98);
    max-width: 0;
    max-height: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s ease, opacity 0.16s ease, visibility 0.16s ease;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-panel {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    column-gap: 8px;
    row-gap: 4px;
    padding-top: 10px;
    padding-bottom: 6px;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-action {
    width: 55px;
    height: 55px;
    min-width: 55px;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-actions-row {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 6px;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    min-height: 40px;
    flex: 0 0 100%;
    justify-content: center;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-chat-composer {
    grid-column: 1;
    grid-row: 1;
}

.ai-agent-fab-action.is-send-mode {
    width: 55px;
    height: 55px;
    min-width: 55px;
    color: #ffffff;
    border-color: rgb(var(--bs-primary-rgb));
    background: linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 12.5%,
            rgb(var(--bs-success-rgb)) 25%,
            rgb(var(--bs-secondary-rgb)) 37.5%,
            rgb(var(--bs-warning-rgb)) 50%,
            rgb(var(--bs-secondary-rgb)) 62.5%,
            rgb(var(--bs-success-rgb)) 75%,
            rgb(var(--bs-info-rgb)) 87.5%,
            rgb(var(--bs-primary-rgb)) 100%);
    background-size: 320% 320%;
    background-position: 0% 50%;
    animation: aiAgentBreathGradient 6.4s ease-in-out infinite;
    box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.16);
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-action.is-send-mode {
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.12);
}

.ai-agent-fab,
.ai-agent-fab-icon,
.ai-agent-fab-action {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    border: 0.2px solid rgb(var(--bs-primary-rgb));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-agent-fab {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    isolation: isolate;
    background: #ffffff;
    color: var(--bs-primary);
    box-shadow: 0 14px 30px rgba(var(--bs-primary-rgb), 0.22), 0 6px 14px rgba(0, 0, 0, 0.16);
    transition: transform 0.34s ease, color 0.34s ease, border-color 0.34s ease, opacity 0.34s ease, visibility 0.34s ease;
}

.ai-agent-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 12.5%,
            rgb(var(--bs-success-rgb)) 25%,
            rgb(var(--bs-secondary-rgb)) 37.5%,
            rgb(var(--bs-warning-rgb)) 50%,
            rgb(var(--bs-secondary-rgb)) 62.5%,
            rgb(var(--bs-success-rgb)) 75%,
            rgb(var(--bs-info-rgb)) 87.5%,
            rgb(var(--bs-primary-rgb)) 100%);
        background-size: 320% 320%;
    background-position: 0% 50%;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 0;
}

.ai-agent-fab>i {
    position: relative;
    z-index: 1;
}

.ai-agent-fab:hover,
.ai-agent-fab:focus-visible {
    color: #ffffff;
    border-color: rgb(var(--bs-info-rgb));
    transform: translateY(-1px);
    animation: aiAgentBreathChromatic 3.2s ease-in-out infinite;
}

.ai-agent-fab:hover::before,
.ai-agent-fab:focus-visible::before {
    opacity: 1;
    animation: aiAgentBreathGradient 6.4s ease-in-out infinite;
}

.ai-agent-fab:focus-visible,
.ai-agent-fab-action:focus-visible,
.ai-agent-fab-close:focus-visible {
    outline: 0;
}

.ai-agent-fab-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 9999px;
    background: #ffffff;
    border: 0.2px solid rgb(var(--bs-primary-rgb));
    box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.18), 0 6px 14px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    overflow: hidden;
    transform-origin: right center;
    transform: scaleX(0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.46s cubic-bezier(0.22, 0.78, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
}

.ai-agent-fab-actions-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ai-agent-fab-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    width: 100%;
}

.ai-agent-fab-edge-chevron {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--bs-primary-rgb), 0.9);
    pointer-events: auto;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.ai-agent-fab-edge-chevron > i {
    margin-left: 10px;
}

.ai-agent-fab-edge-chevron:hover,
.ai-agent-fab-edge-chevron:focus-visible {
    color: rgba(var(--bs-primary-rgb), 1);
}

.ai-agent-fab-edge-chevron:focus-visible {
    outline: none;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-edge-chevron {
    opacity: 0;
}

.ai-agent-fab-group.is-left-label {
    left: 0.75rem !important;
    right: auto !important;
    width: 190px;
}

.ai-agent-fab-group.is-left-label .ai-agent-fab-panel {
    min-height: 56px;
    padding: 0.2rem 0.85rem;
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    background: linear-gradient(135deg,
            rgba(var(--bs-primary-rgb), 0.18),
            rgba(var(--bs-success-rgb), 0.14));
    box-shadow:
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.14),
        0 10px 24px rgba(var(--bs-primary-rgb), 0.28);
}

.ai-agent-fab-group.is-left-label .ai-agent-fab-brand {
    min-height: 56px;
    justify-content: center;
}

.ai-agent-fab-group.is-left-label .ai-agent-fab-brand-label {
    white-space: nowrap;
    text-align: center;
    font-size: 0.67rem;
}

.ai-agent-fab-group.is-left-label .ai-agent-fab-icon,
.ai-agent-fab-group.is-left-label .ai-agent-fab-actions-row,
.ai-agent-fab-group.is-left-label .ai-agent-fab-chat-composer {
    display: none !important;
}

.ai-agent-fab-group.is-left-label .ai-agent-fab-edge-chevron {
    left: 10px;
    right: auto;
    color: rgba(var(--bs-primary-rgb), 0.95);
}

.ai-agent-fab-group.is-left-label .ai-agent-fab-edge-chevron > i {
    margin-left: 0;
}

.ai-agent-fab-brand-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.15;
    background: linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 12.5%,
            rgb(var(--bs-success-rgb)) 25%,
            rgb(var(--bs-secondary-rgb)) 37.5%,
            rgb(var(--bs-warning-rgb)) 50%,
            rgb(var(--bs-secondary-rgb)) 62.5%,
            rgb(var(--bs-success-rgb)) 75%,
            rgb(var(--bs-info-rgb)) 87.5%,
            rgb(var(--bs-primary-rgb)) 100%);
    background-size: 320% 320%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: aiAgentBreathGradient 6.4s ease-in-out infinite;
    white-space: normal;
    text-transform: none;
}

.ai-agent-fab-group.is-open .ai-agent-fab {
    transform: translateY(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
}

.ai-agent-fab-group.is-open .ai-agent-fab-panel {
    transform: scaleX(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: aiAgentOpenShadowPulse 3.2s ease-in-out infinite;
}

.ai-agent-fab-actions-row > .ai-agent-fab-action,
.ai-agent-fab-brand {
    transform: translateX(14px);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.22, 0.78, 0.2, 1), opacity 0.36s ease;
}

.ai-agent-fab-group.is-open .ai-agent-fab-actions-row > .ai-agent-fab-action,
.ai-agent-fab-group.is-open .ai-agent-fab-brand {
    transform: translateX(0);
    opacity: 1;
}

.ai-agent-fab-group.is-open .ai-agent-fab-actions-row > :nth-child(1) { transition-delay: 0.08s; }
.ai-agent-fab-group.is-open .ai-agent-fab-actions-row > :nth-child(2) { transition-delay: 0.14s; }
.ai-agent-fab-group.is-open .ai-agent-fab-actions-row > :nth-child(3) { transition-delay: 0.20s; }
.ai-agent-fab-group.is-open .ai-agent-fab-actions-row > :nth-child(4) { transition-delay: 0.26s; }
.ai-agent-fab-group.is-open .ai-agent-fab-brand { transition-delay: 0.32s; }

.ai-agent-fab-icon {
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    color: var(--bs-primary);
    box-shadow: none;
    padding: 0 4px;
    cursor: default;
    pointer-events: none;
}

.ai-agent-fab-icon > i {
    background: linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 12.5%,
            rgb(var(--bs-success-rgb)) 25%,
            rgb(var(--bs-secondary-rgb)) 37.5%,
            rgb(var(--bs-warning-rgb)) 50%,
            rgb(var(--bs-secondary-rgb)) 62.5%,
            rgb(var(--bs-success-rgb)) 75%,
            rgb(var(--bs-info-rgb)) 87.5%,
            rgb(var(--bs-primary-rgb)) 100%);
    background-size: 320% 320%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: aiAgentBreathGradient 6.4s ease-in-out infinite;
}

.ai-agent-fab-action {
    background: #ffffff;
    color: var(--bs-primary);
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), 0.14);
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ai-agent-fab-action:hover,
.ai-agent-fab-action:focus-visible {
    transform: translateY(-1px);
    color: var(--bs-info);
    border-color: rgb(var(--bs-info-rgb));
    box-shadow: 0 12px 24px rgba(var(--bs-info-rgb), 0.24);
}

.ai-agent-fab-action.is-send-mode:hover,
.ai-agent-fab-action.is-send-mode:focus-visible,
.ai-agent-fab-action.ai-agent-fab-fullscreen:hover,
.ai-agent-fab-action.ai-agent-fab-fullscreen:focus-visible {
    transform: translateY(0);
}

.ai-agent-fab-close:hover,
.ai-agent-fab-close:focus-visible {
    color: var(--bs-danger);
    border-color: rgb(var(--bs-danger-rgb));
    box-shadow: 0 12px 24px rgba(var(--bs-danger-rgb), 0.24);
}

.ai-agent-fab-mic.is-selected {
    color: #ffffff;
    border-color: rgb(var(--bs-primary-rgb));
    background: linear-gradient(135deg,
            rgb(var(--bs-primary-rgb)) 0%,
            rgb(var(--bs-info-rgb)) 12.5%,
            rgb(var(--bs-success-rgb)) 25%,
            rgb(var(--bs-secondary-rgb)) 37.5%,
            rgb(var(--bs-warning-rgb)) 50%,
            rgb(var(--bs-secondary-rgb)) 62.5%,
            rgb(var(--bs-success-rgb)) 75%,
            rgb(var(--bs-info-rgb)) 87.5%,
            rgb(var(--bs-primary-rgb)) 100%);
        background-size: 320% 320%;
    background-position: 0% 50%;
        cursor: pointer;
        transform: translateY(0);
        box-shadow: none;
}

.ai-agent-fab-group.is-open .ai-agent-fab-mic.is-selected {
    animation: aiAgentMicSelectedPulse 3.2s ease-in-out infinite;
}

.ai-agent-fab-mic .ai-agent-mic-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-4px);
    transition: max-width 0.4s cubic-bezier(0.22, 0.78, 0.2, 1), margin-left 0.34s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.78, 0.2, 1);
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-mic.is-selected {
    animation: none;
    color: var(--bs-primary);
    border-color: rgb(var(--bs-primary-rgb));
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), 0.14);
    transform: translateY(0);
    gap: 2px;
}

.ai-agent-fab-group.is-open.is-chat-transition .ai-agent-fab-mic .ai-agent-mic-chevron {
    max-width: 16px;
    margin-left: 2px;
    opacity: 1;
    transform: translateX(0);
}

.ai-agent-fab-group.is-open.is-chat-transition.is-chat-composer-exit .ai-agent-fab-mic .ai-agent-mic-chevron,
.ai-agent-fab-group.is-open.is-chat-transition.is-chat-transition-exit .ai-agent-fab-mic .ai-agent-mic-chevron {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-4px);
}

.ai-agent-fab-mic.is-selected.is-pressed,
.ai-agent-fab-mic.is-selected:active {
    animation: none !important;
    transform: translateY(1px);
    box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.62), inset 0 3px 0 rgba(0, 0, 0, 0.95), inset 0 -2px 0 rgba(255, 255, 255, 0.16);
}

.ai-agent-fab-group.is-open .ai-agent-fab-mic.is-selected > i {
    animation: aiAgentBreathGradient 6.4s ease-in-out infinite;
}

.ai-agent-mic-visualizer {
    position: fixed;
    left: 50%;
    bottom: 72px;
    transform: translate(-50%, 10px);
    z-index: 1085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 820px;
    height: 84px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-agent-mic-visualizer.is-active {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ai-agent-mic-visualizer-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.92) 14%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.92) 86%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.92) 14%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.92) 86%,
            rgba(0, 0, 0, 0) 100%);
}

.ai-agent-mic-wave {
    fill: none;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.98;
    vector-effect: non-scaling-stroke;
    mix-blend-mode: screen;
    animation: aiAgentMicNeonPulse 2.6s ease-in-out infinite alternate;
}

.ai-agent-mic-wave:nth-child(1) {
    stroke: rgba(var(--bs-primary-rgb), 0.92);
    filter: drop-shadow(0 0 2px rgba(var(--bs-primary-rgb), 0.85)) drop-shadow(0 0 7px rgba(var(--bs-primary-rgb), 0.65)) drop-shadow(0 0 14px rgba(var(--bs-primary-rgb), 0.40));
}

.ai-agent-mic-wave:nth-child(2) {
    stroke: rgba(var(--bs-info-rgb), 0.88);
    filter: drop-shadow(0 0 2px rgba(var(--bs-info-rgb), 0.82)) drop-shadow(0 0 7px rgba(var(--bs-info-rgb), 0.62)) drop-shadow(0 0 14px rgba(var(--bs-info-rgb), 0.38));
    animation-delay: 0.12s;
}

.ai-agent-mic-wave:nth-child(3) {
    stroke: rgba(var(--bs-success-rgb), 0.90);
    filter: drop-shadow(0 0 2px rgba(var(--bs-success-rgb), 0.84)) drop-shadow(0 0 7px rgba(var(--bs-success-rgb), 0.64)) drop-shadow(0 0 14px rgba(var(--bs-success-rgb), 0.40));
    animation-delay: 0.24s;
}

.ai-agent-mic-wave:nth-child(4) {
    stroke: rgba(var(--bs-secondary-rgb), 0.88);
    filter: drop-shadow(0 0 2px rgba(var(--bs-secondary-rgb), 0.82)) drop-shadow(0 0 7px rgba(var(--bs-secondary-rgb), 0.60)) drop-shadow(0 0 14px rgba(var(--bs-secondary-rgb), 0.36));
    animation-delay: 0.36s;
}

.ai-agent-mic-wave:nth-child(5) {
    stroke: rgba(var(--bs-warning-rgb), 0.86);
    filter: drop-shadow(0 0 2px rgba(var(--bs-warning-rgb), 0.80)) drop-shadow(0 0 7px rgba(var(--bs-warning-rgb), 0.58)) drop-shadow(0 0 14px rgba(var(--bs-warning-rgb), 0.34));
    animation-delay: 0.48s;
}

.ai-agent-fab-speech-bubble {
    position: absolute;
    right: 0;
    bottom: calc(100% + 16px);
    width: min(560px, 68vw);
    min-width: 320px;
    max-height: none;
    padding: 14px 40px 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.26);
    box-shadow: 0 14px 30px rgba(var(--bs-primary-rgb), 0.24);
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: hidden;
    word-break: break-word;
    user-select: text;
    -webkit-user-select: text;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 8;
}

.ai-agent-fab-speech-bubble-message {
    display: block;
}

.ai-agent-fab-speech-bubble-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity 0.18s ease, background-color 0.18s ease;
}

.ai-agent-fab-speech-bubble-close:hover,
.ai-agent-fab-speech-bubble-close:focus-visible {
    opacity: 1;
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.ai-agent-fab-speech-bubble.is-error .ai-agent-fab-speech-bubble-close:hover,
.ai-agent-fab-speech-bubble.is-error .ai-agent-fab-speech-bubble-close:focus-visible {
    background: rgba(var(--bs-danger-rgb), 0.12);
}

.ai-agent-fab-speech-bubble::after {
    content: '';
    position: absolute;
    right: 24px;
    bottom: -17px;
    width: 0;
    height: 0;
    border-top: 18px solid #ffffff;
    border-left: 14px solid transparent;
    border-right: 4px solid transparent;
}

.ai-agent-fab-speech-bubble::before {
    content: '';
    position: absolute;
    right: 23px;
    bottom: -19px;
    width: 0;
    height: 0;
    border-top: 20px solid rgba(var(--bs-primary-rgb), 0.26);
    border-left: 15px solid transparent;
    border-right: 5px solid transparent;
    z-index: -1;
}

.ai-agent-fab-speech-bubble.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ai-agent-fab-speech-bubble.is-error {
    color: var(--bs-danger);
    border-color: rgba(var(--bs-danger-rgb), 0.34);
    box-shadow: 0 10px 22px rgba(var(--bs-danger-rgb), 0.22);
}

.ai-agent-fab-speech-bubble.is-error::after {
    border-top-color: #ffffff;
}

.ai-agent-fab-speech-bubble.is-error::before {
    border-top-color: rgba(var(--bs-danger-rgb), 0.34);
}

.ai-agent-query-widget-host {
    display: grid;
    gap: 14px;
    margin: 8px 0 16px;
}

.ai-agent-query-widget-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.28);
    box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.2);
    padding: 14px 14px 12px;
}

.ai-agent-query-widget-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(120deg,
            rgba(var(--bs-primary-rgb), 0.92),
            rgba(var(--bs-info-rgb), 0.9),
            rgba(var(--bs-success-rgb), 0.9),
            rgba(var(--bs-warning-rgb), 0.88),
            rgba(var(--bs-primary-rgb), 0.92));
    background-size: 280% 280%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: aiAgentWidgetNeonBorder 4.8s linear infinite;
}

.ai-agent-query-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ai-agent-query-widget-title {
    margin: 0;
    font-size: 0.97rem;
    font-weight: 700;
    color: rgb(var(--bs-primary-rgb));
}

.ai-agent-query-widget-subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: rgba(var(--bs-primary-rgb), 0.8);
}

.ai-agent-query-widget-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: rgb(var(--bs-primary-rgb));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ai-agent-query-widget-close:hover,
.ai-agent-query-widget-close:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.18);
    transform: translateY(-1px);
}

.ai-agent-query-widget-body {
    position: relative;
    z-index: 1;
}

.ai-agent-query-widget-chart {
    min-height: 120px;
}

.ai-agent-widget-kpi {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ai-agent-widget-kpi-value {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 800;
    color: rgb(var(--bs-primary-rgb));
}

.ai-agent-widget-kpi-label {
    font-size: 0.82rem;
    color: rgba(var(--bs-primary-rgb), 0.82);
}

.ai-agent-widget-table {
    font-size: 0.78rem;
}

.ai-agent-widget-table thead th {
    color: rgba(var(--bs-primary-rgb), 0.9);
    border-bottom-color: rgba(var(--bs-primary-rgb), 0.18);
}

.ai-agent-widget-table td,
.ai-agent-widget-table th {
    border-color: rgba(var(--bs-primary-rgb), 0.12);
}

@keyframes aiAgentWidgetNeonBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@media (max-width: 767.98px) {
    .ai-agent-fab-speech-bubble {
        width: min(92vw, 460px);
        min-width: 0;
        max-height: none;
        font-size: 0.94rem;
        line-height: 1.5;
        right: 0;
        bottom: calc(100% + 12px);
    }

    .ai-agent-fab-speech-bubble::after {
        right: 20px;
    }

    .ai-agent-fab-speech-bubble::before {
        right: 19px;
    }
}

@keyframes aiAgentMicNeonPulse {
    0% {
        opacity: 0.86;
    }

    100% {
        opacity: 1;
    }
}

@keyframes aiAgentBreathChromatic {
    0% {
        transform: translateY(0);
        box-shadow: 0 14px 30px rgba(var(--bs-primary-rgb), 0.42), 0 7px 16px rgba(var(--bs-primary-rgb), 0.28);
    }

    12.5% {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(var(--bs-info-rgb), 0.44), 0 10px 22px rgba(var(--bs-info-rgb), 0.30);
    }

    25% {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(var(--bs-success-rgb), 0.43), 0 10px 22px rgba(var(--bs-success-rgb), 0.30);
    }

    37.5% {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(var(--bs-secondary-rgb), 0.42), 0 10px 22px rgba(var(--bs-secondary-rgb), 0.30);
    }

    50% {
        transform: translateY(-1px);
        box-shadow: 0 16px 36px rgba(var(--bs-warning-rgb), 0.40), 0 9px 20px rgba(var(--bs-warning-rgb), 0.28);
    }

    62.5% {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(var(--bs-secondary-rgb), 0.42), 0 10px 22px rgba(var(--bs-secondary-rgb), 0.30);
    }

    75% {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(var(--bs-success-rgb), 0.43), 0 10px 22px rgba(var(--bs-success-rgb), 0.30);
    }

    87.5% {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(var(--bs-info-rgb), 0.44), 0 10px 22px rgba(var(--bs-info-rgb), 0.30);
    }

    100% {
        transform: translateY(0);
        box-shadow: 0 14px 30px rgba(var(--bs-primary-rgb), 0.42), 0 7px 16px rgba(var(--bs-primary-rgb), 0.28);
    }
}

@keyframes aiAgentBreathGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes aiAgentOpenShadowPulse {
    0% {
        border-color: rgb(var(--bs-primary-rgb));
        box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.34), 0 6px 14px rgba(var(--bs-primary-rgb), 0.22);
    }

    12.5% {
        border-color: rgb(var(--bs-info-rgb));
        box-shadow: 0 16px 34px rgba(var(--bs-info-rgb), 0.36), 0 8px 18px rgba(var(--bs-info-rgb), 0.24);
    }

    25% {
        border-color: rgb(var(--bs-success-rgb));
        box-shadow: 0 16px 34px rgba(var(--bs-success-rgb), 0.35), 0 8px 18px rgba(var(--bs-success-rgb), 0.23);
    }

    37.5% {
        border-color: rgb(var(--bs-secondary-rgb));
        box-shadow: 0 16px 34px rgba(var(--bs-secondary-rgb), 0.34), 0 8px 18px rgba(var(--bs-secondary-rgb), 0.22);
    }

    50% {
        border-color: rgb(var(--bs-warning-rgb));
        box-shadow: 0 14px 30px rgba(var(--bs-warning-rgb), 0.33), 0 7px 16px rgba(var(--bs-warning-rgb), 0.21);
    }

    62.5% {
        border-color: rgb(var(--bs-secondary-rgb));
        box-shadow: 0 16px 34px rgba(var(--bs-secondary-rgb), 0.34), 0 8px 18px rgba(var(--bs-secondary-rgb), 0.22);
    }

    75% {
        border-color: rgb(var(--bs-success-rgb));
        box-shadow: 0 16px 34px rgba(var(--bs-success-rgb), 0.35), 0 8px 18px rgba(var(--bs-success-rgb), 0.23);
    }

    87.5% {
        border-color: rgb(var(--bs-info-rgb));
        box-shadow: 0 16px 34px rgba(var(--bs-info-rgb), 0.36), 0 8px 18px rgba(var(--bs-info-rgb), 0.24);
    }

    100% {
        border-color: rgb(var(--bs-primary-rgb));
        box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.34), 0 6px 14px rgba(var(--bs-primary-rgb), 0.22);
    }
}

@keyframes aiAgentChatUnderShadowPulse {
    0% {
        border-color: rgb(var(--bs-primary-rgb));
        box-shadow: 0 18px 34px rgba(var(--bs-primary-rgb), 0.32), 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    12.5% {
        border-color: rgb(var(--bs-info-rgb));
        box-shadow: 0 20px 36px rgba(var(--bs-info-rgb), 0.34), 0 12px 22px rgba(0, 0, 0, 0.2);
    }

    25% {
        border-color: rgb(var(--bs-success-rgb));
        box-shadow: 0 20px 36px rgba(var(--bs-success-rgb), 0.33), 0 12px 22px rgba(0, 0, 0, 0.2);
    }

    37.5% {
        border-color: rgb(var(--bs-secondary-rgb));
        box-shadow: 0 20px 36px rgba(var(--bs-secondary-rgb), 0.32), 0 12px 22px rgba(0, 0, 0, 0.2);
    }

    50% {
        border-color: rgb(var(--bs-warning-rgb));
        box-shadow: 0 19px 35px rgba(var(--bs-warning-rgb), 0.31), 0 11px 21px rgba(0, 0, 0, 0.2);
    }

    62.5% {
        border-color: rgb(var(--bs-secondary-rgb));
        box-shadow: 0 20px 36px rgba(var(--bs-secondary-rgb), 0.32), 0 12px 22px rgba(0, 0, 0, 0.2);
    }

    75% {
        border-color: rgb(var(--bs-success-rgb));
        box-shadow: 0 20px 36px rgba(var(--bs-success-rgb), 0.33), 0 12px 22px rgba(0, 0, 0, 0.2);
    }

    87.5% {
        border-color: rgb(var(--bs-info-rgb));
        box-shadow: 0 20px 36px rgba(var(--bs-info-rgb), 0.34), 0 12px 22px rgba(0, 0, 0, 0.2);
    }

    100% {
        border-color: rgb(var(--bs-primary-rgb));
        box-shadow: 0 18px 34px rgba(var(--bs-primary-rgb), 0.32), 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

@keyframes aiAgentMicSelectedPulse {
    0% {
        border-color: rgb(var(--bs-primary-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-primary-rgb), 0.34), 0 6px 14px rgba(var(--bs-primary-rgb), 0.24);
        background-position: 0% 50%;
    }

    12.5% {
        border-color: rgb(var(--bs-info-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-info-rgb), 0.34), 0 6px 14px rgba(var(--bs-info-rgb), 0.24);
        background-position: 35% 50%;
    }

    25% {
        border-color: rgb(var(--bs-success-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-success-rgb), 0.34), 0 6px 14px rgba(var(--bs-success-rgb), 0.24);
        background-position: 55% 50%;
    }

    37.5% {
        border-color: rgb(var(--bs-secondary-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-secondary-rgb), 0.34), 0 6px 14px rgba(var(--bs-secondary-rgb), 0.24);
        background-position: 75% 50%;
    }

    50% {
        border-color: rgb(var(--bs-warning-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-warning-rgb), 0.34), 0 6px 14px rgba(var(--bs-warning-rgb), 0.24);
        background-position: 100% 50%;
    }

    62.5% {
        border-color: rgb(var(--bs-secondary-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-secondary-rgb), 0.34), 0 6px 14px rgba(var(--bs-secondary-rgb), 0.24);
        background-position: 75% 50%;
    }

    75% {
        border-color: rgb(var(--bs-success-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-success-rgb), 0.34), 0 6px 14px rgba(var(--bs-success-rgb), 0.24);
        background-position: 55% 50%;
    }

    87.5% {
        border-color: rgb(var(--bs-info-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-info-rgb), 0.34), 0 6px 14px rgba(var(--bs-info-rgb), 0.24);
        background-position: 35% 50%;
    }

    100% {
        border-color: rgb(var(--bs-primary-rgb));
        box-shadow: 0 12px 26px rgba(var(--bs-primary-rgb), 0.34), 0 6px 14px rgba(var(--bs-primary-rgb), 0.24);
        background-position: 0% 50%;
    }
}

@keyframes aiAgentFrameShadowPulse {
    0% {
        box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), 0.22), 0 2px 6px rgba(var(--bs-primary-rgb), 0.16);
    }

    12.5% {
        box-shadow: 0 10px 24px rgba(var(--bs-info-rgb), 0.23), 0 3px 8px rgba(var(--bs-info-rgb), 0.17);
    }

    25% {
        box-shadow: 0 10px 24px rgba(var(--bs-success-rgb), 0.22), 0 3px 8px rgba(var(--bs-success-rgb), 0.17);
    }

    37.5% {
        box-shadow: 0 10px 24px rgba(var(--bs-secondary-rgb), 0.21), 0 3px 8px rgba(var(--bs-secondary-rgb), 0.16);
    }

    50% {
        box-shadow: 0 9px 23px rgba(var(--bs-warning-rgb), 0.21), 0 3px 7px rgba(var(--bs-warning-rgb), 0.16);
    }

    62.5% {
        box-shadow: 0 10px 24px rgba(var(--bs-secondary-rgb), 0.21), 0 3px 8px rgba(var(--bs-secondary-rgb), 0.16);
    }

    75% {
        box-shadow: 0 10px 24px rgba(var(--bs-success-rgb), 0.22), 0 3px 8px rgba(var(--bs-success-rgb), 0.17);
    }

    87.5% {
        box-shadow: 0 10px 24px rgba(var(--bs-info-rgb), 0.23), 0 3px 8px rgba(var(--bs-info-rgb), 0.17);
    }

    100% {
        box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), 0.22), 0 2px 6px rgba(var(--bs-primary-rgb), 0.16);
    }
}

@keyframes aiAgentFrameHeaderShadowVarPulse {
    0% {
        --agent00-header-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), 0.22), 0 2px 6px rgba(var(--bs-primary-rgb), 0.16);
    }

    12.5% {
        --agent00-header-shadow: 0 10px 24px rgba(var(--bs-info-rgb), 0.23), 0 3px 8px rgba(var(--bs-info-rgb), 0.17);
    }

    25% {
        --agent00-header-shadow: 0 10px 24px rgba(var(--bs-success-rgb), 0.22), 0 3px 8px rgba(var(--bs-success-rgb), 0.17);
    }

    37.5% {
        --agent00-header-shadow: 0 10px 24px rgba(var(--bs-secondary-rgb), 0.21), 0 3px 8px rgba(var(--bs-secondary-rgb), 0.16);
    }

    50% {
        --agent00-header-shadow: 0 9px 23px rgba(var(--bs-warning-rgb), 0.21), 0 3px 7px rgba(var(--bs-warning-rgb), 0.16);
    }

    62.5% {
        --agent00-header-shadow: 0 10px 24px rgba(var(--bs-secondary-rgb), 0.21), 0 3px 8px rgba(var(--bs-secondary-rgb), 0.16);
    }

    75% {
        --agent00-header-shadow: 0 10px 24px rgba(var(--bs-success-rgb), 0.22), 0 3px 8px rgba(var(--bs-success-rgb), 0.17);
    }

    87.5% {
        --agent00-header-shadow: 0 10px 24px rgba(var(--bs-info-rgb), 0.23), 0 3px 8px rgba(var(--bs-info-rgb), 0.17);
    }

    100% {
        --agent00-header-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), 0.22), 0 2px 6px rgba(var(--bs-primary-rgb), 0.16);
    }
}

@keyframes aiAgentFrameFooterShadowVarPulse {
    0% {
        --agent00-footer-shadow: 0 -5px 15px rgba(var(--bs-primary-rgb), 0.2);
    }

    12.5% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-info-rgb), 0.21);
    }

    25% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-success-rgb), 0.2);
    }

    37.5% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-secondary-rgb), 0.19);
    }

    50% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-warning-rgb), 0.19);
    }

    62.5% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-secondary-rgb), 0.19);
    }

    75% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-success-rgb), 0.2);
    }

    87.5% {
        --agent00-footer-shadow: 0 -6px 16px rgba(var(--bs-info-rgb), 0.21);
    }

    100% {
        --agent00-footer-shadow: 0 -5px 15px rgba(var(--bs-primary-rgb), 0.2);
    }
}

@keyframes aiAgentFrameCornerShadowPulse {
    0% {
        filter: drop-shadow(0 2px 3px rgba(var(--bs-primary-rgb), 0.3));
    }

    12.5% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-info-rgb), 0.3));
    }

    25% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-success-rgb), 0.3));
    }

    37.5% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-secondary-rgb), 0.3));
    }

    50% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-warning-rgb), 0.3));
    }

    62.5% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-secondary-rgb), 0.3));
    }

    75% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-success-rgb), 0.3));
    }

    87.5% {
        filter: drop-shadow(0 2px 4px rgba(var(--bs-info-rgb), 0.3));
    }

    100% {
        filter: drop-shadow(0 2px 3px rgba(var(--bs-primary-rgb), 0.3));
    }
}

@keyframes aiAgentChatShiftToCenter {
    0% {
        width: 286px;
        transform: translateX(0) scaleX(1);
    }

    85% {
        width: 50vw;
        transform: translateX(-25vw) scaleX(1);
    }

    100% {
        width: 50vw;
        transform: translateX(-25vw) scaleX(1);
    }
}

@keyframes aiAgentChatShiftFromCenter {
    0% {
        width: 50vw;
        transform: translateX(-25vw) scaleX(1);
    }

    100% {
        width: 286px;
        transform: translateX(0) scaleX(1);
    }
}

/* 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;
}

/* Hover Scale Danger Variant */
.hover-scale-danger:hover {
    background-color: var(--bs-danger) !important;
}

.hover-scale-danger:hover .text-danger {
    color: #ffffff !important;
}

/* Hover Scale Light Variant */
.hover-scale-light:hover {
    background-color: var(--bs-gray-200) !important;
    color: var(--bs-body-color) !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 Alerts Styling */
.home-alert {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-body-color);
}

.home-alert a {
    color: inherit;
}

.home-alert a:hover {
    color: inherit;
}

.home-alert-icon {
    color: var(--bs-primary);
}

.home-alert--closure,
.home-alert--interview {
    background: rgba(var(--bs-info-rgb), 0.12);
    border-color: rgba(var(--bs-info-rgb), 0.28);
}

.home-alert--closure .home-alert-icon,
.home-alert--interview .home-alert-icon {
    color: var(--bs-info);
}

.home-alert--training {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.26);
}

.home-alert--training .home-alert-icon {
    color: var(--bs-primary);
}

.home-alert--leave-approval,
.home-alert--expense-approval {
    background: rgba(var(--bs-warning-rgb), 0.2);
    border-color: rgba(var(--bs-warning-rgb), 0.38);
}

.home-alert--leave-approval .home-alert-icon,
.home-alert--expense-approval .home-alert-icon {
    color: color-mix(in srgb, var(--bs-warning) 70%, var(--bs-gray-800));
}

.home-alert--generic {
    background: rgba(var(--bs-secondary-rgb), 0.16);
    border-color: rgba(var(--bs-secondary-rgb), 0.34);
}

.home-alert--generic .home-alert-icon {
    color: var(--bs-secondary);
}

.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: 131;
    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: 131;
    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;
    background-color: var(--bs-body-bg);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.swup-transition-fade::before,
.swup-transition-fade::after {
    content: "";
    position: fixed;
    top: 50dvh;
    left: 50vw;
    width: 220vmax;
    height: 220vmax;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.02);
    z-index: 2;
    background: transparent;
}

/* 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;
}

/* Agent 00 Chat */
.agent00-chat-shell {
    max-width: 1100px;
    margin: 0 auto;
    height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - 2.2rem);
    min-height: 560px;
    display: flex;
    flex-direction: column;
}

.agent00-chat-hero {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-info) 100%);
    box-shadow: 0 12px 30px rgba(var(--bs-primary-rgb), 0.18);
}

.agent00-avatar {
    width: 78px;
    height: 78px;
    font-size: 2rem;
    flex-shrink: 0;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
}

.agent00-model-box {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 10px 22px rgba(8, 26, 36, 0.12);
}

.agent00-model-box .form-select {
    border-color: rgba(var(--bs-primary-rgb), 0.22);
}

.agent00-chat-card {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.13);
    border-radius: 1.15rem;
    box-shadow: 0 10px 24px rgba(12, 30, 43, 0.08);
    flex: 1 1 auto;
    min-height: 0;
}

.agent00-chat-card .card-body {
    min-height: 0;
    height: 100%;
}

.agent00-chat-messages {
    overflow-y: auto;
    min-height: 0;
    height: 100%;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0.95rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05) 0%, rgba(255, 255, 255, 0.95) 34%);
}

.agent00-msg {
    max-width: 86%;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    padding: 0.8rem 0.9rem;
    box-shadow: 0 8px 20px rgba(15, 31, 41, 0.06);
}

.agent00-msg-user {
    margin-left: auto;
    text-align: right;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.agent00-msg-agent {
    background-color: rgba(var(--bs-success-rgb), 0.13);
    border-color: rgba(var(--bs-success-rgb), 0.34);
}

.agent00-msg-error {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    border-color: rgba(var(--bs-danger-rgb), 0.3);
    color: var(--bs-danger);
}

.agent00-badge-user {
    background: var(--bs-primary);
}

.agent00-badge-agent {
    background: #fff;
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
}

.agent00-badge-error {
    background: var(--bs-danger);
}

.agent00-msg-body {
    font-weight: 600;
    color: var(--bs-gray-900);
}

.agent00-msg-error .agent00-msg-body {
    color: inherit;
}

.agent00-empty-state {
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.25);
    border-radius: 0.85rem;
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.agent00-chat-form .input-group {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), 0.08);
}

.agent00-chat-form .form-control {
    border: 0;
    padding: 0.76rem 0.95rem;
    background: #fff;
}

.agent00-chat-form .form-control:focus {
    box-shadow: none;
    background: rgba(var(--bs-primary-rgb), 0.02);
}

.agent00-chat-form .btn {
    border-radius: 0;
}

body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-hero,
body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-messages,
body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-form .input-group {
    animation: aiAgentOpenShadowPulse 3.2s ease-in-out infinite;
}

body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-card {
    animation: aiAgentChatUnderShadowPulse 3.2s ease-in-out infinite;
}

body.agent00-chat-request-pending .app-header {
    --agent00-header-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), 0.22), 0 2px 6px rgba(var(--bs-primary-rgb), 0.16);
    box-shadow: var(--agent00-header-shadow) !important;
    animation: aiAgentFrameHeaderShadowVarPulse 3.2s ease-in-out infinite !important;
}

body.agent00-chat-request-pending .app-footer {
    --agent00-footer-shadow: 0 -5px 15px rgba(var(--bs-primary-rgb), 0.2);
    box-shadow: var(--agent00-footer-shadow) !important;
    animation: aiAgentFrameFooterShadowVarPulse 3.2s ease-in-out infinite !important;
}

body.agent00-chat-request-pending .app-body-card,
body.agent00-chat-request-pending .sidebar-wrapper {
    animation: aiAgentFrameShadowPulse 3.2s ease-in-out infinite !important;
}

body.agent00-chat-request-pending .app-header::before,
body.agent00-chat-request-pending .app-header::after,
body.agent00-chat-request-pending .app-footer::before,
body.agent00-chat-request-pending .app-footer::after {
    animation: aiAgentFrameCornerShadowPulse 3.2s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-hero,
    body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-card,
    body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-messages,
    body.agent00-chat-request-pending .agent00-chat-shell .agent00-chat-form .input-group,
    body.agent00-chat-request-pending .app-header,
    body.agent00-chat-request-pending .app-footer,
    body.agent00-chat-request-pending .app-body-card,
    body.agent00-chat-request-pending .sidebar-wrapper,
    body.agent00-chat-request-pending .app-header::before,
    body.agent00-chat-request-pending .app-header::after,
    body.agent00-chat-request-pending .app-footer::before,
    body.agent00-chat-request-pending .app-footer::after {
        animation: none;
    }
}

/* Mobile hamburger slide-out effect: inner page as card */
@media (max-width: 767.98px) {
    .agent00-chat-shell {
        height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - 1.4rem);
        min-height: 0;
    }

    .agent00-msg {
        max-width: 95%;
    }

    /* 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 .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.login-bg .input-group .btn {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.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);
}

.session-expiry-banner {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    max-width: 360px;
    background: rgba(var(--bs-warning-rgb), 0.95);
    color: var(--bs-gray-900);
    border-radius: 0.85rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    padding: 0.9rem 2.25rem 0.9rem 1rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.session-expiry-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.session-expiry-banner__title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.session-expiry-banner__message {
    font-size: 0.9rem;
    line-height: 1.35;
}

.session-expiry-banner__close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.session-expiry-banner__close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.35);
}

.session-expiry-banner__close:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 2px;
}

/* 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;
}

/* Dropdown Show State for Search Hover */
.search-hover.show {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: inset 0 6px 14px rgba(0,0,0,0.45) !important;
}

.search-hover.show::after {
    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 - Material-like lift and shape */
.btn-hover-effect {
    transition:
        transform 160ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 160ms cubic-bezier(0.2, 0, 0, 1),
        border-radius 160ms cubic-bezier(0.2, 0, 0, 1),
        background-color 160ms ease,
        color 160ms ease;
}

.btn-hover-effect:hover {
    transform: translateY(-2px);
    border-radius: 0.9rem !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.18) !important;
}

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

/* ACR tables: rounded hover and branded headers */
.acr-table {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.06);
    --bs-table-hover-color: var(--bs-body-color);
}

.acr-table thead {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.acr-table thead th {
    color: var(--bs-primary);
    font-weight: 600;
}

.acr-matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #ffffff;
}

.acr-matrix-table .acr-matrix-criterion {
    min-width: 230px;
}

.acr-matrix-table .acr-matrix-col {
    min-width: 110px;
    white-space: nowrap;
}

.acr-matrix-table tr[data-acr-row="1"] {
    cursor: pointer;
}

.acr-matrix-table tr.acr-matrix-row-active > * {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.acr-matrix-scroll {
    max-height: 80vh;
    overflow-y: auto;
}

.acr-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.acr-score-empty {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.12);
    color: #6c757d;
}

.acr-score-max {
    background-color: rgba(26, 107, 150, 0.2);
    border-color: rgb(26, 107, 150);
    color: rgb(26, 107, 150);
}

.acr-score-min {
    background-color: rgba(212, 225, 135, 0.2);
    border-color: rgb(212, 225, 135);
    color: rgb(212, 225, 135);
}

.acr-score-median {
    background-color: rgba(74, 173, 140, 0.2);
    border-color: rgb(74, 173, 140);
    color: rgb(74, 173, 140);
}

.acr-score-above {
    background-color: rgba(45, 150, 154, 0.2);
    border-color: rgb(45, 150, 154);
    color: rgb(45, 150, 154);
}

.acr-score-below {
    background-color: rgba(144, 202, 127, 0.2);
    border-color: rgb(144, 202, 127);
    color: rgb(144, 202, 127);
}

.acr-matrix-legend {
    color: #6c757d;
    font-size: 0.75rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.acr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.acr-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.acr-legend-dot--max {
    background-color: rgb(26, 107, 150);
}

.acr-legend-dot--min {
    background-color: rgb(212, 225, 135);
}

.acr-legend-dot--median {
    background-color: rgb(74, 173, 140);
}

.acr-legend-dot--above {
    background-color: rgb(45, 150, 154);
}

.acr-legend-dot--below {
    background-color: rgb(144, 202, 127);
}

.acr-criteria-table tr[data-criterion-id] {
    user-select: none;
}

.acr-criteria-table .acr-drag-handle {
    cursor: grab;
}

.acr-criteria-table .acr-drag-handle:active {
    cursor: grabbing;
}

.acr-criteria-table tr.acr-dragging > * {
    opacity: 0.7;
}

.acr-criteria-table tr.acr-group-header.acr-drop-target > * {
    box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.45);
}

.acr-criteria-table tr.acr-group-header.acr-drop-target {
    border-radius: 0.75rem;
}

.acr-review-modal .modal-header .btn-close {
    margin: 0;
}

.acr-review-modal .acr-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.1rem;
}

.acr-review-modal .acr-section {
    background-color: rgba(var(--bs-primary-rgb), 0.03);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.acr-review-modal .acr-section-title {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-primary);
}

.acr-review-modal .form-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6c757d;
}

.acr-review-modal .form-control,
.acr-review-modal .form-select {
    border-radius: 0.85rem;
    border-color: rgba(var(--bs-primary-rgb), 0.18);
    background-color: #ffffff;
}

.acr-review-modal .form-control:focus,
.acr-review-modal .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.16);
}

.acr-review-modal .form-text {
    color: #6c757d;
}

.acr-review-modal .modal-body {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}
.acr-table .acr-divider-thick > * {
    box-shadow: inset 0 2px 0 rgba(var(--bs-primary-rgb), 0.35),
        inset 0 -2px 0 rgba(var(--bs-primary-rgb), 0.35);
}

.acr-table .acr-divider > * {
    box-shadow: inset 0 1px 0 rgba(var(--bs-primary-rgb), 0.22),
        inset 0 -1px 0 rgba(var(--bs-primary-rgb), 0.22);
}

.acr-table .acr-divider-thin > * {
    box-shadow: inset 0 1px 0 rgba(var(--bs-primary-rgb), 0.12),
        inset 0 -1px 0 rgba(var(--bs-primary-rgb), 0.12);
}

.acr-table.table-hover > tbody > tr > * {
    transition: background-color 0.2s ease;
}

.acr-table.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

/* 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;
}

/* Disable hover-to-open for header dropdowns; keep click behavior */
.header-actions .dropdown:hover > .dropdown-menu {
    display: none;
}

.header-actions .dropdown:hover > .dropdown-menu.show {
    display: block;
}

/* 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 */
}

/* Keep select values readable on hover/focus inside HR expenses form */
form[action*="/hr/expenses/"] select.input-hover-effect {
    color: var(--bs-body-color) !important;
}

form[action*="/hr/expenses/"] select.input-hover-effect:hover,
form[action*="/hr/expenses/"] select.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;
}

/* Keep textarea text readable on hover/focus inside HR expenses form */
form[action*="/hr/expenses/"] textarea.input-hover-effect {
    color: #000000 !important;
    caret-color: #000000;
}

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

form[action*="/hr/expenses/"] textarea.input-hover-effect::selection {
    color: #000000;
    background: rgba(13, 110, 253, 0.2);
}

form[action*="/hr/expenses/"] textarea.input-hover-effect::-moz-selection {
    color: #000000;
    background: rgba(13, 110, 253, 0.2);
}

/* Keep password input readable in HR employee access section */
.access-section #password.input-hover-effect:hover,
.access-section #password.input-hover-effect:focus {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.08) !important;
    transform: translateY(0) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Tab pane spacing */
.tab-pane > .p-4,
.tab-pane > .p-5,
.tab-pane > .card,
.tab-pane > .row {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

/* ==================================================
   HR Employees > Access tab styling
   ================================================== */

#access.access-pane {
    position: relative;
    padding: 0.75rem;
}

#access.access-pane::before {
    content: "";
    position: absolute;
    inset: 10px;
    background: var(--bs-body-bg);
    border-radius: 1.5rem;
    pointer-events: none;
}

#access .access-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(var(--bs-primary-rgb), 0.08);
    box-shadow: 0 18px 40px rgba(2, 18, 28, 0.08);
    overflow: hidden;
}

#access .access-card-header {
    background: transparent;
}

#access .access-card-title {
    color: var(--bs-primary);
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.01em;
}

#access .access-card-body {
    background: transparent;
}

#access .access-section {
    background: linear-gradient(140deg, rgba(var(--bs-primary-rgb), 0.06), rgba(var(--bs-info-rgb), 0.05));
    border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 1.1rem;
    padding: 1.2rem 1.25rem;
    box-shadow: 0 12px 28px rgba(1, 107, 147, 0.08);
}

#access .access-section-title {
    color: var(--bs-primary) !important;
}

#access .access-divider {
    border-color: rgba(var(--bs-primary-rgb), 0.16);
    opacity: 1;
}

#access .text-muted {
    color: rgba(var(--bs-primary-rgb), 0.7) !important;
}

#access small.text-muted {
    color: rgba(var(--bs-info-rgb), 0.8) !important;
}

#access .form-label,
#access .form-check-label {
    color: #12323e;
    font-weight: 600;
}

#access .form-control {
    border-radius: 0.9rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    background: linear-gradient(180deg, #ffffff, #f6fbfd);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#access .form-control:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.8);
    box-shadow: 0 10px 26px rgba(var(--bs-primary-rgb), 0.18);
    transform: translateY(-2px);
}

#access .form-check {
    background: linear-gradient(120deg, rgba(var(--bs-primary-rgb), 0.06), rgba(var(--bs-info-rgb), 0.08));
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    border-radius: 0.95rem;
    padding: 0.6rem 0.9rem 0.6rem 2.4rem;
    box-shadow: 0 8px 20px rgba(1, 107, 147, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#access .form-check:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(1, 107, 147, 0.12);
}

#access .form-check-input {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    box-shadow: 0 6px 16px rgba(1, 107, 147, 0.15);
}

#access .form-switch .form-check-input {
    width: 2.4rem;
    height: 1.35rem;
}

#access .btn-primary {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info)) !important;
    border: none !important;
    box-shadow: 0 14px 30px rgba(var(--bs-primary-rgb), 0.2);
}

#access .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(var(--bs-primary-rgb), 0.26);
}

#access .access-empty {
    background: radial-gradient(circle at top, rgba(var(--bs-info-rgb), 0.12), rgba(255, 255, 255, 0.95));
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 1.25rem;
}

#access .access-empty .text-muted {
    color: rgba(var(--bs-primary-rgb), 0.7) !important;
}

#access .access-empty .opacity-25 {
    opacity: 1 !important;
    color: rgba(var(--bs-primary-rgb), 0.35) !important;
}

/* =========================================================
   Offers Detail (/offerte/{id}) – Aesthetic aligned style
   ========================================================= */
#offer-show .offer-card {
    border: none;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(4, 21, 31, 0.08);
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.02), rgba(255, 255, 255, 0.98));
}

#offer-show .offer-card > .card-header:not(.bg-success):not(.bg-warning):not(.bg-primary):not(.bg-danger) {
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.11), rgba(var(--bs-info-rgb), 0.13));
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08);
}

#offer-show .offer-card > .card-header h6,
#offer-show .offer-card > .card-header .mb-0 {
    color: var(--bs-primary);
    font-weight: 700;
}

#offer-show .table tbody tr {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#offer-show .table tbody tr:hover {
    transform: translateY(-2px);
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.03), rgba(var(--bs-info-rgb), 0.05));
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
}

#offer-show .offer-multiselect {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.03), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 1px 2px rgba(4, 21, 31, 0.04), 0 6px 14px rgba(var(--bs-primary-rgb), 0.07);
    padding: 0.35rem;
}

#offer-show .offer-multiselect:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18), 0 10px 22px rgba(var(--bs-primary-rgb), 0.12);
}

#offer-show .offer-multiselect option {
    border-radius: 0.6rem;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.2rem;
}

#offer-show .offer-multiselect option:checked {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    color: #ffffff;
}

/* =========================================================
   Offers Create (/offerte/nuova) – Aesthetic aligned style
   ========================================================= */
#offer-create .offer-create-card {
    border: none;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(4, 21, 31, 0.08);
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.03), rgba(255, 255, 255, 0.98));
}

#offer-create .offer-create-card > .card-header {
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.11), rgba(var(--bs-info-rgb), 0.13));
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08);
}

#offer-create .offer-create-card > .card-header h6 {
    color: var(--bs-primary);
    font-weight: 700;
}

#offer-create .offer-section-title {
    padding-bottom: 0.45rem;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.18);
    font-weight: 700;
}

#offer-create .form-control,
#offer-create .form-select {
    border-color: rgba(var(--bs-primary-rgb), 0.24);
}

#offer-create .form-control:focus,
#offer-create .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.16);
}

/* =========================================================
   Offers Dashboard (/offerte) – KPI cards theme colors
   ========================================================= */
#offer-index .offer-kpi-card {
    border-radius: 1rem;
}

#offer-index .offer-kpi-card--primary {
    background: linear-gradient(165deg, rgba(var(--bs-primary-rgb), 0.04), rgba(255, 255, 255, 0.98));
}

#offer-index .offer-kpi-card--info {
    background: linear-gradient(165deg, rgba(var(--bs-info-rgb), 0.06), rgba(255, 255, 255, 0.98));
}

#offer-index .offer-kpi-icon-chip {
    width: 44px;
    height: 44px;
}

#offer-index .offer-kpi-icon-chip--primary {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

#offer-index .offer-kpi-icon-chip--info {
    width: 46px;
    height: 46px;
    background: rgba(var(--bs-info-rgb), 0.14);
}