body {
    font-family: 'Roboto Flex', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .font-noto-display {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
}

/* .text-shadow {
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}  */


/*  Sidebar */

#sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
}

/* Aggiungi margine al contenuto principale per compensare */
#main-content {
    margin-left: 16rem !important; /* w-64 */
}

/* Nasconde la scrollbar ma mantiene la funzionalità di scroll */
.scrollbar-hide {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Safari e Chrome */
}

/* Document Panel Scrollbar */
#document-panel {
    overflow-y: auto;
}

#document-panel::-webkit-scrollbar {
    width: 6px;
}

#document-panel::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 4px;
}

#document-panel::-webkit-scrollbar-thumb {
    background-color: #d1d5db; /* Tailwind gray-300 */
    border-radius: 3px;
}

#document-panel::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af; /* Tailwind gray-400 */
}

/* Firefox */
#document-panel {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/*  Resize Handle */

#resize-handle {
    /* Potresti voler aggiungere un'altezza minima o farla ereditare dal genitore */
    min-height: 100px; /* Esempio, o imposta height: 100%; se il genitore ha un'altezza definita */
    /* Centra i "puntini" se li usi */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Markdown Toolbar Styles */
.markdown-floating-toolbar {
    position: fixed;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10001;
    white-space: nowrap;
    /* Will be positioned dynamically at mouse coordinates */
    top: 0;
    left: 0;
}

.markdown-floating-toolbar.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Floating toolbar arrow pointing to selected text */
.floating-toolbar-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
}

.floating-toolbar-arrow::before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(0, 0, 0, 0.1);
}

/* Floating toolbar button styles */
.floating-format-btn {
    @apply w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-all duration-150 text-sm;
    border: none;
    cursor: pointer;
}

.floating-format-btn:hover {
    @apply shadow-sm scale-105;
}

.floating-format-btn:active {
    @apply scale-95;
}

/* Background animation */

@keyframes animateBlob {
    0%,
    100% {
        transform: translate(-10vw, 10vh) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        opacity: 0.2;
    }

    25% {
        transform: translate(-65vw, 55vh) scale(1.4);
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        opacity: 0.35;
    }

    50% {
        transform: translate(-25vw, 75vh) scale(0.7);
        border-radius: 30% 70% 40% 60% / 50% 60% 30% 40%;
        opacity: 0.2;
    }

    75% {
        transform: translate(-75vw, 15vh) scale(1.25);
        border-radius: 50% 50% 60% 40% / 40% 70% 30% 60%;
        opacity: 0.35;
    }
}

.animated-blob {
    animation: animateBlob 30s infinite ease-in-out;
}

.blob-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Loading Overlay Styles */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Sfondo scuro semitrasparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Sopra tutto */
    color: white; /* Colore di default per il testo interno, se necessario */
    /* opacity, visibility e transition gestiti tramite classi Tailwind nel JS */
}

.loading-spinner-container {
    text-align: center;
}

.pulsing-gradient-loader {
    width: 70px;  /* Leggermente più piccolo per un look più pulito */
    height: 70px;
    background: linear-gradient(45deg, #b19ad3, #fbafb0, #97d3cd);
    background-size: 250% 250%; /* Aumentato per un movimento del gradiente più ampio */
    animation: 
        gradientShift 3.5s ease infinite,  /* Leggermente più lento */
        pulseEffect 1.8s infinite ease-in-out, /* Sincronizzato diversamente */
        blobShape 10s infinite ease-in-out; /* Animazione forma più lenta e fluida */
    margin: 0 auto 20px auto; /* Centra e aggiunge più spazio sotto per il testo */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Ombra leggera per profondità */
}

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

@keyframes pulseEffect {
    0% {
        transform: scale(0.92); /* Inizia un po' più piccolo */
        filter: brightness(95%);
    }
    50% {
        transform: scale(1.02); /* Si espande un po' di più */
        filter: brightness(110%); /* Leggermente più luminoso al picco */
    }
    100% {
        transform: scale(0.92);
        filter: brightness(95%);
    }
}

@keyframes blobShape {
    0%, 100% {
        border-radius: 42% 58% 68% 32% / 46% 50% 50% 54%;
    }
    15% { /* Aggiunti più keyframes per fluidità */
        border-radius: 30% 70% 50% 50% / 35% 30% 70% 65%;
    }
    35% {
        border-radius: 55% 45% 33% 67% / 58% 65% 35% 42%;
    }
    50% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    65% {
        border-radius: 40% 60% 70% 30% / 30% 70% 30% 70%;
    }
    85% {
        border-radius: 70% 30% 45% 55% / 65% 35% 65% 35%;
    }
}

.loading-overlay-text {
    font-size: 1.1rem; /* Leggermente più grande */
    color: #e0e0e0; /* Grigio chiaro per buona leggibilità */
    font-weight: 300; /* Più leggero */
    letter-spacing: 0.5px;
}

/* Classe per bloccare lo scroll */
.no-scroll {
    overflow: hidden !important;
}

/* Learning Path Wizard - Sprout Card Styles */

/* Neutral Plus Card */
.neutral-plus-card {
    transition: all 0.2s ease;
}

.neutral-plus-card:hover {
    /* No scale transform */
}

/* Selected Sprout Card Hover Effects */
.sprout-card .remove-btn {
    transition: all 0.2s ease;
}

.sprout-card:hover .remove-btn {
    transform: scale(1.05);
}

/* Interval Card Styles */
.interval-card {
    user-select: none;
}

/* Interval indicator button (same as add-card-button) */
#selected-sprouts .add-card-button {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    background: #e5e7eb !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

#selected-sprouts .add-card-button:hover {
    background: #d1d5db !important;
    box-shadow: none !important;
}

/* Learning Path Stack Effect - Rotated Cards */
.path-card-stack {
    position: relative;
    padding-bottom: 16px; /* Space for rotated cards */
}

.path-card-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 192px; /* Fixed width matching sprout cards */
    height: 360px; /* Fixed height matching sprout cards */
    pointer-events: none;
    transition: all 0.3s ease;
}

.path-card-shadow-2 {
    transform: translateY(6px) rotate(-3deg);
    transform-origin: center center;
    opacity: 0.7;
    z-index: 1;
}

.path-card-shadow-3 {
    transform: translateY(6px) rotate(3deg);
    transform-origin: center center;
    opacity: 0.7;
    z-index: 2;
}

.path-card-main {
    position: relative;
    z-index: 3;
}

/* Hover effect - lift the main card and increase rotation */
.path-card-stack:hover .path-card-main {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.path-card-stack:hover .path-card-shadow-2 {
    transform: translateY(8px) rotate(-4deg);
    opacity: 0.8;
}

.path-card-stack:hover .path-card-shadow-3 {
    transform: translateY(8px) rotate(4deg);
    opacity: 0.8;
}

/* ==========================================================================
   Slider-2 (Dot-Nav) - Netflix-Style Slider
   ========================================================================== */

/* Wrapper container - position relative for absolute children */
.netflix-slider-wrapper {
    position: relative;
    overflow: visible;
}

/* Slider navigation buttons - overlapping cards, always visible */
.netflix-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30; /* sopra hover overlay delle card (z-20) */
    width: 32px;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    cursor: pointer;
    background: rgba(151, 211, 205, 0.8); /* verde con alpha */
    border-radius: 8px;
    transition: background 0.2s ease;
}

.netflix-slider-btn i {
    font-size: 16px;
}

.netflix-slider-btn:hover {
    background: #97d3cd; /* verde primario HatchiArena - opacità piena */
}

.netflix-slider-btn:disabled {
    display: none !important;
}

.netflix-slider-btn-prev {
    left: 8px;
}

.netflix-slider-btn-next {
    right: 8px;
}

/* Navigation dots - generic class for Slider-2 */
.slider-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    background-color: #9ca3af; /* gray-400 */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.slider-dot:hover {
    background-color: #6b7280; /* gray-500 */
}

.slider-dot.active {
    background-color: #97d3cd; /* verde HatchiArena */
    transform: scale(1.3);
}

/* Animazione blob cover image */