/* hub.css — stili pagina */

        body { font-family: 'Plus Jakarta Sans', sans-serif; color: #111111; overflow: hidden; }
        
        /* SFONDO DINAMICO GENERATO DAL COLOR PICKER */
        #app-bg {
            background: linear-gradient(135deg, #F0F4F8 0%, var(--hub-bg-color) 100%);
            transition: background 0.8s ease;
        }

        /* BYPASS LOGIN CSS: Caricamento istantaneo dell'hub se sei già loggato */
        html.direct-hub-load #left-panel { display: none !important; }
        html.direct-hub-load #login-view { display: none !important; }
        html.direct-hub-load #animated-panel { 
            width: 100% !important; 
            max-width: 100% !important; 
            transition: none !important; 
            background-color: transparent !important; 
        }

        /* Stili Originali e Input */
        .login-input { background-color: #f3f4f6; border: 2px solid transparent; border-radius: 9999px; padding: 1rem 1.5rem; width: 100%; font-weight: 600; color: #111827; transition: all 0.2s ease; }
        .login-input:focus { background-color: #ffffff; border-color: #3b82f6; outline: none; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }

        .page-enter { animation: fadeInPage 1.2s ease-out forwards; }
        @keyframes fadeInPage {
            0% { opacity: 0; filter: brightness(1.2); }
            100% { opacity: 1; filter: brightness(1); }
        }

        /* TRANSIZIONE DI ESPANSIONE E COLORE */
        .expand-transition {
            transition: width 0.9s cubic-bezier(0.65, 0, 0.05, 1), 
                        max-width 0.9s cubic-bezier(0.65, 0, 0.05, 1), 
                        background-color 0.8s ease-in-out !important;
        }

        #dynamic-welcome { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out; }
        .header-element { opacity: 0; transition: opacity 0.6s ease; }

        .app-card-item {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
            will-change: transform, opacity;
        }
        .app-card-visible { opacity: 1; transform: translateY(0); }
        .app-card-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

        /* CARD GESTIONE: wrapper esterno porta le ondine (no overflow-hidden), div interno clippa l'immagine */
        .admin-card-wrapper {
            border-radius: 32px;
            position: relative;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .admin-card-wrapper.app-card-visible { opacity: 1; transform: translateY(0); }
        .admin-card-wrapper:hover { transform: translateY(-8px); }
        .admin-card-wrapper:hover::before,
        .admin-card-wrapper:hover::after { animation-play-state: paused; opacity: 0; }
        .admin-card-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 32px;
            border: 2px solid rgba(220, 38, 38, 0.7);
            animation: ripple-red 2.4s ease-out infinite;
            pointer-events: none;
            z-index: 10;
        }
        .admin-card-wrapper::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 32px;
            border: 2px solid rgba(220, 38, 38, 0.45);
            animation: ripple-red 2.4s ease-out infinite 1.2s;
            pointer-events: none;
            z-index: 10;
        }
        @keyframes ripple-red {
            0%   { transform: scale(1);    opacity: 0.8; }
            100% { transform: scale(1.08); opacity: 0;   }
        }

        /* SUBTITLE — animazione propria indipendente */
        #hub-subtitle {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }
        #hub-subtitle.subtitle-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Stile Custom Color Picker */
        input[type="color"] {
            -webkit-appearance: none; border: none; padding: 0; border-radius: 8px; cursor: pointer; overflow: hidden;
        }
        input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }

        #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
        .toast { padding: 16px 24px; border-radius: 16px; color: white; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 12px; transition: opacity 0.3s; backdrop-filter: blur(10px); font-weight: 600;}
        .toast.info { background: rgba(59, 130, 246, 0.9); }
        .toast.error { background: rgba(239, 68, 68, 0.9); }