/* Feedback. Cztery warianty semantyczne wszędzie w tej samej kolejności:
   sukces, ostrzeżenie, błąd, informacja. */

.dat-alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--card-padding);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
}

.dat-alert__icon { flex: none; }
.dat-alert__body { display: flex; flex-direction: column; gap: var(--space-1); }
.dat-alert__title { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-alert__text { font-size: var(--text-overline-size); line-height: var(--text-small-lh); color: var(--color-text-secondary); }
.dat-alert__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

.dat-alert--success { background: var(--color-success-soft); border-color: var(--color-success); }
.dat-alert--success .dat-alert__icon { color: var(--color-success); }
.dat-alert--warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.dat-alert--warning .dat-alert__icon { color: var(--color-warning); }
.dat-alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger); }
.dat-alert--danger .dat-alert__icon { color: var(--color-danger); }
.dat-alert--info { background: var(--color-info-soft); border-color: var(--color-info); }
.dat-alert--info .dat-alert__icon { color: var(--color-info); }

.dat-alert--banner { border-radius: 0; border-left: 0; border-right: 0; }

.dat-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--badge-height);
    padding: 0 var(--space-2);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-overline-size);
    line-height: var(--text-overline-lh);
    font-weight: var(--text-overline-weight);
    white-space: nowrap;
}

.dat-badge__dot { width: var(--badge-dot); height: var(--badge-dot); border-radius: var(--radius-full); background: currentColor; }

.dat-badge--soft-success { background: var(--color-success-soft); color: var(--color-success); }
.dat-badge--soft-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.dat-badge--soft-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.dat-badge--soft-info { background: var(--color-info-soft); color: var(--color-info); }
.dat-badge--soft-neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.dat-badge--outline { border-color: var(--color-border-strong); color: var(--color-text-secondary); }

.dat-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-4); text-align: center; }
.dat-empty__icon { color: var(--color-text-muted); }
.dat-empty__title { font-size: var(--text-subtitle-size); font-weight: var(--text-title-weight); }
.dat-empty__text { font-size: var(--text-small-size); color: var(--color-text-secondary); }

.dat-spinner { animation: dat-spin var(--duration-spinner) linear infinite; }

.dat-progress { height: var(--progress-height); border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; }
.dat-progress__fill { height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }

/* Bez animowanego gradientu — przy pięciu wierszach migotanie męczy bardziej,
   niż uspokaja świadomość, że coś się ładuje. */
.dat-skeleton { background: var(--color-surface-sunken); border-radius: var(--radius-sm); }

/* Toast: stos w prawym dolnym rogu. Komunikat o tym, co wlasnie sie stalo albo
   nie stalo, nie zabiera miejsca stronie i nie wymaga wlasnego widoku - dlatego
   akcja, ktora sie nie powiodla, wraca tam, skad przyszla, a powod jedzie
   w adresie. Pasek po lewej niesie znaczenie, ikona je powtarza. */
.dat-toasts {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
    pointer-events: none;
}

.dat-toast {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--toast-max-width);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-left: var(--toast-accent-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}

.dat-toast__icon { flex: none; margin-top: 1px; color: var(--color-text-secondary); }
.dat-toast__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dat-toast__title { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-toast__text { font-size: var(--text-overline-size); line-height: var(--text-small-lh); color: var(--color-text-secondary); }
.dat-toast__action { align-self: flex-start; margin-top: var(--space-1); }

.dat-toast__close {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.dat-toast__close:hover { color: var(--color-text); }

.dat-toast--success { border-left-color: var(--color-success); }
.dat-toast--success .dat-toast__icon { color: var(--color-success); }
.dat-toast--warning { border-left-color: var(--color-warning); }
.dat-toast--warning .dat-toast__icon { color: var(--color-warning); }
.dat-toast--danger { border-left-color: var(--color-danger); }
.dat-toast--danger .dat-toast__icon { color: var(--color-danger); }
.dat-toast--info { border-left-color: var(--color-info); }
.dat-toast--info .dat-toast__icon { color: var(--color-info); }

/* --- Dialog potwierdzenia ------------------------------------------------- */
/* Natywny <dialog>, nie wlasna nakladka: przegladarka daje za darmo pulapke
   focusu, zamkniecie Escape i warstwe nad cala strona. Wyglad idzie za
   referencja (.dat-modal--destructive), a nie za domyslnym stylem przegladarki. */
.dat-modal {
    width: 100%;
    max-width: var(--modal-max-width);
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface);
    color: var(--color-text);
}
.dat-modal::backdrop { background: var(--overlay-bg); }
.dat-modal__body { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); }
.dat-modal__icon {
    flex: none;
    width: var(--modal-icon-size);
    height: var(--modal-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
}
.dat-modal__text { display: flex; flex-direction: column; gap: var(--space-1); }
.dat-modal__title {
    font-size: var(--text-subtitle-size);
    line-height: var(--text-subtitle-lh);
    font-weight: var(--text-title-weight);
    letter-spacing: var(--text-subtitle-tracking);
}
.dat-modal__desc { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--color-text-secondary); }
.dat-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-surface-sunken);
}

/* Kasowanie ma wygladac na kasowanie: czerwona ikona zanim padnie pytanie. */
.dat-modal--destructive .dat-modal__icon { background: var(--color-danger-soft); color: var(--color-danger); }

/* Strona bledu stoi sama, bez ramy panelu — wiec sama musi ustawic sie na srodku. */
.dat-fault { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }