/*
 * Nadaje kazdemu wypelnionemu, kolorowemu przyciskowi Filamenta (.fi-btn)
 * delikatny gradient + cien + uniesienie przy najechaniu - dokladnie taki
 * styl jak przycisk "Nowy klient" w zatwierdzonej makiecie dashboardu.
 *
 * Nie nadpisuje samego koloru (--bg) - kazdy przycisk zostaje w swoim
 * przypisanym kolorze (primary/success/danger/warning/gray), tylko
 * dostaje ten sam "wyglad" glebi. color-mix() dziala na dowolnym --bg,
 * wiec dziala jednakowo dla kazdego koloru bez wpisywania go na sztywno.
 *
 * Rejestrowane przez FilamentAsset::register() w AdminPanelProvider -
 * zwykly plik CSS, zero builda Vite/Tailwind.
 */
.fi-btn.fi-color:not(.fi-outlined) {
    background-image: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 55%, white));
    border-radius: 11px;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bg) 70%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    color: #fff !important;
}

.fi-btn.fi-color:not(.fi-outlined) > .fi-icon {
    color: #fff !important;
}

.fi-btn.fi-color:not(.fi-outlined):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--bg) 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .fi-btn.fi-color:not(.fi-outlined) {
        transition: none;
    }

    .fi-btn.fi-color:not(.fi-outlined):hover {
        transform: none;
    }
}