/* COLORI GLOBALI DINAMICI - amber */
:root {
    --theme-primary: #f59e0b;
    --theme-secondary: #d97706;
    --theme-dark: #b45309;
    --theme-light: #fbbf24;
}

/* SFONDO UNICO PER TUTTO IL SITO */
body, html {
    background-image: url('/images/sfondo.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Root React deve essere trasparente per mostrare lo sfondo del body */
#root, #admin-root, #menu-root {
    background: transparent !important;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* NON forzare transparent sui div figli - lascia che lo stile inline dei componenti React funzioni */
/* I componenti React hanno lo sfondo applicato inline, non serve sovrascriverlo */

/* SOLO COLORI TEMA PRINCIPALE DIVENTANO DINAMICI */
.text-sky-500, .text-sky-400, .text-sky-600 { color: var(--theme-primary) !important; }
.bg-sky-500, .bg-sky-600, .bg-sky-700 { background-color: var(--theme-secondary) !important; }
.border-sky-500, .border-sky-600, .border-sky-700 { border-color: var(--theme-secondary) !important; }
.hover\:bg-sky-600:hover, .hover\:bg-sky-700:hover { background-color: var(--theme-dark) !important; }
.focus\:ring-sky-500:focus, .focus\:ring-sky-600:focus { --tw-ring-color: var(--theme-secondary) !important; }
.focus\:border-sky-500:focus, .focus\:border-sky-600:focus { border-color: var(--theme-secondary) !important; }

/* MANTIENI COLORI SPECIFICI PER AZIONI */
/* Verde per Salva - NON CAMBIARE */
.bg-green-600, .bg-green-700 { background-color: #16a34a !important; }
.hover\:bg-green-700:hover { background-color: #15803d !important; }

/* Rosso per Elimina/Annulla - NON CAMBIARE */
.bg-red-600, .bg-red-700 { background-color: #dc2626 !important; }
.hover\:bg-red-700:hover { background-color: #b91c1c !important; }

/* Blu per Modifica - NON CAMBIARE */
.bg-blue-600, .bg-blue-700 { background-color: #2563eb !important; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }

/* SPINNER E LOADING */
.border-b-2.border-sky-500 { border-color: var(--theme-primary) !important; }
.animate-spin { border-color: transparent transparent var(--theme-primary) transparent !important; }

/* FORM ELEMENTS GLOBALI */
input:focus, select:focus, textarea:focus {
    border-color: var(--theme-secondary) !important;
    box-shadow: 0 0 0 2px rgba(#d97706, 0.2) !important;
}

/* BUTTONS GLOBALI */
button[type='submit'], .btn-submit {
    background-color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
}

button[type='submit']:hover, .btn-submit:hover {
    background-color: var(--theme-dark) !important;
}

/* ADMIN.HTML */
.btn-primary, .bg-primary { background-color: var(--theme-secondary) !important; }
.btn-primary:hover { background-color: var(--theme-dark) !important; }
.text-primary { color: var(--theme-primary) !important; }
.border-primary { border-color: var(--theme-secondary) !important; }

/* MENU.HTML */
.menu-header { background-color: var(--theme-secondary) !important; color: white !important; }
.menu-category { color: var(--theme-primary) !important; }
.menu-price { color: var(--theme-secondary) !important; }
.menu-item:hover { background-color: rgba(#fbbf24, 0.1) !important; }

/* SERVIZI.HTML - SOLO BOTTONI TEMA */
.bg-sky-600 { background-color: var(--theme-secondary) !important; }
.hover\:bg-sky-700:hover { background-color: var(--theme-dark) !important; }

/* MODIFICA PRENOTAZIONE */
.reservation-header { background-color: var(--theme-secondary) !important; }
.btn-edit { background-color: var(--theme-primary) !important; }
.btn-edit:hover { background-color: var(--theme-dark) !important; }

/* LINKS GLOBALI */
a { color: var(--theme-primary) !important; }
a:hover { color: var(--theme-secondary) !important; }

/* ALERTS E NOTIFICHE */
.alert-success { background-color: rgba(#fbbf24, 0.1) !important; border-color: var(--theme-secondary) !important; }
.alert-info { background-color: rgba(#f59e0b, 0.1) !important; border-color: var(--theme-primary) !important; }