/* Global-admin celebrations (docs/design/celebrations/PLAN.md 5.5 and 6; mockups/celebration-toast-1280.html and -375.html).
   The toast host (CelebrationHost.razor) and the Celebration sounds switch (CelebrationSoundToggle.razor). Plain CSS, not scoped, so the
   shipped file can be driven in a browser on its own (tests/e2e/run-celebrations-js.mjs). */

/* ── Toast host: top-right under the 58px bar on desktop, full width under the bar on a phone ─────────── */
.cc-cel-host {
    position: fixed;
    top: calc(var(--topnav-height, 58px) + 12px);
    right: 16px;
    width: 384px;
    max-width: calc(100vw - 32px);
    z-index: var(--z-toast, 1080);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Empty most of the time; it must not swallow clicks on the page behind it. The toasts take pointer events back. */
    pointer-events: none;
}
.cc-cel-host > * { pointer-events: auto; }

.cc-cel {
    position: relative;
    display: flex;
    gap: 12px;
    overflow: hidden;
    padding: 14px 14px 12px;
    background: #fff;
    border: 1px solid var(--border, #e2dbd0);
    border-left: 4px solid var(--accent, #d97746);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20,40,28,.20), 0 2px 6px rgba(20,40,28,.06);
    color: var(--text-primary, #1c2a1e);
    animation: cc-cel-in .22s ease-out both;
}
/* Decorative confetti strip. aria-hidden in the markup; removed under prefers-reduced-motion with the slide-in. */
.cc-cel::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: repeating-linear-gradient(90deg, #d97746 0 10px, #4ade80 10px 18px, #f4a261 18px 26px, #2d6040 26px 34px, #fbbf24 34px 42px);
}

.cc-cel-ico {
    width: 38px; height: 38px; margin-top: 2px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 18px;
    background: var(--accent-light, #fff4ee);
    color: var(--accent-strong, #b8501f);
}
.cc-cel-ico--money   { background: #e8f5e9; color: #1b5e20; }
.cc-cel-ico--stripe  { background: #ede9fe; color: #4c1d95; }
.cc-cel-ico--claim   { background: #e0f2fe; color: #0c4a6e; }
.cc-cel-ico--ship    { background: #fef3c7; color: #78350f; }

.cc-cel-txt { flex: 1; min-width: 0; }
.cc-cel-ttl { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.cc-cel-when { margin-left: auto; font-weight: 600; font-size: 11.5px; color: var(--text-muted, #5b7662); white-space: nowrap; }
.cc-cel-body { margin-top: 3px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cc-cel-body b { font-weight: 700; }

/* Sound hints: the one-time "turn on sounds" line, and the muted-speaker glyph when sound is on but this tab has had no click yet. */
.cc-cel-hint {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 6px 8px;
    background: #f4f1ea; border: 1px solid var(--border, #e2dbd0); border-radius: 6px;
    font-size: 12px; color: var(--text-secondary, #4f6855);
}
.cc-cel-muted { color: var(--text-muted, #5b7662); font-size: 13px; }

/* The Dismiss icon button. PortalButton gives it the 44px tap target; the mockup's 32px square is the desktop look. */
.cc-cel-x.btn {
    flex-shrink: 0; margin: -4px -4px 0 0;
    min-width: 32px; min-height: 32px; padding: 0;
    display: grid; place-items: center;
    color: var(--text-secondary, #4f6855); background: transparent; border-color: transparent;
}
.cc-cel-x.btn .bi { font-size: 15px; }
.cc-cel-x.btn:hover { border-color: var(--border, #e2dbd0); background: transparent; color: var(--text-secondary, #4f6855); }

/* Time left: a thin bar along the foot that drains over the toast's life; paused while the toast is hovered or focused. */
.cc-cel-bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--accent, #d97746); opacity: .35;
    transform-origin: left center;
    animation: cc-cel-drain var(--cc-cel-life, 60s) linear forwards;
}
.cc-cel.is-paused .cc-cel-bar { animation-play-state: paused; }

.cc-cel-more {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--sidebar-bg, #1b3d2a); color: #fff;
    border-radius: 99px; font-size: 12px; font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

@keyframes cc-cel-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes cc-cel-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* No slide-in and no confetti: the toast simply appears. The draining bar is motion too, so it goes (the toast still leaves on time). */
@media (prefers-reduced-motion: reduce) {
    .cc-cel { animation: none; }
    .cc-cel::before { display: none; }
    .cc-cel-bar { display: none; animation: none; }
}

/* PHONE: full width under the bar, where the Portal's ordinary toasts go on a phone. Dismiss is the 44px tap target PortalButton gives it. */
@media (max-width: 575.98px) {
    .cc-cel-host { left: 8px; right: 8px; width: auto; max-width: none; top: calc(var(--topnav-height, 58px) + 8px); }
    .cc-cel-x.btn { min-width: 44px; min-height: 44px; margin: -10px -8px 0 0; }
}

/* ── The Celebration sounds switch: a row in the avatar menu (dark panel) and a row in the phone drawer ─── */
.cc-cel-tip { display: block; width: 100%; }
.cc-cel-switch.btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 48px; padding: 6px 16px;
    border: 0; border-radius: 0; background: transparent;
    color: rgba(255,255,255,.9); font-size: 14px; text-align: left; text-decoration: none;
}
.cc-cel-switch.btn:hover, .cc-cel-switch.btn:focus-visible { background: rgba(255,255,255,.07); color: #fff; }
.cc-cel-switch.btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cc-cel-switch .bi { width: 16px; text-align: center; font-size: 16px; flex-shrink: 0; }
.cc-cel-switch-text { white-space: nowrap; display: flex; flex-direction: column; flex: 1; line-height: 1.25; min-width: 0; }
.cc-cel-switch-text small { font-size: 11.5px; color: rgba(255,255,255,.6); }
.cc-cel-switch--drawer.btn { padding: 10px 20px; min-height: 56px; }
.cc-cel-pill {
    position: relative; flex-shrink: 0;
    width: 40px; height: 24px; border-radius: 99px;
    background: rgba(255,255,255,.25);
}
.cc-cel-pill::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.cc-cel-switch[aria-checked="true"] .cc-cel-pill { background: var(--accent, #d97746); }
.cc-cel-switch[aria-checked="true"] .cc-cel-pill::after { left: auto; right: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .cc-cel-pill, .cc-cel-pill::after { transition: background .12s, left .12s, right .12s; }
}

/* ── Clear of the navigation ────────────────────────────────────────────────────────────────────────────
   The bar is a stacking context at z-index 100, below --z-toast, so a toast would sit over the avatar menu it overlaps. While that menu is
   open the toasts step down to just under it (the mockup does the same); closing it moves them back. The measured menu height is
   --cc-cel-menu-clear. On a phone the avatar is hidden and the drawer opens under the bar, so the toasts get out of its way entirely
   (hidden, not removed: their timers go on, and they are back when the drawer closes). */
body:has(.cc-topnav-account [aria-expanded="true"]) .cc-cel-host { top: calc(var(--topnav-height, 58px) + var(--cc-cel-menu-clear, 296px)); }
body:has(.cc-mobile-drawer.open) .cc-cel-host { visibility: hidden; }