/* Custom Logo and Theme Styles */

/* Logo personalizzato per la sidebar */
.custom-logo-sidebar {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}

/* Logo personalizzato per le pagine di login */
.custom-logo-auth {
    width: auto;
    height: 64px;
    object-fit: contain;
    max-width: 200px;
}

/* Logo personalizzato generico */
.custom-logo {
    object-fit: contain;
}

/* Variabili CSS per i colori personalizzati */
:root {
    --primary-color: #3b82f6;
    --secondary-color: #6366f1;
    --accent-color: #10b981;
    --primary-hover: #2563eb;
    --secondary-hover: #4f46e5;
    --accent-hover: #059669;
}

/* Override dei colori quando sono personalizzati */
body.custom-theme {
    --primary-color: var(--custom-primary);
    --secondary-color: var(--custom-secondary);
    --accent-color: var(--custom-accent);
}

/* ✅ MODIFICATO: Applicare i colori primari SOLO su pagine ADMIN (non cliente) */
/* Le pagine cliente useranno var(--client-primary) invece */
/* Escludi: logout, navigazione calendario, bottom navigation */
body:not(.client-page) button:not(.bg-gray-500):not(.bg-red-500):not(.bg-orange-500):not(.secondary):not(.danger):not(.cancel),
body:not(.client-page) .primary-color-btn,
body:not(.client-page) .btn-primary,
body:not(.client-page) .action-btn {
    background-color: var(--primary-color) !important;
    color: white !important;
    transition: background-color 0.2s ease;
}

body:not(.client-page) button:not(.bg-gray-500):not(.bg-red-500):not(.bg-orange-500):not(.secondary):not(.danger):not(.cancel):hover,
body:not(.client-page) .primary-color-btn:hover,
body:not(.client-page) .btn-primary:hover,
body:not(.client-page) .action-btn:hover {
    filter: brightness(0.9);
}

/* ✅ AGGIUNTO: Regole per pagine CLIENTE */
/* Escludi bottoni di navigazione/controllo: .calendar-day, logout, frecce calendario, bottom-nav, icon-only, action-option */
body.client-page button:not(.bg-gray-500):not(.bg-red-500):not(.bg-orange-500):not(.secondary):not(.danger):not(.cancel):not(.calendar-day):not([onclick*="logout"]):not([onclick*="changeMonth"]):not([onclick*="navigateTo"]):not([onclick*="reopenCalendar"]):not(.icon-only):not(.action-option):not(.reason-card),
body.client-page .primary-color-btn,
body.client-page .btn-primary,
body.client-page .action-btn {
    background-color: var(--client-primary) !important;
    color: white !important;
    transition: background-color 0.2s ease;
}

body.client-page button:not(.bg-gray-500):not(.bg-red-500):not(.bg-orange-500):not(.secondary):not(.danger):not(.cancel):not(.calendar-day):not([onclick*="logout"]):not([onclick*="changeMonth"]):not([onclick*="navigateTo"]):not([onclick*="reopenCalendar"]):not(.icon-only):not(.action-option):not(.reason-card):hover,
body.client-page .primary-color-btn:hover,
body.client-page .btn-primary:hover,
body.client-page .action-btn:hover {
    filter: brightness(0.9);
}

/* Link e elementi evidenziati */
a, .link, .accent-link {
    color: var(--primary-color) !important;
}

/* Tab attivi - solo per pagine ADMIN */
body:not(.client-page) .tab-button.active, 
body:not(.client-page) .nav-link.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: rgba(59, 130, 246, 0.05) !important;
}

/* Tab attivi - per pagine CLIENTE (invertiti: bianco con testo colorato) */
body.client-page .tab-button.active {
    background-color: white !important;
    color: var(--client-primary) !important;
    border: none !important;
}

/* Tab inattivi - per pagine CLIENTE */
body.client-page .tab-button:not(.active) {
    background-color: transparent !important;
    color: #6b7280 !important;
}

/* Input focus */
input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color) !important;
    outline-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Classi utility per applicare i colori personalizzati */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-primary:hover { background-color: var(--primary-hover) !important; }
.text-primary { color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }

.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-secondary:hover { background-color: var(--secondary-hover) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }

.bg-accent { background-color: var(--accent-color) !important; }
.bg-accent:hover { background-color: var(--accent-hover) !important; }
.text-accent { color: var(--accent-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* Gradients personalizzati */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

.bg-gradient-primary-light {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1)) !important;
}

/* Loading animation per il logo */
.logo-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.logo-loaded {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-logo-auth {
        height: 48px;
        max-width: 150px;
    }
    
    .custom-logo-sidebar {
        width: 28px;
        height: 28px;
    }
}

/* Dark mode adjustments (for future implementation) */
@media (prefers-color-scheme: dark) {
    .custom-logo-sidebar,
    .custom-logo-auth {
        filter: brightness(0.9);
    }
}