@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');























body {











    font-family: 'Inter', sans-serif;











    margin: 0;











    padding: 0;











}























/* Spinner di caricamento */











.loading-spinner {











    border: 3px solid #f3f3f3;











    border-top: 3px solid #3498db;











    border-radius: 50%;











    width: 20px;











    height: 20px;











    animation: spin 1s linear infinite;











}























@keyframes spin {











    0% { transform: rotate(0deg); }











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











}























/* Animazioni per il cestino */











.trash-zone {











    transition: all 0.3s ease;











    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);











}























.trash-zone.active {











    transform: scale(1.1);











    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);











}























.trash-zone.hover {











    transform: scale(1.2);











    background-color: #dc2626 !important;











}























/* Animazioni per i gruppi di moduli */











.module-group {











    transition: transform 0.2s ease, box-shadow 0.2s ease;











}























.module-group:hover {











    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);











}























.module-group.dragging {











    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);











    opacity: 0.9;











}























.module-group.selected {











    box-shadow: 0 0 0 2px #3b82f6;











}























/* Effetto pulsazione per il cestino quando si trascina un gruppo */











@keyframes pulse {











    0% {











        transform: scale(1);











        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);











    }











    70% {











        transform: scale(1.1);











        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);











    }











    100% {











        transform: scale(1);











        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);











    }











}























.trash-zone.pulse {











    animation: pulse 1.5s infinite;











}























/* Animazioni per i pannelli */











.panel {











    transition: all 0.2s ease;











}























.panel:hover {











    opacity: 0.9;











}























.panel.scanned {











    background-color: #2563eb;











    color: white;











}























.panel.unscanned {











    background-color: #bfdbfe;











    color: #1e40af;











}























/* Cursori personalizzati per le diverse modalità */











.edit-mode {











    cursor: move;











}























.scan-mode {











    cursor: pointer;











}























/* Animazione per l'apparizione/scomparsa del cestino */











.trash-enter {











    opacity: 0;











    transform: scale(0.8);











}























.trash-enter-active {











    opacity: 1;











    transform: scale(1);











    transition: opacity 300ms, transform 300ms;











}























.trash-exit {











    opacity: 1;











    transform: scale(1);











}























.trash-exit-active {











    opacity: 0;











    transform: scale(0.8);











    transition: opacity 300ms, transform 300ms;











}







/* Stili per le batterie */



.battery-card {



    position: relative;



}







.battery-card::before {



    content: '';



    position: absolute;



    top: -20px;



    left: 50%;



    width: 2px;



    height: 20px;



    background: linear-gradient(to bottom, 



        rgba(156, 39, 176, 0) 0%, 



        rgba(156, 39, 176, 0.5) 100%);



}







.connection-line {



    position: absolute;



    border-left: 2px dashed #9C27B0;



    opacity: 0.5;



}







/* Animazione per le batterie */



@keyframes batteryPulse {



    0%, 100% {



        box-shadow: 0 0 0 0 rgba(156, 39, 176, 0.4);



    }



    50% {



        box-shadow: 0 0 0 10px rgba(156, 39, 176, 0);



    }



}







.battery-active {



    animation: batteryPulse 2s infinite;



}

/* ========================================================================

   PREMIUM ENHANCEMENTS - Added for v2.1

   ======================================================================== */



/* Fade-in animation for smooth element entrance */

@keyframes fadeIn {

    from { 

        opacity: 0; 

        transform: translateY(10px); 

    }

    to { 

        opacity: 1; 

        transform: translateY(0); 

    }

}



/* Slow pulse for badges and important elements */

@keyframes pulse-slow {

    0%, 100% { 

        opacity: 1; 

    }

    50% { 

        opacity: 0.6; 

    }

}



/* Slide from right (for notifications) */

@keyframes slideInRight {

    from { 

        transform: translateX(100%); 

        opacity: 0; 

    }

    to { 

        transform: translateX(0); 

        opacity: 1; 

    }

}



/* Bounce for success indicators */

@keyframes bounce {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}



/* Shake for validation errors */

@keyframes shake {

    0%, 100% {

        transform: translateX(0);

    }

    25% {

        transform: translateX(-8px);

    }

    75% {

        transform: translateX(8px);

    }

}



/* ========================================================================

   UTILITY CLASSES

   ======================================================================== */



.animate-fadeIn {

    animation: fadeIn 0.3s ease-out;

}



.animate-pulse-slow {

    animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



.animate-slideInRight {

    animation: slideInRight 0.3s ease-out;

}



.animate-bounce {

    animation: bounce 0.5s ease-in-out;

}



.animate-shake {

    animation: shake 0.3s ease-in-out;

}



/* ========================================================================

   HOVER EFFECTS

   ======================================================================== */



.transition-smooth {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.hover-lift {

    transition: all 0.2s ease;

}



.hover-lift:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



.hover-scale {

    transition: transform 0.2s ease;

}



.hover-scale:hover {

    transform: scale(1.05);

}



/* Group hover effects */

.group:hover .group-hover-scale {

    transform: scale(1.05);

}



/* Focus glow */

.focus-glow:focus {

    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);

    outline: none;

}



/* ========================================================================

   GRADIENT BACKGROUNDS

   ======================================================================== */



.bg-gradient-subtle {

    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);

}



.bg-gradient-success {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%);

}



.bg-gradient-primary {

    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

}



.bg-gradient-purple {

    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);

}



.bg-gradient-warning {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

}



/* ========================================================================

   PROGRESS BARS

   ======================================================================== */



.progress-animated {

    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.progress-striped {

    background-image: linear-gradient(

        45deg,

        rgba(255, 255, 255, 0.15) 25%,

        transparent 25%,

        transparent 50%,

        rgba(255, 255, 255, 0.15) 50%,

        rgba(255, 255, 255, 0.15) 75%,

        transparent 75%,

        transparent

    );

    background-size: 1rem 1rem;

    animation: progress-stripes 1s linear infinite;

}



@keyframes progress-stripes {

    from {

        background-position: 1rem 0;

    }

    to {

        background-position: 0 0;

    }

}



/* ========================================================================

   BADGES & COMPLETION

   ======================================================================== */



.badge-complete {

    animation: pulse-slow 2s ease-in-out infinite;

}



.badge-glow {

    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);

}



/* ========================================================================

   LOADING STATES

   ======================================================================== */



.skeleton {

    background: linear-gradient(

        90deg,

        #f3f4f6 0%,

        #e5e7eb 50%,

        #f3f4f6 100%

    );

    background-size: 200% 100%;

    animation: skeleton-loading 1.5s ease-in-out infinite;

}



@keyframes skeleton-loading {

    0% {

        background-position: 200% 0;

    }

    100% {

        background-position: -200% 0;

    }

}



/* ========================================================================

   CARDS ENHANCEMENTS

   ======================================================================== */



.card-enhanced {

    transition: all 0.2s ease;

}



.card-enhanced:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

}



/* ========================================================================

   RESPONSIVE & ACCESSIBILITY

   ======================================================================== */



/* Reduce animations for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* Mobile optimizations */

@media (max-width: 768px) {

    .hover-lift:hover {

        transform: translateY(-2px); /* Less movement on mobile */

    }

    

    .animate-fadeIn {

        animation-duration: 0.2s; /* Faster on mobile */

    }

}



/* ========================================================================

   TOOLTIP (Future use)

   ======================================================================== */



.tooltip-wrapper {

    position: relative;

}



.tooltip-content {

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(-8px);

    padding: 0.5rem 0.75rem;

    background: rgba(0, 0, 0, 0.9);

    color: white;

    font-size: 0.875rem;

    border-radius: 0.375rem;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.2s ease-in-out;

    z-index: 1000;

}



.tooltip-wrapper:hover .tooltip-content {

    opacity: 1;

}



/* Tooltip arrow */

.tooltip-content::after {

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    border: 4px solid transparent;

    border-top-color: rgba(0, 0, 0, 0.9);

}