/*General rule: base color background.
*
* Hover: Darker box-shadow.
*
* Focus: Darker box-shadow and lighter background
*
*/

/* 📺 XXL devices (very large screens, more than 1400px)
   Nessuna media query necessaria: è lo stile di default */
.filament-btn,
.ec-button.ec-today{
    background-color: var(--white); /* Use the same color as the edit button */
    color: var(--orange200);
    border: var(--orange200) 1px solid;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
}
.ec-button.ec-today{
    height:22px;
} 

.filament-btn i {
    margin-right: 8px;
}

.filament-btn:hover,
.ec-button.ec-today:hover {
    box-shadow: 0 0 0 3px var(--orange300alpha); 
}

.filament-btn:focus,
.ec-button.ec-today:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--orange300alpha);; 
    background-color: var(--orange100);
    color: var(--white);
}

.filament-btn:disabled {
    color: var(--orange200);  /*keep the same colour*/
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 1.1rem;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}
 
.btn-edit {
    color: #f59e0b;
}
 
.btn-filter{
    color:#6b7280
}
 
.btn-view {
    color: #3b82f6;
}
 
.btn-delete {
    color: #ff4d4d;
}
.btn-expense-report {
    color: rgb(52, 110, 141);
}
.btn-technical-report {
    color: rgb(22, 6, 244);
}

.btn-success{
    color: var(--green100);
    border: 1px solid var(--green100);
}
.btn-success:hover{
    box-shadow: 0 0 0 3px var(--green200alpha); 
    color: var(--green100);
    background-color: var(--white);
}
.btn-success:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--green200alpha);
    background-color: var(--green300);
    color: var(--white);
}

.btn-danger {
    color: var(--red100);
    border: 1px solid var(--red100);
}
.btn-danger:hover{
    box-shadow: 0 0 0 3px var(--red200alpha); 
    color: var(--red100);
    background-color: var(--white);
}
.btn-danger:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--red200alpha);  
    background-color: var(--red300);
    color: var(--white);
}




/* 🖥️ XL devices (1200px - 1399px) */
@media (max-width: 1399.98px) {
    /* ... */
}

/* 🖥️ Large devices (992px - 1199px) */
@media (max-width: 1199.98px) {
    /* ... */
}

/* 💻 Medium devices (768px - 991px) */
@media (max-width: 991.98px) {
    
}

/* 📱 Small devices (576px - 767px) */
@media (max-width: 767.98px) {
    
}

/* 🌐 Extra small devices (less than 576px) */
@media (max-width: 575.98px) {

    
}