/*Purple table button*/
.purple-table-button {
    border-radius: 0.35rem;
    border: none;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #f9fafb;
    font-size: 0.9rem;
    padding: 0.25rem 1.2rem;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
}

    .purple-table-button:hover {
        background: linear-gradient(135deg, #2563eb, #4338ca);
    }

.purple-table-button i {
    font-size: 0.9rem;
}

/*Red table button*/
.red-table-button {
    border-radius: 0.35rem;
    font-size: 0.9rem;
    padding: 0.25rem 1.2rem;
    background: linear-gradient(135deg, #dc2626, #f97316);
    border: none;
    box-shadow: 0 3px 8px rgba(127, 29, 29, 0.45);
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
}

    .red-table-button:hover {
        background: linear-gradient(135deg, #b91c1c, #ea580c);
    }

.red-table-button i {
    font-size: 0.9rem;
}

/*Green table button*/
.green-table-button {
    border-radius: 0.35rem;
    font-size: 0.9rem;
    padding: 0.25rem 1.2rem;
    background: linear-gradient(135deg, #059669, /* green */
    #0f766e, /* teal */
    #0ea5e9 /* blue accent */
    );
    color: #f9fafb;
    border: none;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.45);
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
}

    .green-table-button:hover {
        background: linear-gradient(135deg, #10b981, #0f766e, #0284c7 );
        box-shadow: 0 10px 24px rgba(15, 118, 110, 0.6);
        color: #f9fafb;
    }
.green-table-button i {
    font-size: 0.9rem;
}

/*White table button*/
.white-table-button {
    border-radius: 0.35rem;
    font-size: 0.9rem;
    padding: 0.25rem 1.2rem;
    border: 1px solid #a7f3d0; /* mint border */
    background: #f9fafb;
    color: #047857; /* green */
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

    .white-table-button:hover {
        background: linear-gradient(135deg, #10b981, #0f766e);
        border-color: #0f766e;
        color: #ecfdf5;
        box-shadow: 0 3px 10px rgba(5, 150, 105, 0.55);
    }
    .white-table-button i {
        font-size: 0.9rem;
    }