/* RD-2793 — the "no address for these people" strip.
 *
 * Shown once, on the first page after the onboarding wizard. Geometry is the
 * extraction strip's (css/integrations/extraction-progress-banner.css) because
 * the two read as the same object: a full-width line pinned above the
 * organization name, starting at the sidebar's right edge.
 *
 * ## Stacking
 *
 * Right after setup the first backfill is running, so both strips are up. This
 * one sits UNDER that one by offsetting its `top` with `--lm-ep-height`, the
 * variable the extraction banner's JS already publishes from its real height.
 * The two clearances then have to ADD UP, which is what the rules at the bottom
 * do — with two classes on the selector so they outrank the single-class rules
 * in the other file rather than fighting them for order.
 *
 * ## Colour
 *
 * Tinted, unlike its neighbour, and deliberately so. The import strip is
 * ambient: it describes something already happening, on every page, for as long
 * as it runs, and colour would make an ongoing fact shout. This one appears
 * once, says something did NOT happen, and is the only chance the product gets
 * to say it — a near-colourless line at the top of the page is exactly the thing
 * an eye heading for the content skims past.
 *
 * So: the product's warning family (the same amber as the Suggestions chip),
 * a solid button rather than a text link, and the count in the sentence set in
 * bold. Amber and not red because nothing is broken — the work is unfinished.
 */

.ct-pending-emails {
    --ct-pe-ink: #7a5b00;         /* amber-900: readable on the tint below */
    --ct-pe-tint: #fff8dd;        /* --bs-light-warning, the Suggestions chip */
    --ct-pe-border: #f5e6b8;
    --ct-pe-accent: #b58500;
    --ct-pe-ease: cubic-bezier(0.23, 1, 0.32, 1);

    /* One below the extraction strip (101), still above the fixed header (100)
       and below the sidebar (105). */
    position: fixed;
    top: var(--lm-ep-height, 0px);
    left: 0;
    right: 0;
    z-index: 101;
    margin: 0;
    background: var(--ct-pe-tint);
    border-bottom: 1px solid var(--ct-pe-border);
    box-shadow: 0 1px 3px rgba(122, 91, 0, 0.06);
    color: var(--ct-pe-ink);
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms var(--ct-pe-ease), transform 200ms var(--ct-pe-ease),
                left 300ms ease, top 200ms var(--ct-pe-ease);
}

/* One line by default and by intent: it is a handover, not a report. */
.ct-pending-emails__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
}

.ct-pending-emails__icon {
    flex: 0 0 auto;
    color: var(--ct-pe-accent);
    font-size: 1.15rem;
}

/* The count is the fact; the sentence around it is context. */
.ct-pending-emails__text b {
    font-weight: 700;
}

.ct-pending-emails__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ct-pending-emails__cta {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 6px;
    /* Not --ct-pe-accent: white on that amber lands around 3.3:1, under AA for
       text this size. This one clears 4.5:1 and still reads as the same family. */
    background: #6b4f00;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms var(--ct-pe-ease), transform 150ms var(--ct-pe-ease);
}

.ct-pending-emails__cta:hover {
    background: #533d00;
    color: #fff;
}

.ct-pending-emails__cta:active {
    transform: scale(0.98);
}

.ct-pending-emails__cta:focus-visible {
    outline: 2px solid var(--ct-pe-accent);
    outline-offset: 2px;
}

.ct-pending-emails__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ct-pe-accent);
    cursor: pointer;
    transition: background-color 150ms var(--ct-pe-ease), color 150ms var(--ct-pe-ease),
                transform 150ms var(--ct-pe-ease);
}

.ct-pending-emails__dismiss:hover {
    background: rgba(122, 91, 0, 0.08);
    color: var(--ct-pe-ink);
}

.ct-pending-emails__dismiss:active {
    transform: scale(0.94);
}

.ct-pending-emails__dismiss:focus-visible {
    outline: 2px solid var(--ct-pe-accent);
    outline-offset: 2px;
}

/*
 * Clear the fixed sidebar. Mirrors the extraction strip's rule exactly — same
 * attribute, same breakpoint, same vars — so collapsing the sidebar moves both
 * strips together and mobile, where the sidebar is a drawer, keeps both full
 * width.
 */
@media (min-width: 992px) {
    [data-kt-app-sidebar-fixed="true"] .ct-pending-emails {
        left: calc(
            var(--bs-app-sidebar-width) + var(--bs-app-sidebar-gap-start, 0px) +
                var(--bs-app-sidebar-gap-end, 0px)
        );
    }
}

/*
 * Room for the strip. `--lm-pe-height` is written by the JS from the real
 * height, exactly as the extraction banner does with its own.
 *
 * Two classes on each selector, so when both strips are up these outrank the
 * single-class rules in extraction-progress-banner.css instead of depending on
 * which stylesheet loaded last. The additive property choice is that file's and
 * is kept: `margin-top` on the fixed header, `padding-top` on the wrapper.
 */
body.lm-pending-emails-on:not(.lm-extraction-banner-on) .app-header {
    margin-top: var(--lm-pe-height, 0px);
}

body.lm-pending-emails-on:not(.lm-extraction-banner-on) .app-wrapper {
    padding-top: var(--lm-pe-height, 0px);
}

body.lm-pending-emails-on.lm-extraction-banner-on .app-header {
    margin-top: calc(var(--lm-ep-height, 0px) + var(--lm-pe-height, 0px));
}

body.lm-pending-emails-on.lm-extraction-banner-on .app-wrapper {
    padding-top: calc(var(--lm-ep-height, 0px) + var(--lm-pe-height, 0px));
}

/* Pre-reveal and exit, set by JS so both ends animate. It drops in from above
   its own height rather than fading 4px: this is seen once, and movement across
   a real distance is what the eye catches. Still under 300ms — the strip is
   announcing something, not performing. */
.ct-pending-emails.is-entering,
.ct-pending-emails.is-hiding {
    opacity: 0;
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .ct-pending-emails { transition: none; }
    .ct-pending-emails__cta,
    .ct-pending-emails__dismiss { transition: none; }
    .ct-pending-emails__dismiss:active { transform: none; }
}