/**
 * edit.css — style pól edytowalnych na żywo (współpracuje z edit.js)
 *
 * Stany:
 *   .edit-saving   — wysyłka w toku (bursztynowa ramka)
 *   .edit-success  — zapisano (zielone mignięcie ~600ms, potem wraca)
 *   .edit-error    — błąd zapisu (czerwona ramka, tooltip w title)
 */

[data-edit] {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

/* Delikatna sugestia że pole jest edytowalne — cieniutka przerywana ramka przy hover */
[data-edit]:not(:focus):not(.edit-saving):not(.edit-success):not(.edit-error):hover {
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}

/* Wysyłka w toku — bursztynowa ramka */
[data-edit].edit-saving {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15) !important;
}

/* Sukces — zielone mignięcie (fade out przez 600ms) */
[data-edit].edit-success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
    animation: edit-success-fade 600ms ease-out;
}

@keyframes edit-success-fade {
    0%   { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.45); }
    100% { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); }
}

/* Błąd — czerwona ramka + delikatne tło */
[data-edit].edit-error {
    border-color: #f43f5e !important;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.25) !important;
    background-color: rgba(244, 63, 94, 0.05);
}

/* Pola typu color — kropka jest mała, dorzucamy większą ramkę żeby stany były widoczne */
input[type="color"][data-edit] {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 4px;
}