/* ========================================
   TABLE ACTIONS - Micro-interaction buttons
   ======================================== */

/* Contenitore pulsanti azioni */
.btn-group-table-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end; /* pulsanti a destra */
    align-items: center; /* centrati verticalmente */
    width: 180px; /* larghezza fissa colonna */
    min-width: 180px;
    max-width: 180px;
}

/* Stile base per i pulsanti delle tabelle */
.btn-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    color: #ffffff;
    margin: 5px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.15);
    position: relative;
    overflow: visible;
}

    .btn-table-action:hover {
        transform: scale(1.15);
        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
        color: #ffffff;
        text-decoration: none;
        z-index: 10;
    }

    .btn-table-action:active {
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.2);
    }

    .btn-table-action i {
        font-size: 0.875rem;
        z-index: 1;
        transition: transform 0.3s ease;
    }

    .btn-table-action:hover i {
        transform: scale(1.1) rotate(-5deg);
    }

/* Pulsante Details - Dinamico basato sul brand principale (Grecia/Azzurro) */
.btn-table-details {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

    .btn-table-details:hover {
        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
        filter: brightness(0.9);
        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
    }

/* Pulsante Edit - Arancione/Ambra standard */
.btn-table-edit {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

    .btn-table-edit:hover {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        box-shadow: 0 6px 16px rgba(251, 146, 60, 0.5);
    }

/* Pulsante Delete - Rosso standard */
.btn-table-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

    .btn-table-delete:hover {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
    }

/* Pulsante Success - Verde standard */
.btn-table-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

    .btn-table-success:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
    }

/* Varianti con icone e testo per tabelle più larghe */
.btn-table-action-text {
    width: auto;
    padding: 0.4rem 0.75rem;
    gap: 0.4rem;
}

    .btn-table-action-text .btn-text {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

/* Tooltip personalizzato per le azioni */
.btn-table-action[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.95); /* Tonalità scura coordinata Slate */
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
}

.btn-table-action[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(30, 41, 59, 0.95);
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Stile per tabelle con hover row */
.table-hover tbody tr:hover .btn-table-action {
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.18);
}