@import '_content/PlaneSales.UI.Shared/PlaneSales.UI.Shared.1ehfjro37q.bundle.scp.css';

/* /Components/Pages/Index.razor.rz.scp.css */
/*
    Admin dashboard - Enquiries Awaiting Approval widget [FTR-PSG-2026-0799].

    MOBILE-FIRST IS THE REQUIREMENT HERE, not a nicety: enquiries get approved from a phone, so the
    375px case is the base rule and the single-line desktop row is the enhancement layered on top.

    Why a stylesheet and not MudBlazor utility classes: MudBlazor 8.15.0 ships flex-sm-row,
    align-sm-center and the d-*-* display helpers (all verified present in MudBlazor.min.css) but NOT
    text-truncate, and a one-line row needs real min-width:0 + ellipsis behaviour to degrade honestly
    rather than shoving the Approve/Spam buttons off the right edge.

    ::deep IS LOAD-BEARING, not decoration. CSS isolation stamps its scope attribute on THIS component's
    own elements only, never on the markup a child component renders. Every class below that lands on a
    MudText or a MudButton - __name, __context, __snippet, __action - therefore has to be reached through
    ::deep from a plain <div> of ours, or the rule compiles to a selector that matches nothing at all and
    the row silently keeps its default layout.
*/

/* --- Base: xs / mobile. Stacked block, full-width actions, nothing truncated. ------------------- */

.psg-enquiry-row[b-djqoxsbt5q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.psg-enquiry-row:last-child[b-djqoxsbt5q] {
    border-bottom: none;
}

.psg-enquiry-row__detail[b-djqoxsbt5q] {
    /* min-width:0 is what lets the sm+ truncation below actually shrink inside the flex row. */
    min-width: 0;
    cursor: pointer;
}

.psg-enquiry-row__detail[b-djqoxsbt5q]  .psg-enquiry-row__name {
    font-weight: 600;
}

.psg-enquiry-row__detail[b-djqoxsbt5q]  .psg-enquiry-row__snippet {
    display: block;
}

.psg-enquiry-row__actions[b-djqoxsbt5q] {
    display: flex;
    gap: 0.5rem;
}

/*
    >=44px tap targets at EVERY width - the order's hard floor. MudButton's Size.Small is ~30px high,
    which is below the threshold on a touch screen, so the minimum is asserted here rather than left to
    the component's default. At xs the two buttons also split the full width, which makes them far
    harder to mis-tap - and a mis-tapped Spam, while restorable from the Junk tab, still costs the admin
    a trip to undo it.
*/
.psg-enquiry-row__actions[b-djqoxsbt5q]  .mud-button-root {
    min-height: 44px;
    min-width: 44px;
}

.psg-enquiry-row__actions[b-djqoxsbt5q]  .psg-enquiry-row__action {
    flex: 1 1 0;
}

/* --- sm and up: the single-line row. ------------------------------------------------------------ */

@media (min-width: 600px) {
    .psg-enquiry-row[b-djqoxsbt5q] {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .psg-enquiry-row__detail[b-djqoxsbt5q] {
        flex: 1 1 auto;
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
        overflow: hidden;
    }

    .psg-enquiry-row__detail[b-djqoxsbt5q]  .psg-enquiry-row__name {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .psg-enquiry-row__detail[b-djqoxsbt5q]  .psg-enquiry-row__context {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The snippet is the first thing to give up space: it is context, not the decision. */
    .psg-enquiry-row__detail[b-djqoxsbt5q]  .psg-enquiry-row__snippet {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .psg-enquiry-row__actions[b-djqoxsbt5q] {
        flex: 0 0 auto;
    }

    .psg-enquiry-row__actions[b-djqoxsbt5q]  .psg-enquiry-row__action {
        flex: 0 0 auto;
    }
}