/* action-buttons.css - Stili per tutti i pulsanti di azione */

/* ======================================
   PARTE 1: PULSANTI DI AZIONE ORIGINALI 
   ====================================== */

.action-buttons-container {
    position: relative;
    display: inline-block;
    min-height: 40px; /* Minima altezza per assicurare visibilità */
    min-width: 90px;  /* Minima larghezza per assicurare spazio sufficiente */
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 10; /* Assicuriamoci che siano sopra altri elementi */
}

.btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-icon:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-icon.btn-light {
    background-color: #F5F1E8;
    color: #6B5741;
}

.btn-icon.btn-warning {
    background-color: var(--warning, #F0C15A);
    color: #3A2E24;
}

.btn-icon.btn-danger {
    background-color: var(--danger, #CF6679);
    color: white;
}

.edit-mode-buttons, 
.view-mode-buttons {
    display: flex;
    transition: all 0.3s ease;
    position: relative;
}

.edit-mode-buttons {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20; /* Assicuriamoci che sia sopra view-mode-buttons */
}

/* Animazione per l'entrata/uscita dei pulsanti */
.edit-mode-buttons.d-none {
    display: flex !important;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}

.edit-mode-buttons:not(.d-none) {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.view-mode-buttons.d-none {
    display: flex !important;
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

/* Assicuriamo che i modal siano visibili e con z-index corretto */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

/* Stili responsive */
@media (max-width: 576px) {
    .btn-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .action-buttons-container {
        min-width: 82px;
    }
}

/* ========================================
   PARTE 2: NUOVI PULSANTI CIRCOLARI 
   ======================================== */

/* Pulsante circolare piccolo (per pulsanti Dettagli) */
.btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    padding: 0;
    line-height: 1;
    text-decoration: none;
    margin: 0 auto;
    transition: all var(--transition-speed, 0.3s);
}

.btn-circle:hover, .btn-circle:focus {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-circle i {
    font-size: 14px;
}

/* Colori personalizzati per i pulsanti circolari */
.btn-circle.btn-info {
    background-color: var(--info, #7A9E9F);
    border-color: var(--info, #7A9E9F);
    color: var(--text-light, #FFF8EB);
}

.btn-circle.btn-info:hover, .btn-circle.btn-info:focus {
    background-color: var(--info, #7A9E9F);
    border-color: var(--info, #7A9E9F);
    opacity: 0.9;
}

/* Pulsante circolare grande (per pulsanti Nuovo) */
.btn-floating {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    position: relative;
    transition: all var(--transition-speed, 0.3s);
}

.btn-floating:hover, .btn-floating:focus {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-floating span {
    position: relative;
    top: -1px;
}

/* Colori personalizzati per i pulsanti floating */
.btn-floating.btn-primary {
    background-color: var(--primary-medium, #D17F47);
    border-color: var(--primary-medium, #D17F47);
    color: var(--text-light, #FFF8EB);
}

.btn-floating.btn-primary:hover, .btn-floating.btn-primary:focus {
    background-color: var(--primary-dark, #B15D25);
    border-color: var(--primary-dark, #B15D25);
}

/* Nasconde visivamente il testo ma lo mantiene accessibile per screen reader */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}