/* ════════════════════════════════════════════════════════════════════
   PF DESIGN SYSTEM — Toast Component
   ────────────────────────────────────────────────────────────────────
   Transient notification that appears in a corner of the screen,
   auto-dismisses after a short timeout. Used for save confirmations,
   error notifications, background-job updates.

   USAGE
     <!-- Toast region container (singleton per page) -->
     <div class="pf-toast-region pf-toast-region--bottom-right"
          role="region" aria-label="Notifications" aria-live="polite">
       <!-- Individual toasts -->
       <div class="pf-toast pf-toast--success" role="status">
         <span class="pf-toast__icon" aria-hidden="true">✓</span>
         <div class="pf-toast__body">
           <strong class="pf-toast__title">Saved</strong>
           <p class="pf-toast__message">Your changes have been saved.</p>
         </div>
         <button class="pf-toast__close" aria-label="Dismiss">×</button>
       </div>
     </div>

     <!-- Variants -->
     <div class="pf-toast pf-toast--success">…</div>  <!-- ✓ green -->
     <div class="pf-toast pf-toast--warning">…</div>  <!-- ⚠ amber -->
     <div class="pf-toast pf-toast--danger">…</div>   <!-- ✗ red    role="alert" -->
     <div class="pf-toast pf-toast--info">…</div>     <!-- ℹ blue   default -->

   POSITIONING
     <div class="pf-toast-region pf-toast-region--top-left">…</div>
     <div class="pf-toast-region pf-toast-region--top-right">…</div>
     <div class="pf-toast-region pf-toast-region--top-center">…</div>
     <div class="pf-toast-region pf-toast-region--bottom-left">…</div>
     <div class="pf-toast-region pf-toast-region--bottom-right">…</div>  <!-- default -->
     <div class="pf-toast-region pf-toast-region--bottom-center">…</div>

   ACCESSIBILITY
     • Toast region: role="region" + aria-label + aria-live
     • Polite toasts (info/success): aria-live="polite" on region, role="status" on toast
     • Assertive toasts (danger): aria-live="assertive" on region, role="alert" on toast
     • Auto-dismiss must be ≥ 6s for screen-reader users to hear announcement
     • Close button always present so keyboard/screen-reader users can dismiss
     • prefers-reduced-motion: skip slide-in, just fade

   Version: 1.0.0
   Last revised: 2026-05-10
   ──────────────────────────────────────────────────────────────────── */

/* ─── Block: .pf-toast-region (positioning container) ────────── */

.pf-toast-region {
    position: fixed;
    z-index: var(--pf-toast-z-index);
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-2);
    padding: var(--pf-space-4);
    pointer-events: none;
    /* Default: bottom-right */
    bottom: 0;
    right: 0;
    align-items: flex-end;
}

/* Position modifiers */
.pf-toast-region--top-left      { top: 0;    left: 0;          right: auto; bottom: auto; align-items: flex-start; }
.pf-toast-region--top-right     { top: 0;    right: 0;         left: auto;  bottom: auto; align-items: flex-end; }
.pf-toast-region--top-center    { top: 0;    left: 50%;        transform: translateX(-50%); right: auto; bottom: auto; align-items: center; }
.pf-toast-region--bottom-left   { bottom: 0; left: 0;          right: auto; top: auto;    align-items: flex-start; }
.pf-toast-region--bottom-right  { bottom: 0; right: 0;         left: auto;  top: auto;    align-items: flex-end; }
.pf-toast-region--bottom-center { bottom: 0; left: 50%;        transform: translateX(-50%); right: auto; top: auto;    align-items: center; }

/* Top regions stack newest first; bottom regions stack newest last */
.pf-toast-region--top-left,
.pf-toast-region--top-right,
.pf-toast-region--top-center {
    flex-direction: column;
}

.pf-toast-region--bottom-left,
.pf-toast-region--bottom-right,
.pf-toast-region--bottom-center {
    flex-direction: column-reverse;
}

/* ─── Block: .pf-toast (single notification) ──────────────────── */

.pf-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--pf-space-3);
    width: 100%;
    max-width: var(--pf-toast-max-width);
    min-height: var(--pf-toast-min-height);
    padding: var(--pf-toast-padding-y) var(--pf-toast-padding-x);
    background: var(--pf-toast-bg);
    color: var(--pf-toast-fg);
    border: 1px solid var(--pf-toast-border);
    border-radius: var(--pf-toast-radius);
    box-shadow: var(--pf-toast-shadow);
    pointer-events: auto;
    /* Entrance animation — slide in + fade */
    opacity: 0;
    transform: translateX(20px);
    transition:
        opacity var(--pf-motion-duration-base) var(--pf-motion-ease-out),
        transform var(--pf-motion-duration-base) var(--pf-motion-ease-emphasized);
}

.pf-toast[data-pf-toast-shown],
.pf-toast.is-shown {
    opacity: 1;
    transform: translateX(0);
}

.pf-toast[data-pf-toast-leaving],
.pf-toast.is-leaving {
    opacity: 0;
    transform: translateX(20px);
}

/* Adjust slide direction based on toast-region position */
.pf-toast-region--top-left .pf-toast,
.pf-toast-region--bottom-left .pf-toast {
    transform: translateX(-20px);
}

.pf-toast-region--top-left .pf-toast[data-pf-toast-shown],
.pf-toast-region--bottom-left .pf-toast[data-pf-toast-shown] {
    transform: translateX(0);
}

.pf-toast-region--top-center .pf-toast,
.pf-toast-region--bottom-center .pf-toast {
    transform: translateY(-20px);
}

.pf-toast-region--top-center .pf-toast[data-pf-toast-shown],
.pf-toast-region--bottom-center .pf-toast[data-pf-toast-shown] {
    transform: translateY(0);
}

.pf-toast-region--bottom-center .pf-toast {
    transform: translateY(20px);
}

/* ─── Element: __icon ─────────────────────────────────────────── */

.pf-toast__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--pf-radius-full);
    font-size: 14px;
    font-weight: var(--pf-text-weight-bold);
    line-height: 1;
}

/* ─── Element: __body (title + message) ──────────────────────── */

.pf-toast__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-0-5);
}

.pf-toast__title {
    font-size: var(--pf-text-size-sm);
    font-weight: var(--pf-text-weight-semibold);
    line-height: var(--pf-text-leading-snug);
    margin: 0;
}

.pf-toast__message {
    margin: 0;
    font-size: var(--pf-text-size-sm);
    line-height: var(--pf-text-leading-normal);
    color: inherit;
    opacity: 0.9;
}

/* ─── Element: __close (dismiss button) ─────────────────────── */

.pf-toast__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    color: inherit;
    border: none;
    border-radius: var(--pf-radius-sm);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
    transition:
        opacity var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        background var(--pf-motion-duration-fast) var(--pf-motion-ease-out);
}

.pf-toast__close:hover,
.pf-toast__close:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.pf-toast__close:focus-visible {
    outline: none;
    box-shadow: var(--pf-focus-ring);
}

/* ─── Element: __action (inline button — undo, retry) ──────── */

.pf-toast__action {
    flex-shrink: 0;
    align-self: center;
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--pf-text-size-sm);
    font-weight: var(--pf-text-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    opacity: 0.9;
}

.pf-toast__action:hover,
.pf-toast__action:focus-visible {
    opacity: 1;
}

.pf-toast__action:focus-visible {
    outline: none;
    box-shadow: var(--pf-focus-ring);
    border-radius: var(--pf-radius-xs);
}

/* ─── Variants ───────────────────────────────────────────────── */

.pf-toast--success {
    background: var(--pf-toast-bg-success);
    color: var(--pf-toast-fg-success);
    border-color: var(--pf-toast-border-success);
}

.pf-toast--success .pf-toast__icon {
    background: var(--pf-color-status-success);
    color: var(--pf-color-text-on-status);
}

.pf-toast--warning {
    background: var(--pf-toast-bg-warning);
    color: var(--pf-toast-fg-warning);
    border-color: var(--pf-toast-border-warning);
}

.pf-toast--warning .pf-toast__icon {
    background: var(--pf-color-status-warning);
    color: var(--pf-color-text-on-status);
}

.pf-toast--danger {
    background: var(--pf-toast-bg-danger);
    color: var(--pf-toast-fg-danger);
    border-color: var(--pf-toast-border-danger);
}

.pf-toast--danger .pf-toast__icon {
    background: var(--pf-color-status-danger);
    color: var(--pf-color-text-on-status);
}

.pf-toast--info {
    background: var(--pf-toast-bg-info);
    color: var(--pf-toast-fg-info);
    border-color: var(--pf-toast-border-info);
}

.pf-toast--info .pf-toast__icon {
    background: var(--pf-color-status-info);
    color: var(--pf-color-text-on-status);
}

/* ─── Reduced-motion respect ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pf-toast {
        transition: opacity var(--pf-motion-duration-fast) linear;
        transform: none !important;
    }
}