/* Work Tracking — Shared/_PbFeedback
   The one toast stack and the one confirm dialog every screen uses (PbFeedback.razor).

   Deliberately self-contained: the product's design tokens live on #pbApp, but the
   feedback layer renders as a SIBLING of each screen's #pbApp (PbScreen puts it outside
   the screen body so a page that is denied, loading or errored can still speak). So it
   declares its own tokens here and re-declares them under .pb-shell.pb-dark, which is
   the class pb-layout.js toggles on the shell. The values are the same palette as
   _PbStyles.css — keep the two in step. */

.pb-fb {
    --fb-surface: #ffffff;
    --fb-surface-2: #f2f4f8;
    --fb-border: #e5e7eb;
    --fb-border-2: #d4d9e3;
    --fb-text: #12151c;
    --fb-text-2: #525a68;
    --fb-text-3: #8a91a0;
    --fb-accent: #4361ee;
    --fb-accent-2: #3a54d4;
    --fb-accent-soft: #eceffe;
    --fb-success: #0e9f6e;
    --fb-success-soft: #e7f7f0;
    --fb-warning: #d97706;
    --fb-warning-soft: #fcf2e3;
    --fb-danger: #dc2626;
    --fb-danger-2: #b91c1c;
    --fb-danger-soft: #fdebea;
    --fb-info: #2563eb;
    --fb-info-soft: #e8efff;
    --fb-shadow: 0 18px 44px -12px rgba(16,20,30,.30), 0 2px 6px rgba(16,20,30,.06);
    --fb-shadow-lg: 0 32px 80px -20px rgba(16,20,30,.42);
    --fb-overlay: rgba(18,21,28,.44);
    font-family: Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.pb-shell.pb-dark .pb-fb {
    --fb-surface: #171b24;
    --fb-surface-2: #1f2531;
    --fb-border: #2b323f;
    --fb-border-2: #333a48;
    --fb-text: #eef1f6;
    --fb-text-2: #a6aebd;
    --fb-text-3: #6c7484;
    --fb-accent: #7d7bff;
    --fb-accent-2: #9b99ff;
    --fb-accent-soft: rgba(125,123,255,.17);
    --fb-success: #2dd4a4;
    --fb-success-soft: rgba(45,212,164,.16);
    --fb-warning: #f0a83a;
    --fb-warning-soft: rgba(240,168,58,.17);
    --fb-danger: #f1675c;
    --fb-danger-2: #ff8479;
    --fb-danger-soft: rgba(241,103,92,.18);
    --fb-info: #5d8cff;
    --fb-info-soft: rgba(93,140,255,.18);
    --fb-shadow: 0 18px 44px -12px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.4);
    --fb-shadow-lg: 0 32px 80px -20px rgba(0,0,0,.8);
    --fb-overlay: rgba(2,4,8,.66);
}

/* ============================================================ toasts */

/* Top-right, under the 53px topbar. Bottom-right is where the two old per-screen toasts
   sat, but that is also where every drawer parks its Save / Delete footer, so a message
   about the click you just made appeared underneath your own cursor. */
.pb-toasts {
    position: fixed;
    top: 66px;
    right: 18px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 372px;
    max-width: calc(100vw - 36px);
    pointer-events: none;
}

.pb-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px 13px 13px;
    border: 1px solid var(--fb-border);
    border-left: 3px solid var(--fb-text-3);
    border-radius: 11px;
    background: var(--fb-surface);
    color: var(--fb-text);
    box-shadow: var(--fb-shadow);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(16px) scale(.98);
    transition: opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1);
}

    .pb-toast.in {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    .pb-toast.out {
        opacity: 0;
        transform: translateX(16px) scale(.98);
    }

/* Tone: the left rule, the icon tile and the progress bar are the only coloured parts —
   the body stays on the surface so long messages stay readable in both themes. */
.pb-toast.ok { border-left-color: var(--fb-success); }
.pb-toast.bad { border-left-color: var(--fb-danger); }
.pb-toast.warn { border-left-color: var(--fb-warning); }
.pb-toast.info { border-left-color: var(--fb-info); }

.pb-toast-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fb-surface-2);
    color: var(--fb-text-2);
}

.pb-toast.ok .pb-toast-ico { background: var(--fb-success-soft); color: var(--fb-success); }
.pb-toast.bad .pb-toast-ico { background: var(--fb-danger-soft); color: var(--fb-danger); }
.pb-toast.warn .pb-toast-ico { background: var(--fb-warning-soft); color: var(--fb-warning); }
.pb-toast.info .pb-toast-ico { background: var(--fb-info-soft); color: var(--fb-info); }

.pb-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-toast-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    margin-bottom: 2px;
}

.pb-toast-msg {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fb-text-2);
    word-break: break-word;
    /* Server messages can be long (a SafeError, a suppression-list reason). Four lines,
       then ellipsis — a toast must never become the page. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-toast-x {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: -1px -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--fb-text-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .pb-toast-x:hover { background: var(--fb-surface-2); color: var(--fb-text); }
    .pb-toast-x:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 1px; }

/* Time remaining. Informational only — the countdown that actually dismisses the toast is
   the server-side timer in PbFeedback, so a throttled animation never strands one. */
.pb-toast-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
}

    .pb-toast-bar > i {
        display: block;
        height: 100%;
        width: 100%;
        transform-origin: left center;
        background: var(--fb-text-3);
        animation: pbToastBar linear forwards;
    }

.pb-toast.ok .pb-toast-bar > i { background: var(--fb-success); }
.pb-toast.bad .pb-toast-bar > i { background: var(--fb-danger); }
.pb-toast.warn .pb-toast-bar > i { background: var(--fb-warning); }
.pb-toast.info .pb-toast-bar > i { background: var(--fb-info); }

@keyframes pbToastBar {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ============================================================ confirm dialog */

.pb-cfm-scrim {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--fb-overlay);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    animation: pbCfmFade .16s ease forwards;
}

@keyframes pbCfmFade {
    to { opacity: 1; }
}

.pb-cfm {
    width: 432px;
    max-width: 100%;
    background: var(--fb-surface);
    color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: 16px;
    box-shadow: var(--fb-shadow-lg);
    padding: 22px 22px 18px;
    transform: translateY(10px) scale(.97);
    opacity: 0;
    animation: pbCfmPop .22s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes pbCfmPop {
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.pb-cfm-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: var(--fb-accent-soft);
    color: var(--fb-accent);
}

.pb-cfm.danger .pb-cfm-ico { background: var(--fb-danger-soft); color: var(--fb-danger); }
.pb-cfm.warn .pb-cfm-ico { background: var(--fb-warning-soft); color: var(--fb-warning); }

.pb-cfm-title {
    margin: 0 0 7px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
}

.pb-cfm-text {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.6;
    color: var(--fb-text-2);
    white-space: pre-line;
}

/* The line that says what cannot be undone — kept apart from the prose so it reads as a
   consequence, not as more explanation. */
.pb-cfm-note {
    margin-top: 13px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
    background: var(--fb-surface-2);
    color: var(--fb-text-2);
    border: 1px solid var(--fb-border);
}

.pb-cfm.danger .pb-cfm-note {
    background: var(--fb-danger-soft);
    border-color: transparent;
    color: var(--fb-danger-2);
}

.pb-cfm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

/* Own button styles: .pb-btn is scoped to #pbApp and this dialog renders outside it. */
.pb-cfm-btn {
    height: 34px;
    padding: 0 15px;
    border-radius: 9px;
    border: 1px solid var(--fb-border-2);
    background: var(--fb-surface);
    color: var(--fb-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

    .pb-cfm-btn:hover { background: var(--fb-surface-2); }
    .pb-cfm-btn:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }
    .pb-cfm-btn:disabled { opacity: .6; cursor: default; }

    .pb-cfm-btn.pri {
        background: var(--fb-accent);
        border-color: var(--fb-accent);
        color: #fff;
    }

        .pb-cfm-btn.pri:hover { background: var(--fb-accent-2); border-color: var(--fb-accent-2); }

    .pb-cfm-btn.danger {
        background: var(--fb-danger);
        border-color: var(--fb-danger);
        color: #fff;
    }

        .pb-cfm-btn.danger:hover { background: var(--fb-danger-2); border-color: var(--fb-danger-2); }

@media (max-width: 520px) {
    .pb-toasts { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
    .pb-toast { transform: translateY(12px) scale(.98); }
    .pb-cfm-actions { flex-direction: column-reverse; }
    .pb-cfm-btn { width: 100%; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-toast, .pb-cfm, .pb-cfm-scrim {
        transition: none;
        animation: none;
        opacity: 1;
        transform: none;
    }

    .pb-toast-bar > i { animation: none; }
}