/*
 * ═══════════════════════════════════════════════════════════════
 * mPower Snackbar — Office variant (plum-themed, soft rect, accent stripe)
 *
 * UI.Shared toast styling for Web.Office and OfficeSharp's BlazorWebView.
 * Distinct visual language from Handheld's pill+badge (which lives at
 * mPower.Web.Handheld/wwwroot/css/handheld-snackbar.css and stays mobile-toast).
 *
 * Design moves vs the Handheld variant:
 *   - 10px border-radius soft-rect (vs 28px pill) — matches Office's card
 *     vocabulary (cards / dialogs / popovers all sit at 8-10px).
 *   - Plum-tinted dark surface (#2b1c33) instead of dark navy — feels like
 *     a deliberate Office component rather than borrowed mobile chrome.
 *   - Severity color rendered as a 4px left-accent stripe instead of a
 *     circular icon badge — echoes the sidebar nav and header-bar accents.
 *   - Wider max-width (720px) for SQL/exception strings that surface in
 *     back-office errors, with user-select: text so support can copy them.
 *   - Lighter shadow — "lifted card", not "spotlit aircraft".
 *
 * Story #2154. Reference: mockups/snackbarupgrade.png.
 *
 * Load order matters: each host MUST reference this file in App.razor
 * AFTER MudBlazor.min.css so the cascade works without relying on
 * !important everywhere. !important is still used on a few rules where
 * MudBlazor's own selectors are high-specificity (severity-variant
 * backgrounds, in particular).
 * ═══════════════════════════════════════════════════════════════
 */

/* ───────────────────────────────────────────────────────────────
 * Outer shell — soft rect, plum-tinted dark surface, left accent stripe
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar {
    background-color: #2b1c33 !important;
    color: #e8e0ec !important;
    border-radius: 10px !important;
    border: 1px solid #3a2942 !important;
    border-left: 4px solid #979999 !important;     /* default; severity rules below override */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
    padding: 6px 14px 6px 16px !important;        /* tighter vertical, breathing room past the stripe */
    min-height: 40px !important;
    min-width: 320px;
    max-width: 720px;
    align-items: center;
    gap: 12px;
}

/* Kill MudBlazor's filled-variant severity backgrounds — our surface wins */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-error {
    background-color: #2b1c33 !important;
    color: #e8e0ec !important;
}

/* ───────────────────────────────────────────────────────────────
 * Severity → left accent stripe color
 * Echoes the sidebar nav and header-bar left-stripe pattern.
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar.mud-alert-filled-success { border-left-color: #34C789 !important; }
.mud-snackbar.mud-alert-filled-info    { border-left-color: #0297B4 !important; }
.mud-snackbar.mud-alert-filled-normal  { border-left-color: #979999 !important; }
.mud-snackbar.mud-alert-filled-warning { border-left-color: #F59E0B !important; }
.mud-snackbar.mud-alert-filled-error   { border-left-color: #E85D63 !important; }

/* ───────────────────────────────────────────────────────────────
 * Inline severity icon — no badge, color matches the stripe so the
 * eye groups them as one severity affordance.
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar .mud-snackbar-icon {
    background-color: transparent !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mud-snackbar .mud-snackbar-icon svg,
.mud-snackbar .mud-snackbar-icon .mud-icon-root {
    width: 22px !important;
    height: 22px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon .mud-icon-root,
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon svg {
    color: #34C789 !important; fill: #34C789 !important;
}
.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon .mud-icon-root,
.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon svg {
    color: #0297B4 !important; fill: #0297B4 !important;
}
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon .mud-icon-root,
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon svg {
    color: #F59E0B !important; fill: #F59E0B !important;
}
.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon .mud-icon-root,
.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon svg {
    color: #E85D63 !important; fill: #E85D63 !important;
}

/* ───────────────────────────────────────────────────────────────
 * Message text — soft white, selectable so support can copy SQL
 * exception strings off an error toast.
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar .mud-snackbar-content-message,
.mud-snackbar .mud-snackbar-content-message > *:not(.mud-icon-root),
.mud-snackbar .mud-typography {
    color: #e8e0ec !important;
    font-size: 0.875rem;
    line-height: 1.4;
    word-break: break-word;
    user-select: text;
    -webkit-user-select: text;
}

/* ───────────────────────────────────────────────────────────────
 * Close button — subtle, right-aligned
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar .mud-snackbar-content-action,
.mud-snackbar .mud-snackbar-content-action .mud-icon-button {
    color: #b0a3b8 !important;
    background-color: transparent !important;
    flex-shrink: 0;
}

.mud-snackbar .mud-snackbar-content-action .mud-icon-root {
    background-color: transparent !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #b0a3b8 !important;
    fill: #b0a3b8 !important;
}

/* ───────────────────────────────────────────────────────────────
 * Click-to-copy affordance for error toasts (added by MpowerSnackbar
 * via SnackbarTypeClass="snackbar-clickable"). The whole toast is
 * the click target; the inline copy glyph just before the close X
 * makes the affordance discoverable.
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar.snackbar-clickable {
    cursor: pointer;
}

.mud-snackbar.snackbar-clickable:hover {
    background-color: #2f1f37 !important;
}

.mud-snackbar.snackbar-clickable .mud-snackbar-content-action::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-color: #b0a3b8;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    flex-shrink: 0;
    align-self: center;
}

.mud-snackbar.snackbar-clickable:hover .mud-snackbar-content-action::before {
    background-color: #ffffff;
}

/* ───────────────────────────────────────────────────────────────
 * Position container — bottom center, comfortably above the edge.
 * env(safe-area-inset-bottom) is iOS-only; resolves to 0 on desktop.
 *
 * MudBlazor's stock styling caps the location wrappers at ~480px, which
 * forces the inner .mud-snackbar (with our 720px max-width) to wrap
 * messages early. Override the cap so SQL/exception strings can run
 * to the toast's own max-width before wrapping.
 * ─────────────────────────────────────────────────────────────── */
.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-right,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-right {
    max-width: none !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}