/* project/static/css/buttons.css - Stili Consolidati per Tutti i Bottoni */

/* --- Stili per i bottoni "standard" con sfondo (es. "Salva", "Torna allo Storico") --- */
/* Queste classi (.button, .primary, .secondary, etc.) dovrebbero essere applicate a tutti i tuoi bottoni nel progetto */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 15px 30px;
    margin: 10px;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;

    /* Colori di default (se non specificati da classi come .primary, .secondary, etc.) */
    background-color: var(--button-color); /* MODIFICA: Usa variabile */
    color: white; /* Mantenuto bianco per contrasto */
    border: 1px solid var(--button-color); /* MODIFICA: Usa variabile */
}

.button:hover {
    background-color: var(--button-hover-color); /* MODIFICA: Aggiunto hover con variabile */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Variazioni di colore per i pulsanti .button */
.button.primary {
    background-color: #dc3545; /* Rosso per primary, come era nel tuo styles.css */
    border-color: #dc3545;
}
.button.primary:hover {
    background-color: #c82333;
    border-color: #c82333;
}

.button.secondary {
    background-color: #007bff; /* Blu per secondary, come era nel tuo styles.css */
    border-color: #007bff;
}
.button.secondary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.button.tertiary {
    background-color: #f0ad4e; /* Arancione */
    border-color: #f0ad4e;
}
.button.tertiary:hover {
    background-color: #ec971f;
    border-color: #ec971f;
}

.button.success {
    background-color: #28a745; /* Verde */
    border-color: #28a745;
    color: white;
}
.button.success:hover {
    background-color: #218838;
    border-color: #218838;
}

.button.danger {
    background-color: #dc3545; /* Rosso per danger (duplicato da .primary ma più esplicito) */
    border-color: #dc3545;
}
.button.danger:hover {
    background-color: #c82333;
    border-color: #c82333;
}


/* Stili per i bottoni piccoli (da applicare con .button.small) */
.button.small {
    padding: 5px 10px; /* Padding leggermente aumentato per i bottoni piccoli per un aspetto migliore */
    font-size: 0.875em; /* Dimensione del font leggermente aumentata */
    margin: 0 2px; /* Aggiunto un piccolo margine per separare i bottoni piccoli */
    flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
}


/* CLASSE PER BOTTONE DETTAGLI (colore viola, con ) */
.button.detail {
    background-color: #d35ffa;
    border-color: #d35ffa;
    color: white;
    transition: all 0.3s ease;
}
.button.detail:hover {
    background-color: #bb2ee0;
    border-color: #bb2ee0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =========================================
   FIX DEFINITIVO PER CONFLITTO FONT AWESOME
   ========================================= */
/*
  Questa regola forza QUALSIASI icona Font Awesome ad usare
  il suo font corretto, ignorando ogni altra regola ereditata.
*/
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    font-family: 'Font Awesome 6 Free';
}

/* ==========================================
   TOOLTIP UNIVERSALE (Attributo data-tooltip)
   ==========================================
   Applicabile a qualsiasi elemento (bottone o badge) che deve mostrare
   un fumetto nero centrato al passaggio del mouse.
   Stile: Nero solido, font monospace, posizionato SOTTO o SOPRA.
*/

/* 1. Gestione Z-Index per evitare sovrapposizioni */
.action-icon-btn:hover,
.button:hover,
[data-tooltip]:hover {
    z-index: 10000; /* Porta l'elemento in primo piano rispetto ai fratelli */
    position: relative; /* Necessario per lo z-index */
}

/* 2. Il Fumetto (Rettangolo Nero) */
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    
    /* Posizionamento DEFAULT: SOTTO */
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* Stile Visivo */
    background-color: #1f2937; /* Grigio scuro/Nero */
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: normal;
    font-family: 'Google Sans Mono', monospace;
    white-space: nowrap;
    line-height: 1.2;
    
    /* Comportamento */
    z-index: 10001; /* Sopra al bottone stesso */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    pointer-events: none; /* Non cliccabile */
    opacity: 0;
    animation: tooltip-fade 0.2s forwards;
}

/* 3. La Freccina (Triangolo) che punta verso l'alto */
[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    /* Triangolo nero che punta verso l'ALTO (colore in basso) */
    border-color: transparent transparent #1f2937 transparent;
    z-index: 10001;
    opacity: 0;
    animation: tooltip-fade 0.2s forwards;
}

/* VARIANTE: Tooltip SOPRA (Aggiungere classe .tooltip-up all'elemento) */
[data-tooltip].tooltip-up:hover::after {
    top: auto;
    bottom: 100%;
    transform: translateX(-50%) translateY(-10px);
}
[data-tooltip].tooltip-up:hover::before {
    top: auto;
    bottom: 100%;
    /* Triangolo nero che punta verso il BASSO (colore in alto) */
    border-color: #1f2937 transparent transparent transparent;
}

@keyframes tooltip-fade {
    to { opacity: 1; }
}