/* Custom CSS per Cropper PowsUp! - Palette Grigio/Nero */

/* Font Lexend */
.font-lexend {
    font-family: 'Lexend', sans-serif;
}

/* Configurazione Tailwind per il font personalizzato */
body {
    font-family: 'Lexend', sans-serif;
    background-color: #F6F6F6 !important;
}

/* Override del gradient background */
.bg-gradient-to-br {
    background: #F6F6F6 !important;
}

/* Stili per Cropper.js con palette grigio/nero */
.cropper-container {
    max-height: 500px !important;
    max-width: 100% !important;
}

/* Contenimento delle immagini grandi */
#crop-container {
    max-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#crop-image {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.cropper-view-box {
    outline: 2px solid #374151 !important;
    outline-color: rgba(55, 65, 81, 0.8) !important;
}

.cropper-face {
    background-color: rgba(55, 65, 81, 0.1) !important;
}

/* Stili per il crop circolare */
.cropper-view-box.rounded {
    border-radius: 50%;
}

.cropper-face.rounded {
    border-radius: 50%;
}

/* Override colori Tailwind per palette grigio/nero */
.text-blue-600,
.text-blue-500 {
    color: #374151 !important; /* gray-700 */
}

.bg-blue-500,
.bg-blue-600 {
    background-color: #374151 !important; /* gray-700 */
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: #1F2937 !important; /* gray-800 */
}

.bg-green-500 {
    background-color: #4B5563 !important; /* gray-600 */
}

.hover\:bg-green-600:hover {
    background-color: #374151 !important; /* gray-700 */
}

.bg-gray-200 {
    background-color: #E5E7EB !important; /* Mantenuto grigio chiaro */
}

.hover\:bg-gray-300:hover {
    background-color: #D1D5DB !important; /* Mantenuto grigio chiaro */
}

.border-blue-400,
.hover\:border-blue-400:hover {
    border-color: #6B7280 !important; /* gray-500 */
}

/* Cards e contenitori */
.bg-white {
    background-color: #FFFFFF !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Testi */
.text-gray-800 {
    color: #1F2937 !important; /* gray-800 - più scuro */
}

.text-gray-600 {
    color: #4B5563 !important; /* gray-600 */
}

.text-gray-700 {
    color: #374151 !important; /* gray-700 */
}

.text-gray-500 {
    color: #6B7280 !important; /* gray-500 */
}

.text-gray-400 {
    color: #9CA3AF !important; /* gray-400 */
}

.text-gray-300 {
    color: #D1D5DB !important; /* gray-300 */
}

/* Stili aggiuntivi per palette grigio/nero */

/* Animazioni personalizzate */
.upload-hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Sfondo placeholder migliorato */
.bg-gray-50 {
    background-color: #FAFAFA !important;
}

/* Border migliorati */
.border-gray-200 {
    border-color: #E5E7EB !important;
}

.border-gray-300 {
    border-color: #D1D5DB !important;
}

/* Hover states migliorati */
.hover\:text-gray-700:hover {
    color: #374151 !important;
}

/* Focus states */
.focus\:border-gray-500:focus {
    border-color: #6B7280 !important;
}

/* Stati attivi dei pulsanti */
.btn-active {
    background-color: #374151 !important;
    color: white !important;
}

.btn-inactive {
    background-color: #E5E7EB !important;
    color: #6B7280 !important;
}

/* Control active state */
.control-active {
    background-color: #374151 !important;
    color: white !important;
    transform: scale(1.05);
}

/* Modal background */
.bg-black {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Stili per il drag and drop */
.drag-over {
    border-color: #374151 !important;
    background-color: rgba(55, 65, 81, 0.05) !important;
}

/* Upload area migliorata */
#upload-area:hover {
    background-color: rgba(55, 65, 81, 0.02) !important;
    border-color: #6B7280 !important;
}

/* Icone con colori coordinati */
.fas {
    color: inherit;
}

/* Shadows personalizzate */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Preview canvas migliorato */
#preview-canvas {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #E5E7EB !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cropper-container {
        max-height: calc(100vh - 250px) !important;
        min-height: 350px !important;
    }
    
    #crop-container {
        max-height: calc(100vh - 250px);
    }
    
    #crop-image {
        max-height: calc(100vh - 250px);
        min-height: auto;
    }
    
    /* Placeholder editor con altezza ridotta su mobile */
    #editor-placeholder {
        height: 250px !important;
        min-height: 250px !important;
    }
    
    /* Riduce spazio tra titolo Editor e placeholder su mobile */
    .lg\\:col-span-2 .bg-white h2 {
        margin-bottom: 0.5rem !important; /* mb-2 invece di mb-4 */
    }
    
    .alert {
        left: 50%;
        right: auto;
        min-width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        margin: 0 16px;
        font-size: 13px;
        padding: 14px 16px;
    }
}

/* Regole per schermi molto piccoli (telefoni in modalità landscape) */
@media (max-width: 480px) and (max-height: 500px) {
    .cropper-container {
        max-height: calc(100vh - 180px) !important;
        min-height: 200px !important;
    }
    
    #crop-container {
        max-height: calc(100vh - 180px);
        min-height: 200px;
    }
    
    #crop-image {
        max-height: calc(100vh - 180px);
    }
    
    /* Placeholder ancora più compatto per schermi piccolissimi */
    #editor-placeholder {
        height: 180px !important;
        min-height: 180px !important;
    }
    
    /* Riduce ancora di più lo spazio del titolo su schermi piccolissimi */
    .lg\\:col-span-2 .bg-white h2 {
        margin-bottom: 0.25rem !important; /* mb-1 invece di mb-4 */
    }
}

/* Loading spinner con palette grigio */
.loading-spinner {
    border: 3px solid #E5E7EB;
    border-radius: 50%;
    border-top: 3px solid #374151;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Button states aggiornati */
.btn-active {
    background-color: #374151 !important;
    color: white !important;
}

.btn-inactive {
    background-color: #E5E7EB !important;
    color: #6B7280 !important;
}

/* Preview canvas styles */
#preview-canvas {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Smooth transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Custom scrollbar migliorata */
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #9CA3AF;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* Stili per il file input personalizzato - già gestito negli override */
/* Rimosso per evitare duplicazioni */

/* Tutti gli stili per controlli attivi sono ora gestiti negli override globali */

/* Stili per messaggi di errore/successo posizionati in fondo - Palette Grigio */
.alert {
    padding: 16px 20px;
    border-radius: 12px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    pointer-events: none; /* Evita interferenze con click */
}

/* Assicura che l'alert sia sempre visibile sopra altri elementi */
.alert {
    z-index: 9999 !important;
}

.alert-error {
    background-color: rgba(31, 41, 55, 0.95);
    color: #F87171;
    border: 1px solid #4B5563;
}

.alert-success {
    background-color: rgba(31, 41, 55, 0.95);
    color: #34D399;
    border: 1px solid #4B5563;
}

.alert-info {
    background-color: rgba(31, 41, 55, 0.95);
    color: #E5E7EB;
    border: 1px solid #4B5563;
}