/*
 * Toast-v2 — notifikační systém vpravo nahoře (UKOL 230)
 *
 * Sekce B: plná implementace s animacemi (slide-in/out), stacking,
 * 4 per-type varianty přes designer V8 toast role
 * (`--ui-feedback-{type}-toast-{bg,text,border}`).
 *
 * z-index 50000 = NAD modaly (modal-v2 max 49xxx z modalStack).
 * Pravidlo #22 — z-index escalation: Toast je out-of-flow notification,
 * neúčastní se ModalStackManager (jiný UX vzor než dialog).
 *
 * @uses-design-tokens-v2
 */

/* ============================================================================
 * CONTAINER (fixed top-right, stacking flex column)
 * ============================================================================ */

.toast-v2-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 50000;
    display: flex;
    flex-direction: column;
    gap: var(--ui-spacing-sm, 8px);
    pointer-events: none; /* container nereaguje na klik, jen toasty */
    max-width: 480px;
}

/* ============================================================================
 * TOAST ITEM (initial state — neviditelný, vpravo mimo viewport)
 * ============================================================================ */

.toast-v2 {
    min-width: 280px;
    max-width: 480px;
    padding: var(--ui-spacing-md, 12px) var(--ui-spacing-lg, 16px);
    border-radius: 6px;
    border: 1px solid var(--ui-border-default, #ff0000);
    background: var(--ui-surface-tinted-bg, #ff0000);
    color: var(--ui-text-primary, #ff0000);
    /* Explicit font-family — Toast je fixed/out-of-flow a CSS dědění z body
       nemusí projít na všech stránkách (např. login má vlastní body font
       z inline stylu). Token --ui-font-base je definovaný napříč všemi 6 schématy. */
    font-family: var(--ui-font-base);
    font-size: var(--ui-density-cozy-text-body, 14px);
    line-height: var(--ui-text-leading-normal, 1.4);
    box-shadow: var(--ui-shadow-overlay, none);
    pointer-events: auto; /* jednotlivý toast je klikatelný */
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--ui-spacing-sm, 8px);

    /* Initial state — neviditelný, posunutý vpravo */
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Visible state — slide-in dokončen */
.toast-v2--visible {
    opacity: 1;
    transform: translateX(0);
}

/* Leaving state — slide-out animace před DOM remove */
.toast-v2--leaving {
    opacity: 0;
    transform: translateX(100%);
}

/* ============================================================================
 * ICON + MESSAGE
 * ============================================================================ */

.toast-v2__icon {
    font-size: var(--ui-text-size-heading-small, 16px);
    flex-shrink: 0;
    line-height: 1;
}

.toast-v2__message {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* ============================================================================
 * PER-TYPE VARIANTS — designer V8 toast role (identické napříč všemi 6 schématy)
 *
 * v1 paleta (hodnoty viz config/design/schemes/*.ts):
 *   - success: pastel mint bg, forest green text
 *   - error:   sytá burgundy bg, bílý text
 *   - info:    pastel azure bg, tmavě modrý text
 *   - warning: pastel cream bg, zlatohnědý text
 * ============================================================================ */

.toast-v2--success {
    background: var(--ui-feedback-success-toast-bg, #ff0000);
    border-color: var(--ui-feedback-success-toast-border, #ff0000);
    border-left: 4px solid var(--ui-feedback-success-toast-border, #ff0000);
    color: var(--ui-feedback-success-toast-text, #ff0000);
}

.toast-v2--error {
    background: var(--ui-feedback-danger-toast-bg, #ff0000);
    border-color: var(--ui-feedback-danger-toast-border, #ff0000);
    border-left: 4px solid var(--ui-feedback-danger-toast-border, #ff0000);
    color: var(--ui-feedback-danger-toast-text, #ff0000);
}

.toast-v2--info {
    background: var(--ui-feedback-info-toast-bg, #ff0000);
    border-color: var(--ui-feedback-info-toast-border, #ff0000);
    border-left: 4px solid var(--ui-feedback-info-toast-border, #ff0000);
    color: var(--ui-feedback-info-toast-text, #ff0000);
}

.toast-v2--warning {
    background: var(--ui-feedback-warning-toast-bg, #ff0000);
    border-color: var(--ui-feedback-warning-toast-border, #ff0000);
    border-left: 4px solid var(--ui-feedback-warning-toast-border, #ff0000);
    color: var(--ui-feedback-warning-toast-text, #ff0000);
}