@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Pages/CompanyConfigs/Activity.razor.rz.scp.css */
/* Plain selectors, no ::deep -- this page's top-level markup is a set of siblings with no single
   wrapping ancestor, so ::deep rules would compile to a selector that never matches. See the
   CreateQuote.razor.css lesson in CLAUDE.md. */

/* =====================================================================================
   THE WINDOW

   A radio group, not a pair of date pickers. Somebody opens this page to ask one of three
   questions -- did the jobs come back after that restart, did everything run overnight,
   has anything been quietly failing this week -- and every one of those is a rolling
   window rather than a calendar day.
   ===================================================================================== */

.act-range[b-k18pqtanpc] {
    margin: 10px 0 18px;
}

.act-range-label[b-k18pqtanpc] {
    font-size: 12.5px;
    color: #55636f;
    margin-bottom: 8px;
}

.act-range-row[b-k18pqtanpc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.act-range-custom[b-k18pqtanpc] {
    margin-top: 12px;
    gap: 12px;
}

/*  Pushes the job picker and the custom-range link to the right, so the three radios read as one
    group rather than as the first three items in a row of five controls. */
.act-range-spacer[b-k18pqtanpc] {
    flex: 1 1 auto;
}

.act-radio[b-k18pqtanpc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #1f2933;
    cursor: pointer;
    margin: 0;
}

    .act-radio input[b-k18pqtanpc] {
        margin: 0;
        cursor: pointer;
    }

.act-range-field[b-k18pqtanpc] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 230px;
}

.act-range-caption[b-k18pqtanpc] {
    font-size: 12.5px;
    color: #55636f;
    margin: 0;
    white-space: nowrap;
}

.act-date[b-k18pqtanpc] {
    max-width: 170px;
}

/* =====================================================================================
   THE CARDS

   Deliberately small. These were tall panels carrying the last run's full message inline,
   which turned four ordinary jobs into four blocks of prose -- and the message is the one
   part nobody reads at a glance. A card now answers "is this job alright" and nothing
   more; the wording behind that answer is one click away in a popover.
   ===================================================================================== */

.act-cards[b-k18pqtanpc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
    margin: 0 0 26px;
}

.act-card[b-k18pqtanpc] {
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 8px;
    padding: 13px 15px 11px;
}

/*  The state lives on a dot rather than a 4px rail down the side. A rail is a lot of colour
    for a binary, and with four cards abreast it read as four coloured bands. */
.act-card-head[b-k18pqtanpc] {
    display: flex;
    align-items: center;
    gap: 8px;
    /*  min-width: 0 further down, or a long job name refuses to shrink and stretches the card
        past its grid track -- a flex child defaults to min-width: auto. */
    min-width: 0;
}

.act-dot[b-k18pqtanpc] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9d3dc;
}

.act-dot-ok[b-k18pqtanpc] { background: #16c444; }
.act-dot-bad[b-k18pqtanpc] { background: #b02a37; }
.act-dot-stale[b-k18pqtanpc] { background: #c88a2c; }

.act-name[b-k18pqtanpc] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 13.5px;
    color: #0d3350;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-when[b-k18pqtanpc] {
    margin-top: 5px;
    font-size: 12px;
    color: #55636f;
}

/*  Plain coloured words, not pills. At this size a badge is bigger than the state it reports. */
.act-state-ok[b-k18pqtanpc] { color: #137a34; font-weight: 600; }
.act-state-bad[b-k18pqtanpc] { color: #b02a37; font-weight: 600; }
.act-state-stale[b-k18pqtanpc] { color: #a05f10; font-weight: 600; }

.act-sep[b-k18pqtanpc] {
    color: #c9d3dc;
    margin: 0 2px;
}

.act-card-foot[b-k18pqtanpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #f0f4f8;
}

.act-stats[b-k18pqtanpc] {
    font-size: 11.5px;
    color: #7d8b99;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .act-stats b[b-k18pqtanpc] { color: #1f2933; }

.act-bad[b-k18pqtanpc] { color: #b02a37; }

.act-muted[b-k18pqtanpc] { color: #98a2b3; }

/*  The way into the detail, in both the cards and the grid. A link rather than a button so it
    does not compete with the real actions on the page. */
.act-more[b-k18pqtanpc] {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--omx-primary, rgb(8, 98, 155));
    cursor: pointer;
}

    .act-more:hover[b-k18pqtanpc] {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

/* =====================================================================================
   THE POPOVER
   ===================================================================================== */

.act-pop[b-k18pqtanpc] {
    padding: 4px 2px;
    font-size: 12.5px;
    color: #1f2933;
}

.act-pop-row[b-k18pqtanpc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    border-bottom: 1px solid #f2f5f8;
}

    .act-pop-row:last-of-type[b-k18pqtanpc] {
        border-bottom: 0;
    }

.act-pop-key[b-k18pqtanpc] {
    flex: 0 0 auto;
    color: #7d8b99;
}

/*  The message itself: the reason any of this is behind a button. It can run to a full sentence
    with numbers in it, and it wraps rather than being clipped. */
.act-pop-detail[b-k18pqtanpc] {
    margin-top: 10px;
    padding: 9px 11px;
    background: #f7f9fb;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: #44586b;
    overflow-wrap: anywhere;
}

.act-warn[b-k18pqtanpc] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #fdf3e6;
    border-radius: 7px;
    font-size: 12px;
    color: #a05f10;
    line-height: 1.45;
}

/* =====================================================================================
   RECENT RUNS
   ===================================================================================== */

.act-runs-head[b-k18pqtanpc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

    .act-runs-head .section-title[b-k18pqtanpc] {
        margin: 0;
    }

.act-runs-count[b-k18pqtanpc] {
    font-size: 12px;
    color: #7d8b99;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================================
   NOTHING RECORDED YET
   ===================================================================================== */

.act-empty[b-k18pqtanpc] {
    max-width: 560px;
    margin: 34px auto;
    padding: 26px;
    text-align: center;
    border: 1px dashed #d7e0e8;
    border-radius: 14px;
    color: #44586b;
}

    .act-empty i[b-k18pqtanpc] {
        font-size: 28px;
        color: #9fb2c2;
    }

    .act-empty h5[b-k18pqtanpc] {
        margin: 10px 0 6px;
        font-size: 16px;
        font-weight: 700;
        color: #0d3350;
    }

    .act-empty p[b-k18pqtanpc] {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
    }

@media (max-width: 820px) {
    .act-range-spacer[b-k18pqtanpc] {
        display: none;
    }

    .act-range-field[b-k18pqtanpc] {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------------------ Services

   Rows, not cards. A card says "separate object" and these are six variations on one thing that
   are read down a column and compared -- and each carries three buttons, which a 232px card
   could not hold without wrapping them under the name.
*/

.act-svc-head[b-k18pqtanpc] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.act-svc-note[b-k18pqtanpc] {
    color: #667085;
    font-size: 12.5px;
    max-width: 640px;
}

.act-svc-readonly[b-k18pqtanpc] {
    margin: 6px 0 0;
}

.act-svc-list[b-k18pqtanpc] {
    margin: 12px 0 26px;
    border: 1px solid #e3e9ef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.act-svc[b-k18pqtanpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 15px;
    border-bottom: 1px solid #eef2f6;
    flex-wrap: wrap;
}

.act-svc:last-child[b-k18pqtanpc] {
    border-bottom: none;
}

/* Tinted only when it is NOT running. Six tinted rows would be a wall of colour; the point is
   that the one that is off stands out. */
.act-svc-off[b-k18pqtanpc] {
    background: #fffdf7;
}

.act-svc-main[b-k18pqtanpc] {
    flex: 1 1 340px;
    min-width: 0;
}

.act-svc-title[b-k18pqtanpc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.act-svc-name[b-k18pqtanpc] {
    font-weight: 600;
    font-size: 13.5px;
    color: #101828;
}

.act-svc-state[b-k18pqtanpc] {
    font-size: 12px;
    font-weight: 600;
}

.act-svc-purpose[b-k18pqtanpc] {
    color: #475467;
    font-size: 12.5px;
    margin-top: 3px;
}

.act-svc-meta[b-k18pqtanpc] {
    color: #667085;
    font-size: 12px;
    margin-top: 3px;
}

.act-svc-pending[b-k18pqtanpc] {
    color: #08629b;
    font-weight: 600;
}

.act-svc-reason[b-k18pqtanpc] {
    font-style: italic;
}

.act-svc-actions[b-k18pqtanpc] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Paused is not stale and not broken -- it is a deliberate state somebody chose, so it gets its
   own colour rather than borrowing the one that means "this job has gone quiet". */
.act-dot-warn[b-k18pqtanpc] { background: #c88a2c; }
.act-state-warn[b-k18pqtanpc] { color: #a05f10; font-weight: 600; }
/* /Pages/CompanyConfigs/DeliveryDestinationEdit.razor.rz.scp.css */
/*  Plain selectors. This page's top-level markup has no single component-scoped ancestor, so
    ::deep rules would compile to "[b-hash] .thing" and match nothing.  */

.sd-wrap[b-i7dehwl7p7] { padding: 0 4px 8px; }

/*  NOT the global .card, and that is a decision rather than a preference.

    .card carries two properties that break this page specifically: overflow: clip crops anything
    extending past the card, so a floating dropdown list is cut off at the card edge and no z-index
    can rescue it; and transform: translateZ(0) creates a stacking context, so the dropdown's own
    z-index is scoped INSIDE the card and cannot paint over a sibling section further down. This
    page is mostly dropdowns. Overriding .card here would fix this page and leave the trap for the
    next one.  */
.sd-card[b-i7dehwl7p7] {
    position: relative;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
    margin-bottom: 16px;
}

/*  No shadow. These are sections of one form, not separate objects to deal with -- a border says
    "grouped" where a shadow says "detached", and five lifted panels made the schedule editor read
    as five tasks. The emphasis is spent on the test result instead, which IS a different kind of
    thing.  */
.sd-card-body[b-i7dehwl7p7] { padding: 18px 20px 20px; }

/*  Two sections abreast on a wide screen, one column below. auto-fit rather than a fixed 1fr 1fr so
    a lone child fills the row instead of sitting in half of it.  */
.sd-row[b-i7dehwl7p7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 0 16px;
    align-items: start;
}

/*  The section heading. This is the half that a dialog could not give these fields: twenty inputs
    are really four decisions, and naming each one is what stops it reading as one long list.  */
.sd-sect[b-i7dehwl7p7] {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #08629B;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f6;
}

.sd-sub[b-i7dehwl7p7] {
    font-size: 11.5px;
    color: #7d8b99;
    line-height: 1.45;
    margin: 10px 0 0;
}

.sd-notfound-head[b-i7dehwl7p7] { font-size: 1rem; font-weight: 600; color: rgb(8, 98, 155); }

/*  An inline aside that sits in the field grid, so it lines up with the control it is about rather
    than floating between rows.  */
.sd-note[b-i7dehwl7p7] {
    align-self: end;
    font-size: 11.5px;
    color: #7d8b99;
    line-height: 1.4;
    padding-bottom: 8px;
}

/* ----------------------------------------------------------------- the test result ---- */

/*  The one lifted element on the page. It is an answer rather than a section, it appears in
    response to something the user did, and it is what they are looking at when it arrives.  */
.sd-test[b-i7dehwl7p7] {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 4px 0 8px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}

.sd-test-head[b-i7dehwl7p7] { display: flex; align-items: center; gap: 9px; font-size: .95rem; }

.sd-test-msg[b-i7dehwl7p7] {
    font-size: .84rem;
    margin-top: 5px;
    line-height: 1.45;
    /*  A refusal can be a whole exception message. It wraps rather than stretching the page. */
    overflow-wrap: anywhere;
}

.sd-test-ok[b-i7dehwl7p7]  { background: rgba(22, 196, 68, .09);  border-color: rgba(22, 196, 68, .32);  color: #0f7a2c; }
.sd-test-bad[b-i7dehwl7p7] { background: rgba(176, 42, 55, .07);  border-color: rgba(176, 42, 55, .30);  color: #8a1f2a; }

.sd-fp[b-i7dehwl7p7] { font-size: .8rem; margin-top: 8px; }
.sd-fp code[b-i7dehwl7p7] { font-size: .78rem; overflow-wrap: anywhere; }

/*  A memo is the one control on this page that must NOT be clamped to the shared field height --
    a private key is many lines and the whole point of the Rows setting is to show them. The
    .omx-uniform-fields rule already exempts .dxbl-memo-edit; this only stops a narrow grid column
    squeezing the box.  */
.omx-modal-form[b-i7dehwl7p7]  .dxbl-memo-edit { min-width: 0; }
/* /Pages/CompanyConfigs/DeliveryDestinations.razor.rz.scp.css */
/*  Plain selectors, no ::deep.

    This page top-level markup is not wrapped in a single component-scoped ancestor, so ::deep
    rules would compile to "[b-hash] .thing" and match nothing -- the mistake made once already in
    CreateQuote.razor.css, where every rule in the file was silently unreachable.  */

.sd-wrap[b-4k9e4r9kpo] {
    padding: 0 4px 24px;
}

.sd-intro[b-4k9e4r9kpo] {
    color: #64748b;
    font-size: .86rem;
    margin: 4px 0 14px;
}

.sd-empty[b-4k9e4r9kpo] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 22px 24px;
    max-width: 640px;
}

.sd-empty p[b-4k9e4r9kpo] {
    color: #64748b;
    font-size: .86rem;
    margin: 8px 0 0;
}

.sd-badge[b-4k9e4r9kpo] {
    margin-left: 8px;
}

.sd-hint[b-4k9e4r9kpo] {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
    margin: 6px 0 0;
}

/*  The connection-test result.

    Given real colour because it is the one thing on this page that reports on the outside world,
    and the difference between "connected" and "refused" is what somebody is looking for.  */
.sd-test[b-4k9e4r9kpo] {
    margin-top: 16px;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .84rem;
    line-height: 1.5;
}

.sd-test-ok[b-4k9e4r9kpo] {
    background: rgba(22, 196, 68, .10);
    border: 1px solid rgba(22, 196, 68, .35);
    color: #0f7a2c;
}

.sd-test-bad[b-4k9e4r9kpo] {
    background: rgba(176, 42, 55, .08);
    border: 1px solid rgba(176, 42, 55, .30);
    color: #8a1f2a;
}

.sd-fp[b-4k9e4r9kpo] {
    margin-top: 8px;
    word-break: break-all;
}

.sd-fp code[b-4k9e4r9kpo] {
    background: rgba(15, 23, 42, .06);
    border-radius: 4px;
    padding: 1px 5px;
}

/*  The provider icon in the Kind column. Colour-neutral: a list of destinations is not a list of
    states, so the icon is here to be recognised at a glance rather than to signal anything.  */
.sd-kind-ico[b-4k9e4r9kpo] {
    color: #64748b;
    margin-right: 7px;
}
/* /Pages/CompanyConfigs/DocumentNumbering.razor.rz.scp.css */
/*
    Plain selectors, no ::deep. This page's markup has no single wrapping element of its own, so a
    ::deep rule would compile to a descendant selector with no scoped ancestor to match and would
    silently never apply.
*/

.dn-pane[b-kpc3op1ik5] {
    padding: 14px 4px 4px;
}

.dn-toolbar[b-kpc3op1ik5] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* Monospaced so a change of one character in a prefix or padding is actually visible when
   comparing two rows, which is the whole reason the preview is on the grid. */
.dn-preview[b-kpc3op1ik5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: rgb(8, 98, 155);
    letter-spacing: 0.02em;
}

.dn-live[b-kpc3op1ik5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #d7e3ec;
    border-radius: 8px;
    background: #f5f9fc;
}

.dn-live-label[b-kpc3op1ik5] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7c8a;
}

.dn-live-value[b-kpc3op1ik5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.35rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
    /* A long prefix plus a date plus twelve digits must not push the popup wider than it is. */
    overflow-wrap: anywhere;
}

.dn-counter[b-kpc3op1ik5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dn-counter-value[b-kpc3op1ik5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}

/* The figure read from the documents themselves rather than the counter. Deliberately quieter
   than the counter it qualifies. */
.dn-counter-used[b-kpc3op1ik5] {
    font-size: 0.75rem;
    color: #8a97a3;
    white-space: nowrap;
}

.dn-warn[b-kpc3op1ik5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid #f0d9a8;
    border-radius: 8px;
    background: #fdf6e6;
    color: #7a5a12;
    font-size: 0.875rem;
}

.dn-denied[b-kpc3op1ik5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px auto;
    max-width: 520px;
    padding: 18px 22px;
    border: 1px solid #e2e8ee;
    border-radius: 10px;
    background: #fff;
    color: #55636f;
}

.dn-denied i[b-kpc3op1ik5] {
    font-size: 1.4rem;
    color: rgb(8, 98, 155);
}

/* A checkbox carries no label of its own, so in a grid of labelled fields it
   sits a label's height too high. This drops it onto the same baseline as the
   controls beside it rather than floating against the row above. */
.dn-checkfield[b-kpc3op1ik5] {
    justify-content: flex-end;
    padding-bottom: 7px;
}
/* /Pages/CompanyConfigs/IntegrationActivity.razor.rz.scp.css */
/*  Plain selectors, no ::deep -- this page's top-level markup has no single component-scoped
    ancestor, so ::deep rules would compile to "[b-hash] .thing" and match nothing.  */

.ia-wrap[b-mewzfb5dk9] { padding: 0 4px 24px; }

/*  The counts. auto-fit rather than four fixed columns, so they stack on a narrow screen instead
    of squeezing four numbers into a phone width.  */
.ia-tiles[b-mewzfb5dk9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 6px 0 14px;
}

/*  A uniform hairline border on every side, and the state carried by the icon.

    NOT an accent stripe down one edge: four cards in a row each wearing a coloured rail reads as
    decoration rather than signal, and the rail fights the border it replaces. The icon says which
    state this is, the figure is tinted to match, and the cards themselves stay a quiet grid.  */
.ia-tile[b-mewzfb5dk9] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
}

.ia-tile-head[b-mewzfb5dk9] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.ia-tile-ico[b-mewzfb5dk9] { font-size: .92rem; color: #94a3b8; line-height: 1; }

.ia-tile-n[b-mewzfb5dk9] { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: #0f172a; margin-top: 6px; }
.ia-tile-l[b-mewzfb5dk9] { font-size: .74rem; color: #64748b; }

/*  Only the states worth acting on get colour. If every tile is coloured then none of them
    carries any signal.  */
.ia-tile-bad  .ia-tile-ico[b-mewzfb5dk9], .ia-tile-bad  .ia-tile-n[b-mewzfb5dk9] { color: #b02a37; }
.ia-tile-warn .ia-tile-ico[b-mewzfb5dk9], .ia-tile-warn .ia-tile-n[b-mewzfb5dk9] { color: #b7791f; }
.ia-tile-ok   .ia-tile-ico[b-mewzfb5dk9] { color: #16c444; }

.ia-scope[b-mewzfb5dk9] { color: #64748b; font-size: .8rem; margin: 0 0 10px; }

.ia-empty[b-mewzfb5dk9] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 22px 24px;
    max-width: 680px;
}

.ia-empty p[b-mewzfb5dk9] { color: #64748b; font-size: .86rem; margin: 8px 0 0; }

/*  Two lines in one cell: what it was doing, and to whom.  */
.ia-cell[b-mewzfb5dk9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 4px;
    line-height: 1.3;
    min-width: 0;
}

.ia-op[b-mewzfb5dk9] { font-weight: 600; }

.ia-target[b-mewzfb5dk9] {
    color: #64748b;
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*  The failing step, under the outcome badge. This is the field somebody is scanning for, so it
    sits directly beneath the verdict rather than in a column of its own further right.  */
.ia-failstep[b-mewzfb5dk9] { color: #8a1f2a; font-size: .74rem; font-weight: 600; }

.ia-ico[b-mewzfb5dk9] { margin-right: 6px; color: #08629B; }
.ia-mini[b-mewzfb5dk9] { margin-left: 6px; font-size: .68rem; }

.ia-open[b-mewzfb5dk9] {
    opacity: .6;
    padding: 2px 6px;
}

.ia-open:hover[b-mewzfb5dk9] { opacity: 1; }
/* /Pages/CompanyConfigs/IntegrationRun.razor.rz.scp.css */
/*  Plain selectors on this page's own markup; ::deep only where a rule has to reach inside
    DxTabs, which is a child component and therefore never carries this page's scope attribute.  */

.ir-notfound[b-azweyj45ud] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 24px;
    max-width: 620px;
}

.ir-notfound p[b-azweyj45ud] { color: #64748b; font-size: .86rem; margin: 8px 0 14px; }

/*  THE VERDICT. Given real weight, because it is the answer to the question the reader arrived
    with and everything else on the page is supporting detail.  */
.ir-verdict[b-azweyj45ud] {
    border-radius: 10px;
    padding: 14px 16px;
    margin: 4px 0 16px;
    border: 1px solid transparent;
}

.ir-verdict-main[b-azweyj45ud] { display: flex; align-items: flex-start; gap: 12px; }
.ir-verdict-ico[b-azweyj45ud] { font-size: 1.3rem; line-height: 1.2; }
.ir-verdict-head[b-azweyj45ud] { font-weight: 700; font-size: 1rem; }
.ir-verdict-at[b-azweyj45ud] { font-weight: 700; margin-left: 6px; }

.ir-verdict-detail[b-azweyj45ud] {
    font-size: .86rem;
    margin-top: 4px;
    line-height: 1.45;
    /*  A failure message can be a whole exception. It wraps rather than stretching the page. */
    overflow-wrap: anywhere;
}

.ir-verdict-bad[b-azweyj45ud]     { background: rgba(176,42,55,.08);  border-color: rgba(176,42,55,.30);  color: #8a1f2a; }
.ir-verdict-warn[b-azweyj45ud]    { background: rgba(183,121,31,.10); border-color: rgba(183,121,31,.35); color: #8a5a12; }
.ir-verdict-ok[b-azweyj45ud]      { background: rgba(22,196,68,.10);  border-color: rgba(22,196,68,.32);  color: #0f7a2c; }
.ir-verdict-running[b-azweyj45ud] { background: rgba(8,98,155,.08);   border-color: rgba(8,98,155,.28);   color: #08629B; }
.ir-verdict-neutral[b-azweyj45ud] { background: rgba(15,23,42,.05);   border-color: rgba(15,23,42,.12);   color: #475569; }

/*  The facts. auto-fit so they reflow rather than being pinned to a column count that only looks
    right at one width.  */
.ir-facts[b-azweyj45ud] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 18px;
    margin-bottom: 16px;
}

.ir-fact[b-azweyj45ud] { display: flex; flex-direction: column; min-width: 0; }
.ir-fact-l[b-azweyj45ud] { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; }
.ir-fact-v[b-azweyj45ud] { font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }

.ir-tab[b-azweyj45ud] { padding: 16px 2px 6px; }
.ir-hint[b-azweyj45ud] { color: #64748b; font-size: .84rem; }

/* ------------------------------------------------------------------ the timeline ---- */

.ir-timeline[b-azweyj45ud] { display: flex; flex-direction: column; gap: 2px; }

/*  A timeline row, not a card -- but it follows the same rule: no coloured rail down the side.
    The severity icon carries the state, and only the two rows worth stopping at get a tint, because
    thirty tinted rows is a wall of colour and the point is that two of them stand out.  */
.ir-event[b-azweyj45ud] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fbfcfd;
}

.ir-event-ico[b-azweyj45ud] { font-size: .9rem; line-height: 1.4; color: #94a3b8; }
.ir-event-body[b-azweyj45ud] { min-width: 0; flex: 1 1 auto; }

.ir-event-head[b-azweyj45ud] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ir-event-step[b-azweyj45ud] { font-weight: 600; font-size: .84rem; }
.ir-event-time[b-azweyj45ud] { color: #94a3b8; font-size: .72rem; font-variant-numeric: tabular-nums; }
.ir-event-el[b-azweyj45ud] { color: #64748b; font-size: .72rem; font-variant-numeric: tabular-nums; }

.ir-event-msg[b-azweyj45ud] {
    font-size: .82rem;
    color: #475569;
    margin-top: 2px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ir-error[b-azweyj45ud]   { background: rgba(176,42,55,.05); }
.ir-error   .ir-event-ico[b-azweyj45ud] { color: #b02a37; }
.ir-warning[b-azweyj45ud] { background: rgba(183,121,31,.06); }
.ir-warning .ir-event-ico[b-azweyj45ud] { color: #b7791f; }
.ir-success .ir-event-ico[b-azweyj45ud] { color: #16c444; }

.ir-ico-error[b-azweyj45ud]   { color: #b02a37; margin-right: 6px; }
.ir-ico-warning[b-azweyj45ud] { color: #b7791f; margin-right: 6px; }
.ir-ico-success[b-azweyj45ud] { color: #16c444; margin-right: 6px; }
.ir-ico-info[b-azweyj45ud]    { color: #94a3b8; margin-right: 6px; }

/* -------------------------------------------------------------------- the summary ---- */

.ir-counts[b-azweyj45ud] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ir-count[b-azweyj45ud] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.ir-count-head[b-azweyj45ud] { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ir-count-ico[b-azweyj45ud] { font-size: .88rem; color: #94a3b8; line-height: 1; }

.ir-count-n[b-azweyj45ud] { font-size: 1.35rem; font-weight: 700; line-height: 1.1; margin-top: 6px; }
.ir-count-l[b-azweyj45ud] { font-size: .72rem; color: #64748b; }

.ir-c-bad  .ir-count-ico[b-azweyj45ud], .ir-c-bad  .ir-count-n[b-azweyj45ud] { color: #b02a37; }
.ir-c-warn .ir-count-ico[b-azweyj45ud], .ir-c-warn .ir-count-n[b-azweyj45ud] { color: #b7791f; }
.ir-c-ok   .ir-count-ico[b-azweyj45ud] { color: #16c444; }

.ir-problems[b-azweyj45ud] { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
/* /Pages/CompanyConfigs/Integrations.razor.rz.scp.css */
/*
    Integrations settings. Plain selectors, no ::deep -- this markup is the page's own and its
    top-level elements have no wrapping component to act as a scoped ancestor.

    Colours come from the app's existing tokens rather than new ones: primary blue for identity,
    the accent green for a provider that is on and reachable, the negative red for a failed
    credential test.
*/

.intg-page[b-rdmetusfle] { padding: 0 4px 40px; }

.intg-intro[b-rdmetusfle] {
    color: #5b6773;
    font-size: 13.5px;
    max-width: 70ch;
    margin: 0 0 22px;
}

.intg-group[b-rdmetusfle] { margin-bottom: 34px; }

.intg-group-title[b-rdmetusfle] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: rgb(8, 98, 155);
    margin: 0 0 4px;
}

.intg-group-title i[b-rdmetusfle] { font-size: 16px; }

.intg-count[b-rdmetusfle] {
    background: #eef2f6;
    color: #5b6773;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
}

.intg-group-note[b-rdmetusfle] {
    color: #6b7784;
    font-size: 12.5px;
    margin: 0 0 14px;
    max-width: 70ch;
}

.intg-cards[b-rdmetusfle] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.intg-card[b-rdmetusfle] {
    background: #fff;
    border: 1px solid #e4eaf1;
    border-radius: 10px;
    padding: 15px 17px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* An inactive provider reads as present but dormant rather than broken. */
.intg-card.off[b-rdmetusfle] { background: #fafbfc; border-color: #e9edf2; }
.intg-card.on[b-rdmetusfle]  { border-color: #cfe2f0; }

.intg-card-head[b-rdmetusfle] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.intg-name[b-rdmetusfle] { font-weight: 600; font-size: 14.5px; }

.intg-badge[b-rdmetusfle] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 2px 8px;
}

.intg-badge-on[b-rdmetusfle]      { background: #e6f6ec; color: #16c444; }
.intg-badge-off[b-rdmetusfle]     { background: #eef1f4; color: #8a95a1; }
.intg-badge-default[b-rdmetusfle] { background: #eaf3fa; color: rgb(8, 98, 155); }

.intg-card-body[b-rdmetusfle] { display: flex; flex-direction: column; gap: 5px; }

.intg-row[b-rdmetusfle] { display: flex; gap: 10px; font-size: 12.5px; }

.intg-label[b-rdmetusfle] { color: #8a95a1; min-width: 84px; }

.intg-value[b-rdmetusfle] { color: #42505e; font-variant-numeric: tabular-nums; }
.intg-value.set[b-rdmetusfle]   { color: #16c444; font-weight: 600; }
.intg-value.unset[b-rdmetusfle] { color: #8a95a1; font-style: italic; }

.intg-notes[b-rdmetusfle] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6b7784;
    line-height: 1.45;
}

.intg-card-actions[b-rdmetusfle] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    border-top: 1px dotted #e2e8f0;
    padding-top: 8px;
    margin-top: auto;
}

/* Result of a live credential check, kept beneath the card that produced it. */
.intg-test[b-rdmetusfle] {
    font-size: 12px;
    border-radius: 7px;
    padding: 8px 10px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.45;
    word-break: break-word;
}

.intg-test.ok[b-rdmetusfle]  { background: #e6f6ec; color: #0f8a37; }
.intg-test.bad[b-rdmetusfle] { background: #fdecee; color: #b02a37; }

.intg-test-ms[b-rdmetusfle] {
    margin-left: auto;
    opacity: .7;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.intg-hint[b-rdmetusfle] { color: #8a95a1; font-weight: 400; font-size: 11.5px; }

.intg-checkrow[b-rdmetusfle] { margin-top: 6px; }

.intg-empty[b-rdmetusfle] { color: #8a95a1; font-style: italic; }
/* /Pages/CompanyConfigs/ManageCoupons.razor.rz.scp.css */

/* ---------------------------------------------------------------- emailing a coupon */

.cpn-recip-head[b-rffe225jej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .85rem;
    margin: 10px 0 6px;
}

.cpn-recip-search[b-rffe225jej] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dbe3ea;
    border-radius: 18px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.cpn-recip-search i[b-rffe225jej] {
    color: #98a2b3;
    font-size: .85rem;
}

.cpn-recip-search input[b-rffe225jej] {
    flex: 1;
    border: none;
    outline: none;
    padding: 7px 0;
    font-size: .875rem;
    min-width: 0;
}

/* Bounded and scrolled: the list runs to thousands of customers, and a popup that grows with it
   would push its own send button off the screen. */
.cpn-recip-list[b-rffe225jej] {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.cpn-recip[b-rffe225jej] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    font-size: .875rem;
}

.cpn-recip:last-child[b-rffe225jej] {
    border-bottom: none;
}

.cpn-recip:hover[b-rffe225jej] {
    background: #f8fafc;
}

.cpn-recip-name[b-rffe225jej] {
    font-weight: 600;
    color: #0f172a;
}

.cpn-recip-email[b-rffe225jej] {
    color: #64748b;
    margin-left: auto;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpn-outcome-title[b-rffe225jej] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin: 10px 0 4px;
}

.cpn-outcome[b-rffe225jej] {
    max-height: 190px;
    overflow-y: auto;
    margin: 0;
    padding-left: 18px;
    font-size: .86rem;
}

.cpn-outcome li[b-rffe225jej] {
    margin-bottom: 5px;
}
/* /Pages/CompanyConfigs/OrganizationEdit.razor.rz.scp.css */
/*
    Plain selectors, no ::deep -- this page's top-level markup has no single wrapping element that
    carries the scope attribute, so a ::deep rule here would compile to a selector that never
    matches. Same reason CreateQuote.razor.css is written this way.
*/

/* The count sits in the heading now rather than in a box of its own, so it reads as
   "Locations in this organization: 3" instead of a number with no subject. */
.oe-count[b-8fi3m69rcw] {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .45rem;
    border-radius: 10px;
    background: #eef4f9;
    color: rgb(8, 98, 155);
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* An empty grid reads as "this is broken". A sentence saying how a location joins an
   organization reads as "nothing here yet, and here is what to do about it". */
.oe-empty[b-8fi3m69rcw] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fbfcfd;
}

.oe-empty i[b-8fi3m69rcw] {
    font-size: 1.2rem;
    color: rgb(8, 98, 155);
    line-height: 1.4;
}
/* /Pages/CompanyConfigs/Organizations.razor.rz.scp.css */
/*
    Plain selectors, no ::deep -- this page's top-level markup has no single wrapping element
    carrying the scope attribute, so a ::deep rule would compile to a selector that never matches.
*/

/*
    A plain number, not a badge.

    The previous .org-count wrapped this in a pill with a near-white ground (#eef4f9). DevExpress
    fills the focused row with the theme's purple and the pill kept its own background on top,
    so selecting a row turned its count into a white disc with unreadable text inside it. Colour
    on a cell that sits inside a row fill has to survive that fill; plain text inherits it.
*/
.org-count-n[b-uoxphv5196] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/*
    The empty state for the locations grid. Sized and spaced like a grid so that "nothing here"
    occupies roughly where the rows would be, rather than collapsing the page and leaving the
    heading floating above nothing.
*/
.org-empty[b-uoxphv5196] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: 18px 16px;
    margin-bottom: 10px;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #fbfcfd;
    color: #5a6068;
    font-size: .88rem;
}

.org-empty .bi[b-uoxphv5196] {
    color: rgb(8, 98, 155);
}
/* /Pages/CompanyConfigs/ScheduledTasks.razor.rz.scp.css */
/* Plain selectors, no ::deep -- this page's top-level markup is a set of siblings with no single
   wrapping ancestor, so ::deep rules would compile to a selector that never matches anything.
   See the CreateQuote.razor.css lesson in CLAUDE.md. */

.sch-sub[b-m5d35yd2vj] {
    font-size: 11.5px;
    color: #7d8b99;
    line-height: 1.35;
    margin-top: 2px;
}

.sch-muted[b-m5d35yd2vj] {
    color: #98a2b3;
}

.sch-section-title[b-m5d35yd2vj] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #55636f;
    margin: 20px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eef2f6;
}

/* The recurrence read back as a sentence, with the actual first run. A schedule that can never
   fire is otherwise completely silent -- it sits in the list looking healthy and simply never
   runs, which is only noticed when somebody asks where last week's report went. */
.sch-preview[b-m5d35yd2vj] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 2px;
    padding: 10px 13px;
    background: #eef5fb;
    border-left: 3px solid rgb(8, 98, 155);
    border-radius: 7px;
    font-size: 12.5px;
    color: #1f2933;
    line-height: 1.5;
}

    .sch-preview i[b-m5d35yd2vj] {
        color: rgb(8, 98, 155);
        margin-top: 1px;
    }

.sch-preview-bad[b-m5d35yd2vj] {
    background: #fdecec;
    border-left-color: #b02a37;
    color: #b02a37;
}

    .sch-preview-bad i[b-m5d35yd2vj] {
        color: #b02a37;
    }

.sch-hint[b-m5d35yd2vj] {
    font-size: 11.5px;
    color: #7d8b99;
    line-height: 1.45;
    margin-top: 5px;
}

/* Day checkboxes as a wrapping row of pills rather than a multi-select, so which days are on is
   readable without opening anything. */
.sch-days[b-m5d35yd2vj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sch-day[b-m5d35yd2vj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 20px;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}

    .sch-day:hover[b-m5d35yd2vj] {
        border-color: rgb(8, 98, 155);
    }

    .sch-day input[b-m5d35yd2vj] {
        margin: 0;
        cursor: pointer;
    }

.sch-empty[b-m5d35yd2vj] {
    text-align: center;
    padding: 44px 24px;
    color: #7d8b99;
}

    .sch-empty i[b-m5d35yd2vj] {
        font-size: 30px;
        color: #c2ccd6;
        display: block;
        margin-bottom: 12px;
    }

    .sch-empty h5[b-m5d35yd2vj] {
        color: #1f2933;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .sch-empty p[b-m5d35yd2vj] {
        max-width: 54ch;
        margin: 0 auto;
        font-size: 13px;
        line-height: 1.6;
    }
/* /Pages/CompanyConfigs/ScheduleEdit.razor.rz.scp.css */
/* Its own copy of the .sch-* classes, not a shared file.

   Blazor CSS isolation does not cascade between components: a rule written in
   ScheduledTasks.razor.css compiles to a selector carrying THAT component's scope attribute and
   will never match anything rendered here, however identical the class names look. Duplicating the
   small block is the established answer in this codebase -- see the CreateQuote.razor.css lesson
   in CLAUDE.md, where exactly this assumption left a page rendering completely unstyled.

   Plain selectors, no ::deep: this page's top-level markup has no single wrapping ancestor, so
   ::deep would compile to a selector that can never match. */

.sch-tabs[b-tnu4o05ka2] {
    margin-top: 4px;
}

.section-title[b-tnu4o05ka2] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #55636f;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef2f6;
}

/*  Its own section class rather than the global .card, and the reason is concrete.

    .card in app.css carries two properties that break any dropdown placed inside it:

      overflow: clip          crops anything extending past the card, so a combo box's floating
                              result list is cut off at the card's edge. No z-index can beat a
                              clip.
      transform: translateZ(0)  a transform creates a containing block AND a new stacking context,
                              so the dropdown's z-index: 9999 is scoped INSIDE the card and cannot
                              paint above a sibling card that comes later in the document.

    Together they are why the Report picker rendered behind the fields below it. Overriding .card
    here would fix this page and leave the trap in place for the next one; not using it avoids
    both. Same surface, no clipping, no stacking context.  */
.sch-card[b-tnu4o05ka2] {
    position: relative;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
    margin-bottom: 16px;
}

/*  No shadow, deliberately. Five stacked lifted panels made a form of ordinary fields read as five
    separate objects to deal with; a border is enough to separate sections that are plainly part of
    one form. The shadow is kept for the caution block below, which IS a different kind of thing --
    spending the emphasis in one place rather than on everything. */
.sch-card-body[b-tnu4o05ka2] {
    padding: 18px 20px 20px;
}

/*  Two sections abreast on a wide screen, one column below it. auto-fit rather than a fixed 1fr 1fr
    so a single child (the not-found card) still fills the row instead of sitting in half of it. */
.sch-row[b-tnu4o05ka2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 0 16px;
    align-items: start;
}

.sch-sub[b-tnu4o05ka2] {
    font-size: 11.5px;
    color: #7d8b99;
    line-height: 1.35;
    margin-top: 2px;
}

.sch-muted[b-tnu4o05ka2] {
    color: #98a2b3;
}

/* The recurrence read back as a sentence, with the real first run. A schedule that can never fire
   is otherwise completely silent -- it sits in the list looking healthy and simply never runs. */
.sch-preview[b-tnu4o05ka2] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 2px;
    padding: 10px 13px;
    background: #eef5fb;
    border-left: 3px solid rgb(8, 98, 155);
    border-radius: 7px;
    font-size: 12.5px;
    color: #1f2933;
    line-height: 1.5;
}

    .sch-preview i[b-tnu4o05ka2] {
        color: rgb(8, 98, 155);
        margin-top: 1px;
    }

.sch-preview-bad[b-tnu4o05ka2] {
    background: #fdecec;
    border-left-color: #b02a37;
    color: #b02a37;
}

    .sch-preview-bad i[b-tnu4o05ka2] {
        color: #b02a37;
    }

.sch-hint[b-tnu4o05ka2] {
    font-size: 11.5px;
    color: #7d8b99;
    line-height: 1.45;
    margin-top: 5px;
}

/* Day checkboxes as a wrapping row of pills rather than a multi-select, so which days are on is
   readable without opening anything. */
.sch-days[b-tnu4o05ka2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sch-day[b-tnu4o05ka2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 20px;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}

    .sch-day:hover[b-tnu4o05ka2] {
        border-color: rgb(8, 98, 155);
    }

    .sch-day input[b-tnu4o05ka2] {
        margin: 0;
        cursor: pointer;
    }

/* Filters sit on the section heading's own row, so they read as belonging to that grid rather
   than to the page. */
.sch-runs-head[b-tnu4o05ka2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sch-runs-filters[b-tnu4o05ka2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sch-date[b-tnu4o05ka2] {
    max-width: 150px;
}

.sch-inline-empty[b-tnu4o05ka2] {
    padding: 22px 4px;
    color: #7d8b99;
    font-size: 13px;
}

.sch-notfound[b-tnu4o05ka2] {
    text-align: center;
    padding: 44px 24px;
    color: #7d8b99;
}

    .sch-notfound i[b-tnu4o05ka2] {
        font-size: 30px;
        color: #c2ccd6;
        display: block;
        margin-bottom: 12px;
    }

    .sch-notfound h5[b-tnu4o05ka2] {
        color: #1f2933;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .sch-notfound p[b-tnu4o05ka2] {
        max-width: 54ch;
        margin: 0 auto 16px;
        font-size: 13px;
        line-height: 1.6;
    }

/* ------------------------------------------------------------------ what it covers ---- */

/* A heading inside a card, below the section title. The date range and the filters are two
   different things and reading as one list made the card hard to scan. */
.sch-subhead[b-tnu4o05ka2] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d8b99;
    margin: 14px 0 8px;
}

.sch-hint-block[b-tnu4o05ka2] {
    margin-bottom: 12px;
}

/* Amber, not red. Nothing is wrong yet -- it is saying what will happen if these are left alone,
   which is a decision to make rather than an error to fix. */
.sch-warn[b-tnu4o05ka2] {
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #6b4e00;
    margin-bottom: 12px;
}

.sch-filter[b-tnu4o05ka2] {
    border: 1px solid #e4eaf0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fbfdff;
}

.sch-filter-head[b-tnu4o05ka2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 9px;
}

.sch-filter-name[b-tnu4o05ka2] {
    font-weight: 600;
    color: #1f2933;
}

.sch-filter-op[b-tnu4o05ka2] {
    font-size: 12px;
    color: #7d8b99;
}

/* Marks the filters that have nobody to answer them on a schedule. Deliberately quiet: it is a
   label, not a warning -- the warning above the list is where the consequence is explained. */
.sch-filter-prompt[b-tnu4o05ka2] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(8, 98, 155);
    background: #eaf3fa;
    border-radius: 999px;
    padding: 2px 8px;
}

.sch-filter-mode[b-tnu4o05ka2] {
    width: 100%;
    max-width: 420px;
}

.sch-filter-body[b-tnu4o05ka2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    max-width: 560px;
}

.sch-filter-body-col[b-tnu4o05ka2] {
    flex-direction: column;
    align-items: stretch;
}

.sch-filter-to[b-tnu4o05ka2] {
    font-size: 12px;
    color: #7d8b99;
}

.sch-rdp[b-tnu4o05ka2] {
    margin-top: 8px;
    max-width: 560px;
}

/* --------------------------------------------------------------- payment reminders ---- */

/* An amber left edge on the card that decides whether real customers get emailed. The rest of the
   form is ordinary configuration; this part is not, and it should not look the same. */
/*  The one section that is a different kind of thing -- it governs whether real messages leave the
    building -- so it keeps the emphasis the others gave up. */
.sch-card-caution[b-tnu4o05ka2] {
    border-left: 4px solid #f0b429;
    box-shadow: 0 4px 14px rgba(240, 180, 41, .14);
}

.sch-check[b-tnu4o05ka2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #1f2933;
}

.sch-check input[b-tnu4o05ka2] {
    margin-top: 2px;
}

/*  Filename tokens, listed under the pattern box.

    Inline-block rather than a list so six of them wrap into two or three tidy lines instead of a
    six-line column that pushes the retry fields off the fold.  */
.sch-token[b-tnu4o05ka2] {
    display: inline-block;
    margin: 2px 14px 2px 0;
    white-space: nowrap;
}

.sch-token code[b-tnu4o05ka2] {
    background: rgba(15, 23, 42, .06);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 4px;
}

/*  A hint that is a caution rather than an explanation -- an unpinned host key is a real gap, not
    a detail, so it does not read the same as the rest.  */
.sch-hint-warn[b-tnu4o05ka2] {
    background: rgba(183, 121, 31, .10);
    border-left: 3px solid rgba(183, 121, 31, .55);
    border-radius: 4px;
    color: #8a5a12;
    padding: 8px 10px;
}
/* /Pages/CompanyConfigs/WalletSettings.razor.rz.scp.css */
/*
    Plain selectors, no ::deep -- this page's top-level markup has no single wrapping element that
    carries the scope attribute, so a ::deep rule would compile to a selector matching nothing.

    Card style follows the standing rule: a uniform hairline border on every side, colour carried
    by the icon, never an accent stripe down one edge.
*/

.ws-page[b-5h41m59y7c] {
    padding: 0 .25rem 1.5rem;
}

/* The verdict is the one place colour fills a surface, because it is the one line that says
   whether the whole thing works. Everything below it is a hairline card. */
.ws-verdict[b-5h41m59y7c] {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.ws-verdict i[b-5h41m59y7c] {
    font-size: 1.4rem;
}

.ws-verdict-head[b-5h41m59y7c] {
    font-weight: 600;
    font-size: 1rem;
}

.ws-verdict-sub[b-5h41m59y7c] {
    font-size: .85rem;
    opacity: .85;
}

.ws-verdict-actions[b-5h41m59y7c] {
    margin-left: auto;
}

.ws-verdict-ok[b-5h41m59y7c] {
    background: #eefaf1;
    border-color: #bfe6cb;
    color: #14532d;
}

.ws-verdict-bad[b-5h41m59y7c] {
    background: #fdf3f3;
    border-color: #f0c6c6;
    color: #7f1d1d;
}

.ws-test[b-5h41m59y7c] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #fbfcfd;
}

.ws-test i[b-5h41m59y7c] {
    font-size: 1.05rem;
    line-height: 1.35;
}

.ws-test-ok i[b-5h41m59y7c] {
    color: #16c444;
}

.ws-test-bad i[b-5h41m59y7c] {
    color: #b02a37;
}

/* Two up on a wide screen, stacked below 1100px -- the credential and the schedule are read
   together when something is wrong. */
.ws-columns[b-5h41m59y7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.ws-card[b-5h41m59y7c] {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    background: #fff;
    min-width: 0;
}

.ws-card-title[b-5h41m59y7c] {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .6rem;
}

.ws-count[b-5h41m59y7c] {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: 10px;
    background: #eef4f9;
    color: rgb(8, 98, 155);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.ws-kv[b-5h41m59y7c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-bottom: .8rem;
}

.ws-kv label[b-5h41m59y7c] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.ws-kv span[b-5h41m59y7c] {
    font-size: .9rem;
}

/* A pass/fail row. Tinted only for the states that need attention, so a healthy page is mostly
   white and the one row that matters stands out. */
.ws-check[b-5h41m59y7c] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: .6rem;
}

.ws-check i[b-5h41m59y7c] {
    font-size: 1rem;
    line-height: 1.35;
}

.ws-ok i[b-5h41m59y7c] {
    color: #16c444;
}

.ws-bad[b-5h41m59y7c] {
    background: #fdf3f3;
    border-color: #f0c6c6;
}

.ws-bad i[b-5h41m59y7c] {
    color: #b02a37;
}

.ws-warn[b-5h41m59y7c] {
    background: #fffaf0;
    border-color: #f2e2c4;
}

.ws-warn i[b-5h41m59y7c] {
    color: #b8860b;
}

.ws-text-bad[b-5h41m59y7c] {
    color: #b02a37;
    font-weight: 600;
}

.ws-text-warn[b-5h41m59y7c] {
    color: #b8860b;
    font-weight: 600;
}

.ws-card-actions[b-5h41m59y7c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid #f1f3f5;
}

/* The schedule's own last-run sentence, which can run long. */
.ws-detail[b-5h41m59y7c] {
    font-size: .8rem;
    color: #495057;
    background: #f8f9fa;
    border-radius: 6px;
    padding: .5rem .65rem;
    line-height: 1.4;
}

/* A PassKit id is an opaque token -- it should look like one and never wrap mid-string. */
.ws-id[b-5h41m59y7c] {
    font-size: .78rem;
    background: #f1f3f5;
    padding: .1rem .35rem;
    border-radius: 4px;
    white-space: nowrap;
}
/* /Pages/Components/AdvancedOMXComboBox.razor.rz.scp.css */
/* Modernized to match GlobalSearchBar.razor's visual language (Pages/Components/GlobalSearchBar.razor.css)
   -- pill input, inline spinner, rounded shadowed dropdown, icon+title+subtitle result rows. This
   component is product-search-specific in every real usage (POSHeaderBar.razor, ProductBar.razor,
   POEdit.razor's line-item picker) -- customer search is a fully separate, independently
   duplicated component (CustomerLookUp.razor/.razor.css), unaffected by anything in this file. */

.omx-combobox[b-b43dpxgvj7] {
    position: relative;
}

.omx-combobox-wrapper[b-b43dpxgvj7] {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 0.875rem;
}

.omx-search-form[b-b43dpxgvj7] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 7px 14px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow .15s ease;
    box-sizing: border-box;
}

    .omx-combobox-wrapper:focus-within .omx-search-form[b-b43dpxgvj7] {
        box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35);
    }

.omx-search-icon[b-b43dpxgvj7] {
    color: #98a2b3;
    font-size: 14px;
    flex: 0 0 auto;
}

.omx-search-input[b-b43dpxgvj7] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    padding: 3px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
    height: auto;
}

    .omx-search-input[b-b43dpxgvj7]::placeholder {
        color: #adb5bd;
    }

.omx-search-spinner[b-b43dpxgvj7] {
    width: 13px;
    height: 13px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: omx-search-spin-b-b43dpxgvj7 .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes omx-search-spin-b-b43dpxgvj7 {
    to { transform: rotate(360deg); }
}

.omx-search-clear[b-b43dpxgvj7] {
    border: none;
    background: transparent;
    color: #c4ccd4;
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    transition: color .1s ease;
}

    .omx-search-clear:hover[b-b43dpxgvj7] {
        color: #f63f3f;
    }

.omx-search-dropdown[b-b43dpxgvj7] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}

.omx-search-empty[b-b43dpxgvj7] {
    padding: 20px 16px;
    font-size: 13px;
    color: #6c757d;
    text-align: center;
}

.omx-search-result[b-b43dpxgvj7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background-color .1s ease;
}

    .omx-search-result:hover[b-b43dpxgvj7],
    .omx-search-result.highlighted[b-b43dpxgvj7] {
        background: #f7f9fb;
    }

    .omx-search-result.active[b-b43dpxgvj7] {
        background: #e5f0f7;
    }

.omx-search-result-icon[b-b43dpxgvj7] {
    color: rgb(8, 98, 155);
    font-size: 14px;
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
}

.omx-search-result-text[b-b43dpxgvj7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.omx-search-result-title[b-b43dpxgvj7] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-search-result-subtitle[b-b43dpxgvj7] {
    font-size: 12px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-search-result-price[b-b43dpxgvj7] {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: rgb(8, 98, 155);
}
/* /Pages/Components/AssistantChart.razor.rz.scp.css */
/*
    Scoped to this component, plain selectors only.

    An earlier draft reached into the chart's own DOM with `::deep .dxbl-chart`. That class name
    appears nowhere else in this application -- it was guessed, and a guessed selector either does
    nothing or fights DevExpress's own layout, with no browser here to tell which. The dashboards
    have solved this already and solved it more simply: .dashboard-chart-box in app.css is a bare
    container with an explicit height, and the chart fills it unaided. Same approach here.
*/

.ai-chart[b-bojl1yrmxy] {
    margin: 10px 0 4px;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px 8px;
}

.ai-chart-title[b-bojl1yrmxy] {
    font-size: .82rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
    margin-bottom: 6px;
}

/*
    The explicit height is required, not tidiness: a DevExpress chart has no useful intrinsic
    height, so without one it collapses to nothing. 260px rather than the dashboards' 320px
    because this sits in a chat bubble beside the text it supports, not in a card of its own.
*/
.ai-chart-box[b-bojl1yrmxy] {
    height: 260px;
    max-width: 100%;
    /*
        The chart is also given Height/Width parameters, which is what DevExpress measures.
        This is belt and braces: overflow:hidden means that if the drawing surface ever
        disagrees with the space reserved for it, it is clipped rather than allowed to spill
        over the text underneath -- which is exactly how it failed before.
    */
    overflow: hidden;
}

.ai-chart-actions[b-bojl1yrmxy] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}

.ai-chart-btn[b-bojl1yrmxy] {
    border: 0;
    background: transparent;
    padding: 2px 0;
    font-size: .74rem;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ai-chart-btn:hover[b-bojl1yrmxy] {
    color: rgb(8, 98, 155);
}

.ai-chart-data[b-bojl1yrmxy] {
    margin-top: 4px;
    max-height: 260px;
    overflow: auto;
}

@media (max-width: 700px) {
    .ai-chart-box[b-bojl1yrmxy] {
        height: 220px;
    }
}
/* /Pages/Components/CustomerLookUp.razor.rz.scp.css */
/*
    The customer lookup, matched to the product lookup.

    These rules are copied verbatim from AdvancedOMXComboBox.razor.css, not shared. Blazor CSS
    isolation gives each component its own stylesheet with no cascade between them, so a
    duplicate is the only way to make two components genuinely look the same -- the same
    trade-off already recorded in this project for the .cqv-* QuickView classes. Copying rather
    than approximating is the point: an approximation drifts, and these two sit side by side on
    the register where any difference is obvious.

    Everything the previous markup styled -- .input-group, .omx-input, .omx-btn-clear,
    .omx-btn-dropdown, .omx-dropdown, .dropdown-item, .loading-indicator, .customer-dropdown --
    is gone, because that markup is gone. These rules are scoped to this component alone, so
    nothing else could have been relying on them.

    @keyframes omx-search-spin appears in both files under the same name. That is safe: Blazor
    rewrites animation names per component, so the two do not collide.
*/

.omx-combobox[b-vj9sgb5ikh] {
    position: relative;
}

.omx-combobox-wrapper[b-vj9sgb5ikh] {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 0.875rem;
}

.omx-search-form[b-vj9sgb5ikh] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 7px 14px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow .15s ease;
    box-sizing: border-box;
}

    .omx-combobox-wrapper:focus-within .omx-search-form[b-vj9sgb5ikh] {
        box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35);
    }

.omx-search-icon[b-vj9sgb5ikh] {
    color: #98a2b3;
    font-size: 14px;
    flex: 0 0 auto;
}

.omx-search-input[b-vj9sgb5ikh] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    padding: 3px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
    height: auto;
}

    .omx-search-input[b-vj9sgb5ikh]::placeholder {
        color: #adb5bd;
    }

.omx-search-spinner[b-vj9sgb5ikh] {
    width: 13px;
    height: 13px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: omx-search-spin-b-vj9sgb5ikh .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes omx-search-spin-b-vj9sgb5ikh {
    to { transform: rotate(360deg); }
}

.omx-search-clear[b-vj9sgb5ikh] {
    border: none;
    background: transparent;
    color: #c4ccd4;
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    transition: color .1s ease;
}

    .omx-search-clear:hover[b-vj9sgb5ikh] {
        color: #f63f3f;
    }

.omx-search-dropdown[b-vj9sgb5ikh] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}

.omx-search-empty[b-vj9sgb5ikh] {
    padding: 20px 16px;
    font-size: 13px;
    color: #6c757d;
    text-align: center;
}

.omx-search-result[b-vj9sgb5ikh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background-color .1s ease;
}

    .omx-search-result:hover[b-vj9sgb5ikh],
    .omx-search-result.highlighted[b-vj9sgb5ikh] {
        background: #f7f9fb;
    }

    .omx-search-result.active[b-vj9sgb5ikh] {
        background: #e5f0f7;
    }

.omx-search-result-icon[b-vj9sgb5ikh] {
    color: rgb(8, 98, 155);
    font-size: 14px;
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
}

.omx-search-result-text[b-vj9sgb5ikh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.omx-search-result-title[b-vj9sgb5ikh] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-search-result-subtitle[b-vj9sgb5ikh] {
    font-size: 12px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-search-result-price[b-vj9sgb5ikh] {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: rgb(8, 98, 155);
}
/* /Pages/Components/CustomerQuickView.razor.rz.scp.css */
.cqv-header[b-eo84owp5sp] {
    margin-bottom: .75rem;
}

.cqv-name[b-eo84owp5sp] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.cqv-sub[b-eo84owp5sp] {
    font-size: .85rem;
    color: #6c757d;
}

.cqv-divider[b-eo84owp5sp] {
    margin: .75rem 0;
}

.cqv-grid[b-eo84owp5sp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem 1rem;
}

.cqv-grid label[b-eo84owp5sp] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.cqv-grid span[b-eo84owp5sp] {
    font-size: .9rem;
}

.cqv-negative[b-eo84owp5sp] {
    color: #b02a37;
}
/* /Pages/Components/EntityAuditPanel.razor.rz.scp.css */
/*
    Plain selectors, no ::deep. This component has no single wrapping ancestor that Blazor renders
    around the DevExpress children, so ::deep rules would compile to [b-xxx] .foo and match
    nothing -- the trap documented at length for CreateQuote.razor.css.
*/

.eap[b-iifux4xic7] {
    margin-bottom: 8px;
}

/* Chips out here say what is filtering now that the controls are behind a button. Without them
   a short list reads as a short history rather than a filtered one. */
.eap-chips[b-iifux4xic7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    flex-wrap: wrap;
}

.eap-chip[b-iifux4xic7] {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 0.76rem;
    color: #344054;
    white-space: nowrap;
}

.eap-link[b-iifux4xic7] {
    color: rgb(8, 98, 155);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.82rem;
    margin-left: 8px;
}

.eap-link:hover[b-iifux4xic7] {
    color: #16c444;
    font-weight: 600;
}

.eap-exports[b-iifux4xic7] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid #e4e7ec;
}

/* The scope line and the export buttons sit on one row: what you are looking at, and how to take
   it with you. */
.eap-bar[b-iifux4xic7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 2px 10px 2px;
    font-size: 0.85rem;
}

/* min-width: 0 or a long chip row refuses to shrink and pushes the buttons off the end -- the
   flex child default that catches every row like this. */
.eap-scope[b-iifux4xic7] {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}


.eap-actions[b-iifux4xic7] {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Content-sized, capped. Without this the blanket .dxbl-grid { height: 750px } in app.css makes
   an eight-row history reserve most of the screen. */
.eap-grid[b-iifux4xic7] {
    max-height: 420px !important;
}

.eap-empty[b-iifux4xic7],
.eap-error[b-iifux4xic7] {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 18px 20px;
    background: #fcfcfd;
}

.eap-empty p[b-iifux4xic7] {
    margin: 0 0 6px 0;
}

.eap-empty p:last-child[b-iifux4xic7] {
    margin-bottom: 0;
}

.eap-error[b-iifux4xic7] {
    border-color: #f3c6c6;
    background: #fdf3f3;
    color: #b02a37;
}

/* Action is a short controlled word, so it reads better as a tag than as a bare cell. Colour
   only on the two that matter -- everything tinted is nothing signalled. */
.eap-tag[b-iifux4xic7] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid #d0d5dd;
    background: #f9fafb;
    font-size: 0.76rem;
    font-weight: 600;
    color: #344054;
    white-space: nowrap;
}

.eap-tag-create[b-iifux4xic7] {
    border-color: #a6e6bd;
    background: #eefbf3;
    color: #12783d;
}

.eap-tag-ok[b-iifux4xic7] {
    border-color: #a6e6bd;
    background: #eefbf3;
    color: #12783d;
}

.eap-tag-danger[b-iifux4xic7] {
    border-color: #f3c6c6;
    background: #fdf3f3;
    color: #b02a37;
}

/* Before and after are the point of the row, so they are told apart at a glance rather than by
   reading the column header each time. */
.eap-before[b-iifux4xic7] {
    color: #b02a37;
}

.eap-after[b-iifux4xic7] {
    color: #12783d;
}
/* /Pages/Components/FulfilmentQueueView.razor.rz.scp.css */

/*  Shown when the queue is genuinely empty (not merely filtered). An empty picking queue is a
    good outcome; column headers over "No data to display" read like a failed load instead. */
.fq-empty[b-bg1pwszqly] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 4px 0 10px;
    border: 1px solid #d9e2ec;
    border-left: 3px solid var(--omx-accent-green, #16c444);
    border-radius: 8px;
    background: #f8fafc;
    color: #4a5a6a;
    font-size: 13px;
}

.fq-empty i[b-bg1pwszqly] {
    font-size: 20px;
    color: var(--omx-accent-green, #16c444);
    line-height: 1.2;
}

.fq-empty strong[b-bg1pwszqly] { color: #22303c; }
/* /Pages/Components/GlobalSearchBar.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- everything here is this component's own direct markup. */

.gsearch-wrap[b-vnwv5mjdpg] {
    position: relative;
    width: 100%;
    max-width: 520px;
}

/* Opt-in bigger treatment for a prominent host like Dashboard's banner -- same component,
   same dropdown/debounce logic, just sized to match its surroundings (mirrors the sizing the
   Dashboard banner's own now-retired .dash-search used). */
.gsearch-wrap.gsearch-large[b-vnwv5mjdpg] {
    max-width: 640px;
    margin: 0 auto;
}

    .gsearch-wrap.gsearch-large .gsearch-form[b-vnwv5mjdpg] {
        border-radius: 12px;
        padding: 10px 10px 10px 18px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }

    .gsearch-wrap.gsearch-large .gsearch-icon[b-vnwv5mjdpg] {
        font-size: 15px;
    }

    .gsearch-wrap.gsearch-large .gsearch-input[b-vnwv5mjdpg] {
        font-size: 14px;
        padding: 5px 0;
    }

.gsearch-form[b-vnwv5mjdpg] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 7px 14px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

    .gsearch-form i.gsearch-icon[b-vnwv5mjdpg] {
        color: #98a2b3;
        font-size: 14px;
        flex: 0 0 auto;
    }

.gsearch-input[b-vnwv5mjdpg] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 13.5px;
    padding: 3px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
}

    .gsearch-input[b-vnwv5mjdpg]::placeholder {
        color: #adb5bd;
    }

.gsearch-spinner[b-vnwv5mjdpg] {
    width: 13px;
    height: 13px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: gsearch-spin-b-vnwv5mjdpg .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes gsearch-spin-b-vnwv5mjdpg {
    to { transform: rotate(360deg); }
}

.gsearch-dropdown[b-vnwv5mjdpg] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 0;
}

.gsearch-empty[b-vnwv5mjdpg] {
    padding: 20px 16px;
    font-size: 13px;
    color: #6c757d;
    text-align: center;
}

.gsearch-category[b-vnwv5mjdpg] {
    padding: 4px 0;
}

    .gsearch-category + .gsearch-category[b-vnwv5mjdpg] {
        border-top: 1px solid #f2f4f6;
    }

.gsearch-category-title[b-vnwv5mjdpg] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #98a2b3;
    padding: 8px 16px 4px;
}

.gsearch-result[b-vnwv5mjdpg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background-color .1s ease;
}

    .gsearch-result:hover[b-vnwv5mjdpg] {
        background: #f7f9fb;
    }

.gsearch-result-icon[b-vnwv5mjdpg] {
    color: rgb(8, 98, 155);
    font-size: 14px;
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
}

.gsearch-result-text[b-vnwv5mjdpg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.gsearch-result-title[b-vnwv5mjdpg] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch-result-subtitle[b-vnwv5mjdpg] {
    font-size: 12px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch-result-newtab[b-vnwv5mjdpg] {
    flex: 0 0 auto;
    color: #c4ccd4;
    font-size: 13px;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .1s ease, color .1s ease, background-color .1s ease;
}

    .gsearch-result:hover .gsearch-result-newtab[b-vnwv5mjdpg] {
        opacity: 1;
    }

    .gsearch-result-newtab:hover[b-vnwv5mjdpg] {
        color: rgb(8, 98, 155);
        background: #e5f0f7;
    }

.gsearch-viewall[b-vnwv5mjdpg] {
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgb(8, 98, 155);
    cursor: pointer;
    border-top: 1px solid #f2f4f6;
    text-align: center;
}

    .gsearch-viewall:hover[b-vnwv5mjdpg] {
        color: #16c444;
    }
/* /Pages/Components/GuidedTour.razor.rz.scp.css */
/*  Plain selectors, no ::deep -- every element here is this component's own markup, and there is
    no wrapping ancestor for ::deep to key off. */

/*  The spotlight.

    One element dims the whole screen by casting a very large shadow OUTWARD, leaving itself
    clear. Four panels around a hole would need to agree with each other on every resize; this
    cannot get out of step with itself.

    pointer-events: none is load-bearing, not tidying. The person has to be able to work the real
    control the tour is pointing at -- on a register, trapping somebody behind an overlay mid-sale
    would be worse than having no tour at all. */
.gt-ring[b-kj6ywhy5b8] {
    position: fixed;
    z-index: 3000;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(9, 30, 51, 0.55),
                0 0 0 2px rgb(8, 98, 155),
                0 0 0 6px rgba(8, 98, 155, 0.28);
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

/*  No control to point at: dim everything, spotlight nothing. Achieved by keeping the same
    element rather than removing it, so the transition still has something to run on. */
.gt-ring-hidden[b-kj6ywhy5b8] {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    box-shadow: 0 0 0 9999px rgba(9, 30, 51, 0.55);
}

.gt-callout[b-kj6ywhy5b8] {
    position: fixed;
    z-index: 3001;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    padding: 14px 16px 12px;
    pointer-events: auto;
    transition: top .18s ease, left .18s ease;
}

.gt-callout-center[b-kj6ywhy5b8] {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.gt-head[b-kj6ywhy5b8] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.gt-count[b-kj6ywhy5b8] {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a8894;
}

.gt-x[b-kj6ywhy5b8] {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #7a8894;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.gt-x:hover[b-kj6ywhy5b8] { color: #33414d; }

.gt-title[b-kj6ywhy5b8] {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.gt-text[b-kj6ywhy5b8] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #33414d;
}

/*  Amber, not red. A control the viewer's role does not include is an ordinary fact about their
    account, not an error they have made. */
.gt-missing[b-kj6ywhy5b8] {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff8e6;
    border: 1px solid #f3dfae;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6b5314;
}

.gt-nudge[b-kj6ywhy5b8] {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: #16803c;
}

.gt-actions[b-kj6ywhy5b8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.gt-spacer[b-kj6ywhy5b8] { flex: 1 1 auto; }

.gt-btn[b-kj6ywhy5b8] {
    border: 1px solid #d6dce2;
    background: #fff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.84rem;
    cursor: pointer;
    color: #33414d;
}

.gt-btn:hover[b-kj6ywhy5b8] { border-color: rgb(8, 98, 155); color: rgb(8, 98, 155); }

.gt-btn-primary[b-kj6ywhy5b8] {
    background: rgb(8, 98, 155);
    border-color: rgb(8, 98, 155);
    color: #fff;
}

.gt-btn-primary:hover[b-kj6ywhy5b8] { background: #06517f; border-color: #06517f; color: #fff; }

.gt-btn-quiet[b-kj6ywhy5b8] {
    border-color: transparent;
    color: #7a8894;
    padding-left: 4px;
}

.gt-btn-quiet:hover[b-kj6ywhy5b8] { border-color: transparent; color: #b02a37; }
/* /Pages/Components/IdleSessionMonitor.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- everything here is this component's own direct markup, not
   nested inside a child component. DxPopup's own chrome is styled globally elsewhere in app.css. */

.idle-warning-body[b-jhjwp44x1p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px 24px;
}

.idle-warning-icon[b-jhjwp44x1p] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff4e5;
    color: #b06000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.idle-warning-body h3[b-jhjwp44x1p] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a1a;
}

.idle-warning-body p[b-jhjwp44x1p] {
    font-size: 13.5px;
    color: #6c757d;
    margin: 0 0 16px;
    line-height: 1.4;
}

.idle-warning-countdown[b-jhjwp44x1p] {
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #b06000;
    margin-bottom: 22px;
}

.idle-warning-actions[b-jhjwp44x1p] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

    .idle-warning-actions .idle-btn[b-jhjwp44x1p] {
        width: 100%;
        font-weight: 600;
        border-radius: 8px;
        padding: 10px;
    }

    .idle-warning-actions .idle-btn-primary[b-jhjwp44x1p] {
        background: rgb(8, 98, 155) !important;
        border-color: rgb(8, 98, 155) !important;
    }

    .idle-warning-actions .idle-btn-ghost[b-jhjwp44x1p] {
        background: transparent !important;
        color: #6c757d !important;
        border-color: #dee2e6 !important;
    }
/* /Pages/Components/InvoiceQuickView.razor.rz.scp.css */
.cqv-header[b-7k0g2by1e6] {
    margin-bottom: .75rem;
}

.cqv-name[b-7k0g2by1e6] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.cqv-sub[b-7k0g2by1e6] {
    font-size: .85rem;
    color: #6c757d;
}

.cqv-grid[b-7k0g2by1e6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem 1rem;
}

.cqv-grid label[b-7k0g2by1e6] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.cqv-grid span[b-7k0g2by1e6] {
    font-size: .9rem;
}

.cqv-negative[b-7k0g2by1e6] {
    color: #b02a37;
}
/* /Pages/Components/LocationQuickView.razor.rz.scp.css */
/*
    Its own copy of the QuickView layout classes.

    CSS isolation does not cascade between components, so borrowing .cqv-* from CustomerQuickView
    would compile to a selector that never matches and this popup would render unstyled. Every
    QuickView in this app carries its own copy for the same reason.
*/

.lqv-header[b-vv7kjs0ygi] {
    margin-bottom: .75rem;
}

.lqv-name[b-vv7kjs0ygi] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.lqv-sub[b-vv7kjs0ygi] {
    font-size: .85rem;
    color: #6c757d;
}

.lqv-grid[b-vv7kjs0ygi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem 1rem;
}

/* Address runs long; let it take the row rather than wrap into a narrow column. */
.lqv-wide[b-vv7kjs0ygi] {
    grid-column: 1 / -1;
}

.lqv-grid label[b-vv7kjs0ygi] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.lqv-grid span[b-vv7kjs0ygi] {
    font-size: .9rem;
}

.lqv-section-title[b-vv7kjs0ygi] {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin: 1rem 0 .4rem;
    padding-top: .6rem;
    border-top: 1px solid #e9ecef;
}

.lqv-stats[b-vv7kjs0ygi] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.lqv-stat-value[b-vv7kjs0ygi] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
    font-variant-numeric: tabular-nums;
}

/* Listed is context for Stocked, not a figure of its own -- it should not read as equally loud. */
.lqv-muted[b-vv7kjs0ygi] {
    color: #6c757d;
}

.lqv-negative[b-vv7kjs0ygi] {
    color: #b02a37;
}

.lqv-stat-label[b-vv7kjs0ygi] {
    font-size: .7rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.lqv-note[b-vv7kjs0ygi] {
    font-size: .72rem;
    color: #6c757d;
    margin-top: .45rem;
    line-height: 1.35;
}

.lqv-flags[b-vv7kjs0ygi] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
/* /Pages/Components/LocationSwitcher.razor.rz.scp.css */
/* Plain selectors, no ::deep -- everything here is this component's own markup.

   Sits in the lime-retired blue topbar, so the trigger is light-on-dark while the menu that drops
   out of it is an ordinary light panel. */

.locsw[b-208wx4m40m] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.locsw-trigger[b-208wx4m40m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 20px;
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

    .locsw-trigger:hover[b-208wx4m40m] {
        background: rgba(255, 255, 255, .26);
    }

.locsw-caret[b-208wx4m40m] {
    font-size: 9px;
    opacity: .8;
}

/* Catches a click anywhere else. Covers the viewport but paints nothing, so the page underneath
   looks untouched while the menu is open. */
.locsw-backdrop[b-208wx4m40m] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.locsw-menu[b-208wx4m40m] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1041;
    min-width: 240px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: 6px;
    overflow: hidden;
}

.locsw-head[b-208wx4m40m] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d8b99;
    padding: 8px 12px 6px;
}

.locsw-item[b-208wx4m40m] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2933;
    cursor: pointer;
}

    .locsw-item:hover:not(:disabled)[b-208wx4m40m] {
        background: #eef5fb;
    }

    .locsw-item i[b-208wx4m40m] {
        color: rgb(8, 98, 155);
        font-size: 14px;
    }

/* The current location stays listed rather than being hidden, so the menu answers "where am I?"
   as well as "where else can I go?". Disabled, because selecting it would do nothing. */
.locsw-item-on[b-208wx4m40m] {
    cursor: default;
}

    .locsw-item-on i[b-208wx4m40m] {
        color: #16c444;
    }

.locsw-name[b-208wx4m40m] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locsw-tag[b-208wx4m40m] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #137a34;
    background: #e6f8ec;
    border-radius: 999px;
    padding: 2px 8px;
}

.locsw-busy[b-208wx4m40m] {
    padding: 8px 12px;
    font-size: 12px;
    color: #7d8b99;
}
/* /Pages/Components/OmxButtonDropDown.razor.rz.scp.css */
.omx-combobox[b-mhuaudprpd] {
    position: relative;
}

.textfieldContainer[b-mhuaudprpd]{
    padding-top:0px;
    padding-bottom:0px;
}


.textfield[b-mhuaudprpd]{
    color:#5f368d;
    cursor:pointer;
}



.omx-combobox .input-group[b-mhuaudprpd] {
    border: 1px solid #ccc;
    border-radius: 0.2rem;
    background-color: #fff;
    overflow: hidden;
    transition: all 0.2s;
}

        .omx-combobox .input-group:focus-within[b-mhuaudprpd] {
            border-color: greenyellow;
            box-shadow: 0 0 0 2px rgba(13,110,253,.25);
        }

    .omx-combobox input.form-control[b-mhuaudprpd] {
        border: none;
        box-shadow: none;
        flex: 1;
        padding: 0.5rem 0.75rem;
    }

    .omx-combobox .icon-btn[b-mhuaudprpd] {
        border: none;
        background: transparent;
        color: #666;
        padding: 0.4rem 0.6rem;
    }

        .omx-combobox .icon-btn:hover[b-mhuaudprpd] {
            background: rgba(0,0,0,0.05);
            color: #000;
        }

/* 🧩 DROPDOWN FIX — FLOAT ABOVE PARENT DIVS */
.omx-dropdown[b-mhuaudprpd] {
    position: absolute !important;
    left: 0;
    top: 100%;
    z-index: 9999 !important;
    background: white;
    margin-top: 9px !important;
    /*    border: 1px solid rgba(0,0,0,0.1);*/
    /*    border-radius: 0.5rem;*/
    transform: translateZ(0);
}

    /* Items */
    .omx-dropdown .dropdown-item[b-mhuaudprpd] {
        padding: 0.45rem 0.75rem;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .omx-dropdown .dropdown-item:hover[b-mhuaudprpd],
        .omx-dropdown .dropdown-item.active[b-mhuaudprpd] {
            background-color: #5f368d;
            color: #fff;
        }

.loading-indicator[b-mhuaudprpd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.spin[b-mhuaudprpd] {
    animation: spin-b-mhuaudprpd 1s linear infinite;
}

@keyframes spin-b-mhuaudprpd {
    to {
        transform: rotate(360deg);
    }
}

/* Ensures OmxComboBox aligns perfectly with DevExpress editors */
.omx-combobox-wrapper[b-mhuaudprpd] {
    display: flex;
    align-items: center;
    height: 14px; /* Matches DxComboBox default */
    position: relative;
    font-size: 0.875rem; /* Match DevExpress compact font size */
    width: 100%;
}

.omx-input[b-mhuaudprpd] {
    flex: 1;
    height: 28px !important;
    line-height: 32px;
    padding: 0 2.2rem 0 0.5rem; /* Leave space for buttons */
    padding-right: 70px !important;
    font-size: inherit;
    background-color: #fff;
    color: #757575;
    box-sizing: border-box;
}

    .omx-input:focus[b-mhuaudprpd] {
        box-shadow: 0 0 0 0.15rem rgba(95, 54, 141, 0.5);
        outline: none;
    }

/* Buttons */
.omx-btn[b-mhuaudprpd] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0 6px;
    color: #6c757d;
    cursor: pointer;
}

    .omx-btn:hover[b-mhuaudprpd] {
        color: #0d6efd;
    }

/* Clear and Dropdown button positions */
.omx-btn-clear[b-mhuaudprpd] {
    right: 1.6rem;
    margin-right: 10px;
    /*    border: solid;*/
    height: 80% !important;
    border-radius: 50% !important;
    border-width: 0.1px;
    border-color: #ccc;
    color: #f63f3f;
}

.omx-btn-dropdown[b-mhuaudprpd] {
    right: 0.3rem;
    border-left: solid;
    height: 100% !important;
    border-width: 0.1px;
    border-color: #ccc;
}

/* Dropdown styling */
.omx-dropdown-list[b-mhuaudprpd] {
    position: absolute;
    z-index: 1055 !important; /* Ensures it appears above cards/divs */
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 0.1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    margin-top: 0px;
}

.dropdown-item:hover[b-mhuaudprpd] {
    background: #e9e9e9 !important;
    color: #131314 !important;
}

.omx-dropdown-item[b-mhuaudprpd] {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.875rem;
}
/* /Pages/Components/OmxComboBox.razor.rz.scp.css */
.omx-combobox[b-h8l84xu98t] {
    position: relative;
}

    .omx-combobox .input-group[b-h8l84xu98t] {
        border: 1px solid #ccc;
        border-radius: 0.2rem;
        background-color: #fff;
        overflow: hidden;
        transition: all 0.2s;
    }

        .omx-combobox .input-group:focus-within[b-h8l84xu98t] {
            border-color: greenyellow;
            box-shadow: 0 0 0 2px rgba(13,110,253,.25);
        }

    .omx-combobox input.form-control[b-h8l84xu98t] {
        border: none;
        box-shadow: none;
        flex: 1;
        padding: 0.5rem 0.75rem;
    }

    .omx-combobox .icon-btn[b-h8l84xu98t] {
        border: none;
        background: transparent;
        color: #666;
        padding: 0.4rem 0.6rem;
    }

        .omx-combobox .icon-btn:hover[b-h8l84xu98t] {
            background: rgba(0,0,0,0.05);
            color: #000;
        }

/* 🧩 DROPDOWN FIX — FLOAT ABOVE PARENT DIVS */
.omx-dropdown[b-h8l84xu98t] {
    position: absolute !important;
    left: 0;
    top: 100%;
    z-index: 9999 !important;
    background: white;
    margin-top:9px!important;
/*    border: 1px solid rgba(0,0,0,0.1);*/
/*    border-radius: 0.5rem;*/
    transform: translateZ(0);
}

    /* Items */
    .omx-dropdown .dropdown-item[b-h8l84xu98t] {
        padding: 0.45rem 0.75rem;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .omx-dropdown .dropdown-item:hover[b-h8l84xu98t],
        .omx-dropdown .dropdown-item.active[b-h8l84xu98t] {
            background-color: #5f368d;
            color: #fff;
        }

.loading-indicator[b-h8l84xu98t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.spin[b-h8l84xu98t] {
    animation: spin-b-h8l84xu98t 1s linear infinite;
}

@keyframes spin-b-h8l84xu98t {
    to {
        transform: rotate(360deg);
    }
}

/* Ensures OmxComboBox aligns perfectly with DevExpress editors */
.omx-combobox-wrapper[b-h8l84xu98t] {
    display: flex;
    align-items: center;
    height: 14px; /* Matches DxComboBox default */
    position: relative;
    font-size: 0.875rem; /* Match DevExpress compact font size */
    width: 100%;
}

.omx-input[b-h8l84xu98t] {
    flex: 1;
    height: 28px!important;
    line-height: 32px;
    padding: 0 2.2rem 0 0.5rem; /* Leave space for buttons */
    padding-right:70px!important;
    font-size: inherit;
    background-color: #fff;
    color: #757575;
    box-sizing: border-box;
}

    .omx-input:focus[b-h8l84xu98t] {
        box-shadow: 0 0 0 0.15rem rgba(95, 54, 141, 0.5);
        outline: none;
    }

/* Buttons */
.omx-btn[b-h8l84xu98t] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0 6px;
    color: #6c757d;
    cursor: pointer;
}

    .omx-btn:hover[b-h8l84xu98t] {
        color: #0d6efd;
    }

/* Clear and Dropdown button positions */
.omx-btn-clear[b-h8l84xu98t] {
    right: 1.6rem;
    margin-right: 10px;
/*    border: solid;*/
    height: 80% !important;
    border-radius: 50% !important;
    border-width: 0.1px;
    border-color: #ccc;
    color:#f63f3f;
}

.omx-btn-dropdown[b-h8l84xu98t] {
    right: 0.3rem;
    border-left:solid;
    height:100%!important;
    border-width:0.1px;
    border-color:#ccc;
}

/* Dropdown styling */
.omx-dropdown-list[b-h8l84xu98t] {
    position: absolute;
    z-index: 1055 !important; /* Ensures it appears above cards/divs */
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 0.1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    margin-top: 0px;
}

.dropdown-item:hover[b-h8l84xu98t] {
    background: #e9e9e9!important;
    color:#131314!important;
}

    .omx-dropdown-item[b-h8l84xu98t] {
        padding: 6px 10px;
        cursor: pointer;
        font-size: 0.875rem;
    }

    

/* /Pages/Components/OmxGrid.razor.rz.scp.css */
.omxgrid-toolbar[b-85z6t9lh2t] {
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.omxgrid-search[b-85z6t9lh2t] {
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    flex-grow: 1;
    min-width: 200px;
}

.omxgrid-button[b-85z6t9lh2t] {
    padding: 0.4rem 0.8rem;
    background: #007bff;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

    .omxgrid-button:hover[b-85z6t9lh2t] {
        background: #0056b3;
    }

.omxgrid-container[b-85z6t9lh2t] {
    overflow-x: auto;
}

.omxgrid-table[b-85z6t9lh2t] {
    border-collapse: collapse;
    width: 100%;
    user-select: none;
}

    .omxgrid-table th[b-85z6t9lh2t], .omxgrid-table td[b-85z6t9lh2t] {
        padding: 0.5rem 0.8rem;
        border: 1px solid #ddd;
        text-align: left;
    }

    .omxgrid-table thead th[b-85z6t9lh2t] {
        position: sticky;
        top: 0;
        background: var(--header-bg);
        cursor: pointer;
    }

        .omxgrid-table thead th.sort-asc[b-85z6t9lh2t]::after {
            content: " ▲";
        }

        .omxgrid-table thead th.sort-desc[b-85z6t9lh2t]::after {
            content: " ▼";
        }

    .omxgrid-table thead input.filter-input[b-85z6t9lh2t] {
        width: 90%;
        margin-top: 4px;
        padding: 2px 4px;
        font-size: 0.85rem;
    }

    .omxgrid-table tbody tr:hover[b-85z6t9lh2t] {
        background-color: var(--row-hover-bg);
        transition: background-color 0.3s ease;
    }

    .omxgrid-table tbody tr.selected-row[b-85z6t9lh2t] {
        background-color: var(--row-selected-bg);
    }

.omxgrid-pagination[b-85z6t9lh2t] {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

    .omxgrid-pagination button[b-85z6t9lh2t] {
        cursor: pointer;
        padding: 0.3rem 0.7rem;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: white;
    }

        .omxgrid-pagination button:disabled[b-85z6t9lh2t] {
            opacity: 0.4;
            cursor: not-allowed;
        }

/* Light Theme Variables */
.light-theme[b-85z6t9lh2t] {
    --header-bg: #f0f0f0;
    --row-hover-bg: #e6f7ff;
    --row-selected-bg: #bae7ff;
    color: #000;
    background-color: #fff;
}

/* Dark Theme Variables */
.dark-theme[b-85z6t9lh2t] {
    --header-bg: #333;
    --row-hover-bg: #444c56;
    --row-selected-bg: #2865ac;
    color: #eee;
    background-color: #1c1c1c;
}

.omxgrid-table.light-theme th[b-85z6t9lh2t],
.omxgrid-table.light-theme td[b-85z6t9lh2t] {
    border-color: #ddd;
}

.omxgrid-table.dark-theme th[b-85z6t9lh2t],
.omxgrid-table.dark-theme td[b-85z6t9lh2t] {
    border-color: #555;
}
/* /Pages/Components/OmxGridSearchBar.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this component's own direct markup. Deliberately does not try
   to reach into the DxGrid's own internal DOM/CSS (fragile, DevExpress-version-specific) -- the
   "merged with the grid" look instead comes entirely from this side: a negative margin-bottom
   pulls this bar's own bottom border 1px behind the grid's own top border, so the two read as
   one continuous panel with no double-thickness seam, whatever the grid's own border happens
   to look like. */

.omx-gridsearch[b-28w8g8eqa6] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 9px 14px;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

    .omx-gridsearch i.omx-gridsearch-icon[b-28w8g8eqa6] {
        color: #98a2b3;
        font-size: 13px;
        flex: 0 0 auto;
    }

.omx-gridsearch-input[b-28w8g8eqa6] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 13.5px;
    padding: 2px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
}

    .omx-gridsearch-input[b-28w8g8eqa6]::placeholder {
        color: #adb5bd;
    }

.omx-gridsearch-clear[b-28w8g8eqa6] {
    color: #c4ccd4;
    font-size: 13px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: color .1s ease;
}

    .omx-gridsearch-clear:hover[b-28w8g8eqa6] {
        color: #b02a37;
    }
/* /Pages/Components/OmxMultiColumnComboBox.razor.rz.scp.css */
.omx-combobox[b-xglc6h384c] {
    position: relative;
}

    .omx-combobox .input-group[b-xglc6h384c] {
        border: 1px solid #ccc;
        border-radius: 0.2rem;
        background-color: #fff;
        overflow: hidden;
        transition: all 0.2s;
    }

        .omx-combobox .input-group:focus-within[b-xglc6h384c] {
            border-color: greenyellow;
            box-shadow: 0 0 0 2px rgba(13,110,253,.25);
        }

    .omx-combobox input.form-control[b-xglc6h384c] {
        border: none;
        box-shadow: none;
        flex: 1;
        padding: 0.5rem 0.75rem;
    }

    .omx-combobox .icon-btn[b-xglc6h384c] {
        border: none;
        background: transparent;
        color: #666;
        padding: 0.4rem 0.6rem;
    }

        .omx-combobox .icon-btn:hover[b-xglc6h384c] {
            background: rgba(0,0,0,0.05);
            color: #000;
        }

/* 🧩 DROPDOWN FIX — FLOAT ABOVE PARENT DIVS */
.omx-dropdown[b-xglc6h384c] {
    position: absolute !important;
    left: 0;
    top: 100%;
    z-index: 9999 !important;
    background: white;
    margin-top: 9px !important;
    /*    border: 1px solid rgba(0,0,0,0.1);*/
    /*    border-radius: 0.5rem;*/
    transform: translateZ(0);
}

    /* Items */
    .omx-dropdown .dropdown-item[b-xglc6h384c] {
        padding: 0.45rem 0.75rem;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .omx-dropdown .dropdown-item:hover[b-xglc6h384c],
        .omx-dropdown .dropdown-item.active[b-xglc6h384c] {
            background-color: #5f368d;
            color: #fff;
        }

.loading-indicator[b-xglc6h384c] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.spin[b-xglc6h384c] {
    animation: spin-b-xglc6h384c 1s linear infinite;
}

@keyframes spin-b-xglc6h384c {
    to {
        transform: rotate(360deg);
    }
}

/* Ensures OmxComboBox aligns perfectly with DevExpress editors */
.omx-combobox-wrapper[b-xglc6h384c] {
    display: flex;
    align-items: center;
    height: 14px; /* Matches DxComboBox default */
    position: relative;
    font-size: 0.875rem; /* Match DevExpress compact font size */
    width: 100%;
}

.omx-input[b-xglc6h384c] {
    flex: 1;
    height: 28px !important;
    line-height: 32px;
    padding: 0 2.2rem 0 0.5rem; /* Leave space for buttons */
    padding-right: 70px !important;
    font-size: inherit;
    background-color: #fff;
    color: #757575;
    box-sizing: border-box;
}

    .omx-input:focus[b-xglc6h384c] {
        box-shadow: 0 0 0 0.15rem rgba(95, 54, 141, 0.5);
        outline: none;
    }

/* Buttons */
.omx-btn[b-xglc6h384c] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0 6px;
    color: #6c757d;
    cursor: pointer;
}

    .omx-btn:hover[b-xglc6h384c] {
        color: #0d6efd;
    }

/* Clear and Dropdown button positions */
.omx-btn-clear[b-xglc6h384c] {
    right: 1.6rem;
    margin-right: 10px;
    /*    border: solid;*/
    height: 80% !important;
    border-radius: 50% !important;
    border-width: 0.1px;
    border-color: #ccc;
    color: #f63f3f;
}

.omx-btn-dropdown[b-xglc6h384c] {
    right: 0.3rem;
    border-left: solid;
    height: 100% !important;
    border-width: 0.1px;
    border-color: #ccc;
}

/* Dropdown styling */
.omx-dropdown-list[b-xglc6h384c] {
    position: absolute;
    z-index: 1055 !important; /* Ensures it appears above cards/divs */
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 0.1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    margin-top: 0px;
}

.dropdown-item:hover[b-xglc6h384c] {
    background: #e9e9e9 !important;
    color: #131314 !important;
}

.omx-dropdown-item[b-xglc6h384c] {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.875rem;
}


.omx-dropdown-table[b-xglc6h384c] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 0.9rem;
}

.omx-dropdown-header[b-xglc6h384c] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #555;
}

.omx-dropdown-row[b-xglc6h384c] {
    cursor: pointer;
    transition: background-color 0.15s;
}

    .omx-dropdown-row:hover[b-xglc6h384c] {
        background-color: #f1f3f5;
    }

.omx-cell[b-xglc6h384c] {
    padding: 0 4px;
}

.omx-cell-caption[b-xglc6h384c] {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 2px;
}

.omx-cell-value[b-xglc6h384c] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#omx-table[b-xglc6h384c] {
    width: 100%;
    border-collapse: collapse;

}

    #omx-table tr[b-xglc6h384c] {
        display: table-row;
        width: 100%;
    }

    #omx-table td[b-xglc6h384c] {
        display: table-cell;
        width: auto;
        white-space: nowrap;
        margin-left:5px;
        margin-right:5px;
        padding-top:10px;
        height:30px!important;
    }

#omx-table td:last-child[b-xglc6h384c]{
    text-align:right!important;
}

.omx-grid[b-xglc6h384c] {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    border-collapse: collapse;
    width: 100%;
}

.omx-header[b-xglc6h384c],
.omx-row[b-xglc6h384c] {
    display: contents; /* keeps table-like alignment */
}

    .omx-header > div[b-xglc6h384c] {
        font-weight: 600;
        color: #6c757d;
        border-bottom: 1px solid #ddd;
        padding: 10px 5px;
        white-space: nowrap;
    }

    .omx-row > div[b-xglc6h384c] {
        padding: 10px 5px;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap;
    }

        .omx-row > div:last-child[b-xglc6h384c],
        .omx-header > div:last-child[b-xglc6h384c] {
            text-align: right;
        }
/* ensure inner wrapper aligns right */
#omx-table td:last-child .omx-cell-value[b-xglc6h384c],
#omx-table th:last-child .omx-cell-header[b-xglc6h384c] {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}

/* very explicit selector to beat other rules */
#omx-table tbody tr > td:last-child[b-xglc6h384c],
#omx-table thead tr > td:last-child[b-xglc6h384c],
#omx-table tbody tr > th:last-child[b-xglc6h384c],
#omx-table thead tr > th:last-child[b-xglc6h384c] {
    text-align: right !important;
}

    /* in case some frameworks set display or flex on td children */
    #omx-table tbody tr > td:last-child > *[b-xglc6h384c] {
        text-align: right !important;
    }


/* Scrollable container for the table body */
.omx-table-container[b-xglc6h384c] {
    max-height: 300px; /* Adjust for your dropdown height */
    overflow-y: auto;
    border: 1px solid #dee2e6; /* Optional: table border */
}

/* Sticky table header */
#omx-table thead th[b-xglc6h384c] {
    position: sticky;
    top: 0;
    z-index: 10; /* Make sure it stays above rows */
    background-color: #f8f9fa; /* Match dropdown-header background */
    border-bottom: 2px solid #dee2e6;
}

/* Optional: make header text stand out */
#omx-table thead th[b-xglc6h384c] {
    font-weight: 600;
    color: #333;
}

/* Optional: hover effect for rows */
#omx-table tbody tr:hover[b-xglc6h384c] {
    background-color: #f2f2f2;
}

/* Ensure table layout behaves properly */
#omx-table[b-xglc6h384c] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}


.omx-text-right[b-xglc6h384c] {
    text-align: right!important;
    color:greenyellow!important;
}
/* /Pages/Components/OmxMultiSelect.razor.rz.scp.css */
/*  Deliberately the same visual language as OmxSearchComboBox: white pill, no border, soft
    shadow that deepens on focus, and a rounded shadowed dropdown card. The values are copied
    rather than shared because Blazor CSS isolation does not cascade between components even
    when the class names match -- documented repeatedly elsewhere in this app.  */

.omx-ms[b-s6nckxjq31] {
    position: relative;
    width: 100%;
    font-size: 0.875rem;
}

.omx-ms-control[b-s6nckxjq31] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    width: 100%;
    min-height: 38px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow .15s ease;
    box-sizing: border-box;
    cursor: text;
}

.omx-ms:focus-within .omx-ms-control[b-s6nckxjq31] {
    box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35);
}

.omx-ms-disabled[b-s6nckxjq31] {
    background: #f4f6f8;
    cursor: not-allowed;
}

.omx-ms-icon[b-s6nckxjq31] {
    color: #98a2b3;
    font-size: 14px;
    flex: 0 0 auto;
    margin-top: 5px;
}

/*  Tags and the search box share one wrapping row, so the control grows downward as choices are
    added rather than hiding them behind a count. */
.omx-ms-tags[b-s6nckxjq31] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
}

.omx-ms-tag[b-s6nckxjq31] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    background: #eaf2f8;
    color: rgb(8, 98, 155);
    border-radius: 12px;
    padding: 2px 4px 2px 9px;
    font-size: 12.5px;
    line-height: 1.5;
}

.omx-ms-tag-text[b-s6nckxjq31] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.omx-ms-tag-x[b-s6nckxjq31] {
    border: none;
    background: transparent;
    color: rgb(8, 98, 155);
    opacity: .6;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}

.omx-ms-tag-x:hover[b-s6nckxjq31] {
    opacity: 1;
    color: #b02a37;
}

.omx-ms-input[b-s6nckxjq31] {
    flex: 1 1 90px;
    min-width: 90px;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    padding: 3px 0;
    color: #1a1a1a;
    background: transparent;
}

.omx-ms-input[b-s6nckxjq31]::placeholder {
    color: #adb5bd;
}

.omx-ms-clear[b-s6nckxjq31],
.omx-ms-caret[b-s6nckxjq31] {
    flex: 0 0 auto;
    margin-top: 4px;
}

.omx-ms-clear[b-s6nckxjq31] {
    border: none;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.omx-ms-clear:hover[b-s6nckxjq31] {
    color: #b02a37;
}

.omx-ms-caret[b-s6nckxjq31] {
    color: #98a2b3;
    font-size: 12px;
}

/*  position: absolute is what makes this float over the page instead of pushing the form down.
    Note for callers: a parent with overflow:clip or a transform (the global .card has both)
    creates a containing block that crops this, and no z-index can beat a clip. */
.omx-ms-menu[b-s6nckxjq31] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
}

.omx-ms-option[b-s6nckxjq31] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    cursor: pointer;
    line-height: 1.35;
}

.omx-ms-option:hover[b-s6nckxjq31] {
    background: #f2f7fb;
}

.omx-ms-option.on .omx-ms-option-text[b-s6nckxjq31] {
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.omx-ms-check[b-s6nckxjq31] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c7d2dc;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: #fff;
}

.omx-ms-option.on .omx-ms-check[b-s6nckxjq31] {
    background: rgb(8, 98, 155);
    border-color: rgb(8, 98, 155);
}

.omx-ms-option-text[b-s6nckxjq31] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    color: #1a1a1a;
}

.omx-ms-option-hint[b-s6nckxjq31] {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #98a2b3;
}

.omx-ms-empty[b-s6nckxjq31] {
    padding: 12px 14px;
    font-size: 13px;
    color: #98a2b3;
}

.omx-ms-foot[b-s6nckxjq31] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px 3px;
    margin-top: 4px;
    border-top: 1px solid #eef2f5;
    font-size: 12px;
    color: #98a2b3;
}

.omx-ms-foot-clear[b-s6nckxjq31] {
    border: none;
    background: transparent;
    color: rgb(8, 98, 155);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
}

.omx-ms-foot-clear:hover[b-s6nckxjq31] {
    text-decoration: underline;
}

.omx-ms-more[b-s6nckxjq31] {
    padding: 7px 14px 3px;
    margin-top: 4px;
    border-top: 1px solid #eef2f5;
    font-size: 11.5px;
    color: #98a2b3;
}
/* /Pages/Components/OmxSearchComboBox.razor.rz.scp.css */
/* Copy of AdvancedOMXComboBox.razor.css -- Blazor CSS isolation does not cascade between
   components even when class names match (documented repeatedly elsewhere in this app), so
   OmxSearchComboBox needs its own scoped copy of these rules rather than relying on
   AdvancedOMXComboBox's. Same pill input, inline spinner, rounded shadowed dropdown,
   icon+title+subtitle result rows -- kept visually identical to the product-lookup combobox
   this component was split off from. */

.omx-combobox[b-sqanysebtd] {
    position: relative;
}

.omx-combobox-wrapper[b-sqanysebtd] {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 0.875rem;
}

.omx-search-form[b-sqanysebtd] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 7px 14px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow .15s ease;
    box-sizing: border-box;
}

    .omx-combobox-wrapper:focus-within .omx-search-form[b-sqanysebtd] {
        box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35);
    }

.omx-search-icon[b-sqanysebtd] {
    color: #98a2b3;
    font-size: 14px;
    flex: 0 0 auto;
}

.omx-search-input[b-sqanysebtd] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    padding: 3px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
    height: auto;
}

    .omx-search-input[b-sqanysebtd]::placeholder {
        color: #adb5bd;
    }

.omx-search-spinner[b-sqanysebtd] {
    width: 13px;
    height: 13px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: omx-search-spin-b-sqanysebtd .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes omx-search-spin-b-sqanysebtd {
    to { transform: rotate(360deg); }
}

.omx-search-clear[b-sqanysebtd] {
    border: none;
    background: transparent;
    color: #c4ccd4;
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    transition: color .1s ease;
}

    .omx-search-clear:hover[b-sqanysebtd] {
        color: #f63f3f;
    }

.omx-search-dropdown[b-sqanysebtd] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}

.omx-search-empty[b-sqanysebtd] {
    padding: 20px 16px;
    font-size: 13px;
    color: #6c757d;
    text-align: center;
}

.omx-search-result[b-sqanysebtd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background-color .1s ease;
}

    .omx-search-result:hover[b-sqanysebtd],
    .omx-search-result.highlighted[b-sqanysebtd] {
        background: #f7f9fb;
    }

    .omx-search-result.active[b-sqanysebtd] {
        background: #e5f0f7;
    }

.omx-search-result-icon[b-sqanysebtd] {
    color: rgb(8, 98, 155);
    font-size: 14px;
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
}

.omx-search-result-text[b-sqanysebtd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.omx-search-result-title[b-sqanysebtd] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-search-result-subtitle[b-sqanysebtd] {
    font-size: 12px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-search-result-price[b-sqanysebtd] {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: rgb(8, 98, 155);
}
/* /Pages/Components/OmxTooltip.razor.rz.scp.css */
.omx-tooltip-wrapper[b-nublscev8v] {
    position: relative;
    display: inline-block;
    z-index:999999999;
}

.omx-tooltip-box[b-nublscev8v] {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 9999;
    opacity: 0;
    animation: fadeIn-b-nublscev8v 0.15s forwards;
    pointer-events: none;
}

    /* Positions */
    /* Only applied when MaxWidth is set, so the default one-line behaviour is untouched. */
    .omx-tooltip-box.wrap[b-nublscev8v] {
        white-space: normal;
        text-align: left;
        line-height: 1.35;
    }

    .omx-tooltip-box.top[b-nublscev8v] {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
    }

    .omx-tooltip-box.bottom[b-nublscev8v] {
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(6px);
    }

    .omx-tooltip-box.left[b-nublscev8v] {
        right: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
    }

    .omx-tooltip-box.right[b-nublscev8v] {
        left: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(6px);
    }

/* Fade animation */
@keyframes fadeIn-b-nublscev8v {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/Components/PaymentQuickView.razor.rz.scp.css */
.cqv-header[b-ezf87ibqrh] {
    margin-bottom: .75rem;
}

.cqv-name[b-ezf87ibqrh] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.cqv-sub[b-ezf87ibqrh] {
    font-size: .85rem;
    color: #6c757d;
}

.cqv-grid[b-ezf87ibqrh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem 1rem;
}

.cqv-grid label[b-ezf87ibqrh] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.cqv-grid span[b-ezf87ibqrh] {
    font-size: .9rem;
}
/* /Pages/Components/POSHeaderBar.razor.rz.scp.css */
/*
    The barcode field, matched to the product lookup beside it.

    These values are copied from AdvancedOMXComboBox.razor.css rather than invented: same 20px
    pill, same 0 2px 6px shadow, same focus-within deepening to the app's primary blue, same
    #98a2b3 leading icon and 13.5px input. CSS isolation means the two components cannot share
    one stylesheet, so a duplicate is the only way to make them genuinely match -- the same
    trade-off already recorded elsewhere in this project for the .cqv-* QuickView classes.

    Plain selectors, not ::deep: every element here is this component's own markup, so Blazor
    stamps the scope attribute on it directly.
*/

/*
    ONE HEIGHT FOR ALL THREE CONTROLS.

    They did not match, and the reason was not the barcode field. Both lookups were passed
    OmxCss="Omx-pos-input-height", whose global rule in app.css sets the wrapper to 45px AND any
    nested input[type=text] to 45px !important. The pill wrapping that input adds 7px of padding
    top and bottom, so the lookups actually rendered around 59px -- overflowing the very 45px
    wrapper the class had just set. The barcode field, sized honestly at 45px, was the odd one
    out only because it was the one that obeyed.

    That class is meant for DevExpress edit components, which have no padding of their own. It is
    now off both lookups, and the height is set here instead, on the pill itself, where it is the
    outer box being measured rather than the input inside it.

    ::deep is correct here and is one of the rare places it is: .omx-search-form belongs to child
    components (AdvancedOMXComboBox, CustomerLookUp), so it never carries this component's scope
    attribute -- but POSHeaderBar's own wrapper does, which is exactly the ancestor ::deep needs.
    Scoping it this way also keeps the height local to the register: the same lookups are used on
    Purchase Orders and Products, where a 45px POS-sized control would be out of place.
*/
/*
    45px is written out twice rather than held in a custom property.

    A property declared on :root does not survive CSS isolation -- Blazor rewrites the selector
    to :root[b-xxx] and <html> never carries a component's scope attribute, so the variable is
    simply undefined and every height that referenced it collapses. That builds perfectly
    cleanly; it only shows up by reading the compiled bundle. Two literals with a comment each
    are worth more here than an abstraction that silently does not exist.
*/
[b-tbq52jpn23] .omx-search-form {
    height: 45px;   /* keep in step with .pos-scan-form below */
}

/*
    Placeholder text on all three controls in the app's own blue.

    ::deep reaches the two lookups, whose inputs belong to child components; .pos-scan-input
    below is this component's own markup and is set with a plain selector further down. Both
    land on the same colour, which is the point -- these three sit in a row and a placeholder
    that differs between them reads as a mistake.

    Scoped to this bar rather than changed in the components themselves: the same lookups are
    used on Purchase Orders and Products, where the register's blue would be out of place.

    .omx-search-form is in the selector purely for WEIGHT. Without it this ties exactly with the
    components' own placeholder rule -- both are one class plus one attribute -- and would win
    only because POSHeaderBar happens to sort later in the generated bundle. That is true today
    and is not something to depend on; the extra class settles it on specificity instead.
*/
[b-tbq52jpn23] .omx-search-form .omx-search-input::placeholder {
    color: rgb(8, 98, 155);
    opacity: 0.75;
}

.pos-scan[b-tbq52jpn23] {
    position: relative;
    width: 100%;
}

.pos-scan-form[b-tbq52jpn23] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 7px 14px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow .15s ease;
    box-sizing: border-box;
    height: 45px;   /* keep in step with ::deep .omx-search-form above */
}

.pos-scan:focus-within .pos-scan-form[b-tbq52jpn23] {
    box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35);
}

.pos-scan-icon[b-tbq52jpn23] {
    color: #98a2b3;
    font-size: 14px;
    flex: 0 0 auto;
}

.pos-scan-input[b-tbq52jpn23] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 13.5px;
    padding: 3px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
    height: auto;
    /* A scanner types fast and a person reads back digits, so the numbers stay evenly spaced
       rather than jittering as they arrive. */
    font-variant-numeric: tabular-nums;
}

.pos-scan-input[b-tbq52jpn23]::placeholder {
    color: rgb(8, 98, 155);   /* matches ::deep .omx-search-input::placeholder above */
    opacity: 0.75;
}

.pos-scan-clear[b-tbq52jpn23] {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    color: #b9c2cc;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 13px;
}

.pos-scan-clear:hover[b-tbq52jpn23] {
    color: #6b7784;
}
/* /Pages/Components/PrepaidTopUp.razor.rz.scp.css */
/*
    Plain (non-::deep) selectors. Every element styled here is this component's own markup with no
    nested child component in between, so ::deep would compile to a selector needing a scoped
    ancestor that does not exist -- the mistake already recorded in CLAUDE.md for CreateQuote.
*/

.ptu-header[b-t6kbgj79d5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f5;
}

.ptu-name[b-t6kbgj79d5] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.ptu-balance[b-t6kbgj79d5] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ptu-balance-label[b-t6kbgj79d5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a94a6;
}

.ptu-balance-value[b-t6kbgj79d5] {
    font-size: 15px;
    font-weight: 800;
    color: #16c444;
    font-variant-numeric: tabular-nums;
}

.ptu-note[b-t6kbgj79d5] {
    margin: 10px 0 14px;
}

/* Two per row, from the container's own width rather than the viewport -- the popup is 560px, and
   Bootstrap's col-md-* would size these against the browser window instead and crowd them. */
.ptu-grid[b-t6kbgj79d5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.ptu-grid .form-label[b-t6kbgj79d5] {
    display: block;
    margin-bottom: 6px;
}

.ptu-comments[b-t6kbgj79d5] {
    margin-top: 14px;
}

.ptu-comments .form-label[b-t6kbgj79d5] {
    display: block;
    margin-bottom: 6px;
}

.ptu-total[b-t6kbgj79d5] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
}

.ptu-total-label[b-t6kbgj79d5] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a94a6;
}

.ptu-total-value[b-t6kbgj79d5] {
    font-size: 20px;
    font-weight: 800;
    color: rgb(8, 98, 155);
    font-variant-numeric: tabular-nums;
}

.ptu-after[b-t6kbgj79d5] {
    margin-top: 6px;
    text-align: right;
    font-size: 12.5px;
    color: #6c757d;
}
/* /Pages/Components/ProductQuickView.razor.rz.scp.css */
.cqv-header[b-r9sj9lmxfl] {
    margin-bottom: .75rem;
}

.cqv-name[b-r9sj9lmxfl] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.cqv-sub[b-r9sj9lmxfl] {
    font-size: .85rem;
    color: #6c757d;
}

.cqv-divider[b-r9sj9lmxfl] {
    margin: .75rem 0;
}

.cqv-grid[b-r9sj9lmxfl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem 1rem;
}

.cqv-grid label[b-r9sj9lmxfl] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.cqv-grid span[b-r9sj9lmxfl] {
    font-size: .9rem;
}

.cqv-negative[b-r9sj9lmxfl] {
    color: #b02a37;
}

.cqv-positive[b-r9sj9lmxfl] {
    color: #16c444;
}

.cqv-loc-label[b-r9sj9lmxfl] {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .3rem;
}

[b-r9sj9lmxfl] .cqv-loc-grid.dxbl-grid {
    /* app.css sets a blanket ".dxbl-grid { height: 750px; }" for full-page grids elsewhere in
       the app. The XXSmallModals class (also app.css) is the established fix already used for
       small grids embedded in modals throughout Products.razor/ConfigureAttribrute.razor -- it
       caps max-height/overflow instead of forcing a fixed full-page height. height: auto here
       is a belt-and-suspenders addition so the grid also shrinks below that cap for a short
       location list instead of always rendering at the cap's height. */
    height: auto !important;
    font-size: .85rem;
}
/* /Pages/Components/RelativeDatePicker.razor.rz.scp.css */
/* Plain selectors, no ::deep -- every element here is this component's own markup. */

.rdp[b-expbs88d97] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* The anchor carries most of the meaning, so it takes most of the width and is the part that
   survives when the row wraps on a narrow screen. */
.rdp-anchor[b-expbs88d97] {
    flex: 2 1 190px;
    min-width: 0;
}

.rdp-sign[b-expbs88d97] {
    flex: 0 0 88px;
}

.rdp-amount[b-expbs88d97] {
    flex: 0 0 78px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rdp-unit[b-expbs88d97] {
    flex: 0 0 110px;
}

.rdp-preview[b-expbs88d97] {
    margin-top: 5px;
    font-size: 11.5px;
    color: #7d8b99;
}

/* Amber rather than red: nothing is broken yet, the expression simply will not produce a date, and
   the schedule leaves that bound as the report had it rather than failing. */
.rdp-preview-bad[b-expbs88d97] {
    color: #b06a00;
    font-weight: 600;
}
/* /Pages/Components/StaffQuickView.razor.rz.scp.css */
.sqv-header[b-bqv6rx3hjm] {
    margin-bottom: .75rem;
}

.sqv-name[b-bqv6rx3hjm] {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.sqv-sub[b-bqv6rx3hjm] {
    font-size: .85rem;
    color: #6c757d;
}

.sqv-grid[b-bqv6rx3hjm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
}

.sqv-grid label[b-bqv6rx3hjm] {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .1rem;
}

.sqv-grid span[b-bqv6rx3hjm] {
    font-size: .9rem;
}
/* /Pages/Customers/All.razor.rz.scp.css */

/* Says what the grid is showing. The list is deliberately not the whole customer base -- without
   this line an empty search result and "you are only seeing the first 200" look identical. */
.cust-scope[b-zu80ty0kyt] {
    font-size: 12px;
    color: #7d8b99;
    margin: 2px 2px 8px;
}

/* A customer record with no name at all. One exists, and it sorts to the top of a
   name-ordered list, so it is the first row anyone sees. */
.cust-unnamed[b-zu80ty0kyt] {
    font-style: italic;
    opacity: 0.75;
}
/* /Pages/Customers/CustomerEdit.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this component's own direct markup. */

.cust-not-found[b-3wryozx7im] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
}

    .cust-not-found i[b-3wryozx7im] {
        font-size: 30px;
        color: #c4ccd4;
    }
/* /Pages/Customers/CustomerQuotationDetail.razor.rz.scp.css */
/* Mirrors POEdit.razor.css's .po-section/.po-field/.po-toolbar conventions. Deliberately plain
   (no ::deep) -- these elements are flat top-level markup on this page, not nested inside a
   child component, so ::deep would compile to an unreachable ancestor-scoped selector (see
   CLAUDE.md's CreateQuote.razor.css lesson: ::deep .foo requires a SEPARATE scoped ancestor,
   which only exists when .foo sits inside something like a DxTabs/DxTabPage child component). */

.po-section[b-wovvlpif33] {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

.po-section-title[b-wovvlpif33] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 12px;
}

.po-field[b-wovvlpif33] {
    margin-bottom: 22px;
}

.po-field .form-label[b-wovvlpif33] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    display: block;
}

.po-toolbar[b-wovvlpif33] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #f7f8f9;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}
/* /Pages/Customers/EditInvoice.razor.rz.scp.css */
.section-card[b-r0lb7vtuac] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.section-title[b-r0lb7vtuac] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .75rem;
}

.field-grid[b-r0lb7vtuac] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem 1rem;
}

.field-grid.wide-fields[b-r0lb7vtuac] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field-grid-2col[b-r0lb7vtuac] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem 1.5rem;
}

.field-grid label[b-r0lb7vtuac] {
    font-size: .72rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: .15rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.header-strip[b-r0lb7vtuac] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .25rem;
}

.header-strip h5[b-r0lb7vtuac] {
    margin: 0;
}
/* /Pages/Customers/RecordPayment.razor.rz.scp.css */
.section-card[b-h1l9vqu70f] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.section-title[b-h1l9vqu70f] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .75rem;
}

.field-grid[b-h1l9vqu70f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem 1rem;
}

.field-grid label[b-h1l9vqu70f] {
    font-size: .72rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: .15rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.header-strip[b-h1l9vqu70f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .25rem;
}

.header-strip h5[b-h1l9vqu70f] {
    margin: 0;
}

.total-bar[b-h1l9vqu70f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin-bottom: 1rem;
}

.total-bar .total-label[b-h1l9vqu70f] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.total-bar .total-value[b-h1l9vqu70f] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #198754;
}

.history-summary[b-h1l9vqu70f] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    padding: .75rem 1.25rem;
    margin-bottom: .5rem;
}

.history-summary-label[b-h1l9vqu70f] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.history-summary-value[b-h1l9vqu70f] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.payment-history-table[b-h1l9vqu70f] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.payment-history-header[b-h1l9vqu70f],
.payment-history-row[b-h1l9vqu70f] {
    display: grid;
    grid-template-columns: 1.3fr .9fr 1.8fr 1.5fr .9fr .5fr;
    align-items: center;
    gap: .75rem;
}

.payment-history-header[b-h1l9vqu70f] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
    padding: 0 .25rem .5rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.payment-history-row[b-h1l9vqu70f] {
    padding: .4rem .25rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: .85rem;
}

.payment-history-row:last-child[b-h1l9vqu70f] {
    border-bottom: none;
}

.payment-history-row-reversal[b-h1l9vqu70f] {
    color: #b02a37;
}
/* /Pages/Customers/RefundInvoice.razor.rz.scp.css */
.section-card[b-3droww2thx] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.section-title[b-3droww2thx] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .75rem;
}

.field-grid[b-3droww2thx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem 1rem;
}

.field-grid label[b-3droww2thx] {
    font-size: .72rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: .15rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.header-strip[b-3droww2thx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .25rem;
}

.header-strip h5[b-3droww2thx] {
    margin: 0;
}

.total-bar[b-3droww2thx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin-bottom: 1rem;
}

.total-bar .total-label[b-3droww2thx] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.total-bar .total-value[b-3droww2thx] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #d9534f;
}

.refund-lines-table[b-3droww2thx] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.refund-lines-header[b-3droww2thx],
.refund-lines-row[b-3droww2thx] {
    display: grid;
    grid-template-columns: 2.2fr .8fr 1fr .9fr .9fr 1.1fr 1fr;
    align-items: center;
    gap: .75rem;
}

.refund-lines-header[b-3droww2thx] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
    padding: 0 .25rem .5rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.refund-lines-row[b-3droww2thx] {
    padding: .35rem .25rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.refund-lines-row:last-child[b-3droww2thx] {
    border-bottom: none;
}

/* ---------------------------------- packaging on a refund ---------------------------------- */

/* Plain selectors, no ::deep: these elements are this page's own markup, and ::deep needs a
   scoped ANCESTOR, which top-level siblings here do not have. */

/* The packaging name beside the description, so a case is identifiable before reading numbers. */
.refund-pack-tag[b-3droww2thx] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #eef2f6;
    color: #5b6773;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* The pack reading of a base-unit figure. Deliberately quiet and on its own line: the base-unit
   number stays the one being read, this only explains it. */
.refund-pack-note[b-3droww2thx] {
    display: block;
    font-size: 11.5px;
    color: #6b7784;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* One tap to refund a whole pack. Sized as a secondary action -- the quantity box is still the
   primary control and typing a partial return must not feel like the harder path. */
.refund-pack-btn[b-3droww2thx] {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    border: 1px solid rgb(8, 98, 155);
    border-radius: 7px;
    background: #fff;
    color: rgb(8, 98, 155);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.refund-pack-btn:hover[b-3droww2thx] {
    background: rgb(8, 98, 155);
    color: #fff;
}
/* /Pages/Customers/Statements.razor.rz.scp.css */

/*  Shown when no customer has been chosen. Without it the page opens as an empty grid saying
    "No data to display", which reads as a broken report rather than as one waiting for input. */
.soa-prompt[b-48ic5roegj] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 4px 0 10px;
    border: 1px solid #d9e2ec;
    border-left: 3px solid rgb(8, 98, 155);
    border-radius: 8px;
    background: #f8fafc;
    color: #4a5a6a;
    font-size: 13px;
}

.soa-prompt i[b-48ic5roegj] {
    font-size: 20px;
    color: rgb(8, 98, 155);
    line-height: 1.2;
}

.soa-prompt strong[b-48ic5roegj] {
    color: #22303c;
}
/* /Pages/Customers/WalletEnrolments.razor.rz.scp.css */
/*  Plain selectors, not ::deep. Every element below is this page's own markup sitting inside
    .we-wrap, which is a top-level element of this component and so carries the scope attribute
    itself -- Blazor scopes descendants correctly without help. ::deep here would compile to
    [b-xxx] .we-card and match nothing.  */

.we-wrap[b-z54pfrfdu3] { padding: 0 14px 24px; }

.we-toolbar[b-z54pfrfdu3] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.we-blurb[b-z54pfrfdu3] {
    flex: 1 1 320px;
    min-width: 0;
    font-size: .85rem;
    color: #667085;
    line-height: 1.45;
}

/*  A sign-up is one decision, so it is one card rather than a grid row -- the candidates that
    come with it do not fit a cell, and the choice is the whole point of the screen.  */
.we-card[b-z54pfrfdu3] {
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.we-head[b-z54pfrfdu3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.we-name[b-z54pfrfdu3] {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: rgb(8, 98, 155);
}

.we-meta[b-z54pfrfdu3] {
    display: block;
    font-size: .8rem;
    color: #667085;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.we-note[b-z54pfrfdu3] {
    font-size: .85rem;
    color: #475467;
    margin-bottom: 10px;
}

.we-alt[b-z54pfrfdu3] { margin-top: 10px; }

/*  Nothing waiting is good news, so it reads as a resolved state rather than as an empty grid.  */
.we-empty[b-z54pfrfdu3] {
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed #d0d5dd;
    border-radius: 10px;
    color: #475467;
}

.we-empty i[b-z54pfrfdu3] {
    font-size: 2rem;
    color: var(--omx-accent-green);
    display: block;
    margin-bottom: 10px;
}

/*  A candidate who cannot take this card. Dimmed rather than removed -- they are still very
    probably the right person, and seeing them is what stops somebody creating a duplicate.  */
.we-carded[b-z54pfrfdu3] {
    display: inline-block;
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 600;
    color: #b54708;
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: 999px;
    padding: 1px 8px;
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- every element here is this page's own direct markup, not
   nested inside a child component (see CLAUDE.md's CreateQuote.razor.css lesson). */

.dash-shell[b-hhrkfh7mzn] {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    padding-bottom: 24px;
}

/* ===== Banner ===== */

.dash-banner[b-hhrkfh7mzn] {
    background: linear-gradient(135deg, rgb(8, 98, 155), #0a3f66);
    /* Flush to the top and sides of the content area: the .content wrapper (MainLayout.razor)
       applies Bootstrap's px-4 (1.5rem each side) around every authenticated page, so break out
       of it with matching negative margins rather than respecting that padding like an ordinary
       content block would. Internal padding is set back to the same 1.5rem so the banner's own
       text still lines up with the rest of the page below it. */
    margin: 0 -1.5rem 20px -1.5rem;
    padding: 32px 1.5rem;
    color: #fff;
}

.dash-eyebrow[b-hhrkfh7mzn] {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.8;
}

.dash-banner-text h1[b-hhrkfh7mzn] {
    font-size: 30px;
    font-weight: 800;
    margin: 4px 0 6px;
}

.dash-banner-text p[b-hhrkfh7mzn] {
    font-size: 14px;
    opacity: 0.85;
    margin: 0 0 22px;
}

/* ===== Quick actions ===== */

.dash-quick-actions[b-hhrkfh7mzn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.dash-quick-action[b-hhrkfh7mzn] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .dash-quick-action:hover[b-hhrkfh7mzn] {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(15, 40, 60, 0.1);
        color: #1a1a1a;
    }

.dash-quick-icon[b-hhrkfh7mzn] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.dash-icon-blue[b-hhrkfh7mzn] { background: #e5f0f7; color: rgb(8, 98, 155); }
.dash-icon-green[b-hhrkfh7mzn] { background: #e3f9e8; color: #16c444; }
.dash-icon-purple[b-hhrkfh7mzn] { background: #ede7f4; color: #5f368d; }

/* ===== Recent activity ===== */

.dash-section-heading[b-hhrkfh7mzn] {
    margin-bottom: 16px;
}

    .dash-section-heading h2[b-hhrkfh7mzn] {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 4px;
    }

    .dash-section-heading p[b-hhrkfh7mzn] {
        font-size: 13px;
        color: #6c757d;
        margin: 0;
    }

.dash-recent-list[b-hhrkfh7mzn] {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    overflow: hidden;
}

.dash-recent-row[b-hhrkfh7mzn] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f4f6;
    cursor: pointer;
    transition: background-color .12s ease;
    text-decoration: none;
    color: inherit;
}

    .dash-recent-row:last-child[b-hhrkfh7mzn] {
        border-bottom: none;
    }

    .dash-recent-row:hover[b-hhrkfh7mzn] {
        background: #f7f9fb;
    }

.dash-recent-icon[b-hhrkfh7mzn] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
}

.dash-recent-info[b-hhrkfh7mzn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-recent-title[b-hhrkfh7mzn] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.dash-recent-sub[b-hhrkfh7mzn] {
    font-size: 12.5px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-recent-time[b-hhrkfh7mzn] {
    font-size: 12px;
    color: #98a2b3;
    flex: 0 0 auto;
    margin-right: 4px;
}

.dash-recent-chevron[b-hhrkfh7mzn] {
    color: #c4ccd4;
    font-size: 13px;
}

.dash-empty[b-hhrkfh7mzn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
}

    .dash-empty i[b-hhrkfh7mzn] {
        font-size: 26px;
        color: #c4ccd4;
    }

.dash-spinner[b-hhrkfh7mzn] {
    width: 15px;
    height: 15px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: dash-spin-b-hhrkfh7mzn .7s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes dash-spin-b-hhrkfh7mzn {
    to { transform: rotate(360deg); }
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
    .dash-quick-actions[b-hhrkfh7mzn] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-banner[b-hhrkfh7mzn] {
        padding: 24px 20px;
    }
}

/* ===== Assigned to you =====

   Above recent activity, and hidden when empty. Recent activity is a record of what has happened;
   this is a list of what has not happened yet, which is the reason somebody opens a dashboard at
   the start of a shift. */
.dash-tasks[b-hhrkfh7mzn] {
    margin-bottom: 24px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 14px;
}

.dash-tasks-head[b-hhrkfh7mzn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .dash-tasks-head h2[b-hhrkfh7mzn] {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: #0d3350;
    }

    .dash-tasks-head a[b-hhrkfh7mzn] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--omx-primary, rgb(8, 98, 155));
        text-decoration: none;
    }

        .dash-tasks-head a:hover[b-hhrkfh7mzn] {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

/*  Rows, not cards inside a card.

    .dash-tasks is already a bordered surface, so boxing each task inside it again spent a border
    and a radius saying "separate object" about four lines of one list. Border, fill and radius are
    each a signal; stamped on everything they stop signalling anything. */
.dash-tasks-list[b-hhrkfh7mzn] {
    display: flex;
    flex-direction: column;
}

.dash-task[b-hhrkfh7mzn] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 2px;
    border-top: 1px solid #eef2f6;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease;
}

    .dash-task:first-child[b-hhrkfh7mzn] {
        border-top: none;
    }

    .dash-task:hover[b-hhrkfh7mzn] {
        background: #f7f9fb;
    }

/*  min-width: 0 or a long department name refuses to shrink and pushes the bar and the percentage
    off the right-hand end -- a flex child defaults to min-width: auto. */
.dash-task-main[b-hhrkfh7mzn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-task-dept[b-hhrkfh7mzn] {
    font-size: 13.5px;
    font-weight: 600;
    color: #0d3350;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-task-sub[b-hhrkfh7mzn] {
    margin-top: 1px;
    font-size: 11.5px;
    color: #6b7684;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-task-progress[b-hhrkfh7mzn] {
    display: block;
    flex: 0 0 110px;
    width: 110px;
    height: 6px;
    border-radius: 999px;
    background: #e3e9ef;
    overflow: hidden;
}

.dash-task-bar[b-hhrkfh7mzn] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--omx-primary, rgb(8, 98, 155));
}

.dash-task-pct[b-hhrkfh7mzn] {
    flex: 0 0 auto;
    /*  Fixed width so four percentages line up down the panel rather than each sitting wherever
        its own digit count leaves it. */
    min-width: 38px;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--omx-primary, rgb(8, 98, 155));
    font-variant-numeric: tabular-nums;
}

.dash-tasks-more[b-hhrkfh7mzn] {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #6b7684;
}
/* /Pages/Dashboards/SalesInsights.razor.rz.scp.css */
/* Sales Insights -- bespoke styling for the widgets that don't already have an established
   app-wide equivalent (the hero revenue card, the funnel, the today-sparkline, the parish list,
   the segmented revenue-source bar, the product list, the progress rows). Everything else (the
   plain .card/.card-grid/.kpi-value/.dashboard-chart-box/.dash-mini-table classes, the
   success_bage_round/warning_bage_round/danger_bage_round status badges, .omx-quicklink) reuses
   this app's existing shared classes rather than reinventing them.

   Plain, non-::deep selectors throughout -- this page's top-level markup has no single wrapping
   ancestor <div>, and this file's own :root sibling pages (CreateQuote.razor.css and others,
   documented in CLAUDE.md) already establish that ::deep only matters when a same-scoped ancestor
   actually wraps the rule's target, which isn't the case here. */

.si-top-row[b-kv25qnbt9v] {
    align-items: stretch;
}

/* ---- Hero revenue card ---- */
.si-hero[b-kv25qnbt9v] {
    height: 100%;
    border-radius: 18px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #0a3f66 0%, #0f2b45 60%, #0a1c2e 100%);
    color: #eaf3fb;
    box-shadow: 0 10px 30px rgba(10, 30, 50, .28);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.si-hero-top[b-kv25qnbt9v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.si-hero-label[b-kv25qnbt9v] {
    font-size: .82rem;
    color: #9fc3dd;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.si-hero-amount[b-kv25qnbt9v] {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.si-hero-badge[b-kv25qnbt9v] {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #eaf3fb;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.si-hero-sub[b-kv25qnbt9v] {
    font-size: .85rem;
    color: #cfe3f2;
}

.si-hero-note[b-kv25qnbt9v] {
    color: #8fb3cc;
}

.si-hero-sources[b-kv25qnbt9v] {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.si-hero-sources-title[b-kv25qnbt9v] {
    font-size: .78rem;
    color: #9fc3dd;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.si-hero-empty[b-kv25qnbt9v] {
    color: #9fc3dd;
    font-size: .85rem;
    margin: 0;
}

.si-source-bar[b-kv25qnbt9v] {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    margin-bottom: 12px;
}

.si-source-segment[b-kv25qnbt9v] {
    height: 100%;
}

.si-source-c0[b-kv25qnbt9v] { background: #ff9f5a; }
.si-source-c1[b-kv25qnbt9v] { background: #16c444; }
.si-source-c2[b-kv25qnbt9v] { background: #6f9adb; }

.si-source-list[b-kv25qnbt9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.si-source-row[b-kv25qnbt9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
}

.si-source-dot[b-kv25qnbt9v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.si-source-name[b-kv25qnbt9v] {
    flex: 1 1 auto;
    color: #dcebf5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-source-amount[b-kv25qnbt9v] {
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
}

/* ---- Sales funnel ---- */
.si-funnel-card[b-kv25qnbt9v] { height: 100%; }

.si-card-hint[b-kv25qnbt9v] {
    font-size: .74rem;
    color: #98a2b3;
    font-weight: 400;
    margin-left: 4px;
}

.si-funnel[b-kv25qnbt9v] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}

.si-funnel-labels[b-kv25qnbt9v] {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    color: #344054;
    margin-bottom: 5px;
}

.si-funnel-count[b-kv25qnbt9v] {
    font-weight: 700;
    color: rgb(8, 98, 155);
}

.si-funnel-track[b-kv25qnbt9v] {
    height: 10px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.si-funnel-fill[b-kv25qnbt9v] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(8, 98, 155), #16c444);
    transition: width .4s ease;
}

/* ---- Today's transactions ---- */
.si-today-card[b-kv25qnbt9v] { height: 100%; }

.si-today-number[b-kv25qnbt9v] {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
}

.si-today-badge[b-kv25qnbt9v] {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    margin-top: 6px;
}

.si-today-badge.si-up[b-kv25qnbt9v] { background: #e9f7ef; color: #16c444; }
.si-today-badge.si-down[b-kv25qnbt9v] { background: #fdecec; color: #d64545; }

.si-today-time[b-kv25qnbt9v] {
    font-size: .76rem;
    color: #8993a4;
    margin-top: 4px;
}

.si-spark[b-kv25qnbt9v] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 54px;
    margin-top: 14px;
}

.si-spark-bar[b-kv25qnbt9v] {
    flex: 1 1 auto;
    min-width: 3px;
    background: linear-gradient(180deg, #ff9f5a, #ffb87a);
    border-radius: 3px 3px 0 0;
}

/* ---- Customers by Parish ---- */
.si-parish-list[b-kv25qnbt9v] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 260px;
    overflow-y: auto;
}

.si-parish-row[b-kv25qnbt9v] {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
}

.si-parish-name[b-kv25qnbt9v] {
    color: #344054;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-parish-track[b-kv25qnbt9v] {
    height: 7px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.si-parish-fill[b-kv25qnbt9v] {
    height: 100%;
    border-radius: 999px;
    background: rgb(8, 98, 155);
}

.si-parish-count[b-kv25qnbt9v] {
    text-align: right;
    font-weight: 600;
    color: #0f172a;
}

.si-parish-footnote[b-kv25qnbt9v] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef1f5;
    font-size: .78rem;
    color: #8993a4;
}

/* ---- Performance vs Last Month ---- */
.si-progress-list[b-kv25qnbt9v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.si-progress-labels[b-kv25qnbt9v] {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    color: #344054;
    margin-bottom: 6px;
}

.si-progress-track[b-kv25qnbt9v] {
    height: 9px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.si-progress-fill[b-kv25qnbt9v] {
    height: 100%;
    border-radius: 999px;
    background: #16c444;
    transition: width .4s ease;
}

/* ---- Top Products ---- */
.si-product-list[b-kv25qnbt9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.si-product-row[b-kv25qnbt9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
}

.si-product-row.si-product-top[b-kv25qnbt9v] {
    background: #eaf4fc;
}

.si-product-icon[b-kv25qnbt9v] {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgb(8, 98, 155);
    color: #fff;
    font-size: .95rem;
}

.si-product-info[b-kv25qnbt9v] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.si-product-name[b-kv25qnbt9v] {
    font-size: .85rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-product-sold[b-kv25qnbt9v] {
    font-size: .74rem;
    color: #8993a4;
}

.si-product-price[b-kv25qnbt9v] {
    font-weight: 700;
    color: rgb(8, 98, 155);
    white-space: nowrap;
}
/* /Pages/Dashboards/SalesOverview.razor.rz.scp.css */
/* .kpi-value / .dashboard-chart-box / .dash-mini-table moved to global app.css -- see the comment
   there. This file's own .card-subtitle ellipsis override stays here, scoped to this page only
   (not promoted globally, since truncating every card-subtitle app-wide wasn't asked for and isn't
   necessarily wanted on non-dashboard pages). */
.card-subtitle[b-my8uctotn1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oo-summary-strip[b-my8uctotn1] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.oo-summary-card[b-my8uctotn1] {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 130px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.oo-summary-warn[b-my8uctotn1] {
    border-color: #f5c2c7;
}

.oo-summary-label[b-my8uctotn1] {
    font-size: .75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

.oo-summary-value[b-my8uctotn1] {
    font-size: 1.35rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.oo-sync-status[b-my8uctotn1] {
    color: #495057;
    white-space: nowrap;
}

.oo-sync-status i[b-my8uctotn1] {
    color: rgb(8, 98, 155);
}

.oo-sync-spin[b-my8uctotn1] {
    display: inline-block;
    animation: oo-dash-spin-b-my8uctotn1 1s linear infinite;
}

@keyframes oo-dash-spin-b-my8uctotn1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Pages/Employees/ClockIn.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this page's own top-level markup is not wrapped in a nested
   child component, so ::deep rules would not reliably match (see CreateQuote.razor.css lesson
   in CLAUDE.md). Single @ for the keyframes below -- see the app-wide @@keyframes bug this
   session found and fixed elsewhere; double-@ compiles to invalid, silently-ignored CSS here. */

.clockin-shell[b-oduro5g9dw] {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.clockin-card[b-oduro5g9dw] {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 32px;
    text-align: center;
}

.clockin-header[b-oduro5g9dw] {
    background: linear-gradient(135deg, rgb(8, 98, 155), #0a3f66);
    margin: -32px -32px 24px -32px;
    padding: 28px 24px;
    border-radius: 16px 16px 0 0;
    color: #fff;
}

.clockin-eyebrow[b-oduro5g9dw] {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
}

.clockin-header h2[b-oduro5g9dw] {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 2px;
}

.clockin-header p[b-oduro5g9dw] {
    font-size: 13px;
    opacity: 0.85;
    margin: 0;
}

.clockin-livetime[b-oduro5g9dw] {
    font-size: 28px;
    font-weight: 700;
    color: rgb(8, 98, 155);
    text-align: center;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

.clockin-worked[b-oduro5g9dw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f2f4f6;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

.clockin-loading[b-oduro5g9dw] {
    padding: 24px 0;
    color: #6c757d;
    font-size: 14px;
}

.clockin-spinner[b-oduro5g9dw] {
    width: 14px;
    height: 14px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: clockin-spin-b-oduro5g9dw .7s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes clockin-spin-b-oduro5g9dw {
    to { transform: rotate(360deg); }
}

.clockin-status[b-oduro5g9dw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
}

    .clockin-status i[b-oduro5g9dw] {
        font-size: 22px;
    }

.clockin-status-idle[b-oduro5g9dw] {
    background: #f2f4f6;
    color: #6c757d;
}

.clockin-status-active[b-oduro5g9dw] {
    background: #e3f9e8;
    color: #16c444;
}

.clockin-status-lunch[b-oduro5g9dw] {
    background: #fff4e0;
    color: #b8720a;
}

.clockin-status-done[b-oduro5g9dw] {
    background: #e5f0f7;
    color: rgb(8, 98, 155);
}

.clockin-timeline[b-oduro5g9dw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f7f9fb;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    text-align: left;
}

.clockin-timeline-item[b-oduro5g9dw] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.clockin-timeline-label[b-oduro5g9dw] {
    color: #6c757d;
}

.clockin-timeline-value[b-oduro5g9dw] {
    font-weight: 600;
    color: #1a1a1a;
}

.clockin-actions[b-oduro5g9dw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Pages/Employees/EmployeeEdit.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this page's top-level markup is not wrapped in a single
   ancestor <div>, so ::deep rules would not reliably match (see the CreateQuote.razor.css
   lesson in CLAUDE.md). */

/* Store Locations grid, sized to fit ~11 rows. A prior pass bumped this to 255px (+50% over the
   shared global .omx-grid-xxsml baseline of 170px) per an earlier request, which turned out to
   render far taller than the handful of stores this grid actually lists -- excess empty space,
   not a CSS bug. Recalibrated using this app's own established ratio instead of guessing at
   DevExpress's generic SizeMode.Small row height: .omx-grid-xxsml's 170px is documented
   elsewhere in this codebase (see CLAUDE.md's QuickView section) as sized for a "~10-row list",
   so 170px / 10 rows extrapolates to ~187px for 11 rows, rounded to 190px. Still a dedicated
   page-scoped class rather than editing the shared global one, which other pages also use
   (Vendors/Edit.razor, this page's own Activity Log tab). Not verified in a live browser --
   worth a quick eyeball once viewed, and easy to nudge from here if it's still off. */
.emp-location-grid[b-6s8oah7v2e] {
    max-height: 190px !important;
}
/* /Pages/Employees/TalentReview.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this page's top-level markup is not wrapped in a single
   ancestor <div>, so ::deep rules would not reliably match (see the CreateQuote.razor.css lesson
   in CLAUDE.md). */

.ninebox-wrap[b-oo1w9ghete] {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: 1fr 24px;
    gap: 8px;
    margin-bottom: 24px;
}

.ninebox-axis-y[b-oo1w9ghete] {
    grid-row: 1;
    grid-column: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    font-size: 13px;
}

.ninebox-axis-x[b-oo1w9ghete] {
    grid-row: 2;
    grid-column: 2;
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    font-size: 13px;
}

.ninebox-grid[b-oo1w9ghete] {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    min-height: 380px;
}

.ninebox-cell[b-oo1w9ghete] {
    background: #f7f9fb;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 110px;
}

.ninebox-cell-title[b-oo1w9ghete] {
    font-size: 12px;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ninebox-cell-star[b-oo1w9ghete] {
    background: rgba(22, 196, 68, 0.10);
    border-color: var(--omx-accent-green);
}

    .ninebox-cell-star .ninebox-cell-title[b-oo1w9ghete] {
        color: var(--omx-accent-green);
    }

.ninebox-cell-good[b-oo1w9ghete] {
    background: rgba(8, 98, 155, 0.06);
    border-color: rgba(8, 98, 155, 0.35);
}

.ninebox-cell-risk[b-oo1w9ghete] {
    background: rgba(176, 42, 55, 0.08);
    border-color: #b02a37;
}

    .ninebox-cell-risk .ninebox-cell-title[b-oo1w9ghete] {
        color: #b02a37;
    }

.ninebox-cell-people[b-oo1w9ghete] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ninebox-chip[b-oo1w9ghete] {
    background: #fff;
    border: 1px solid #d3dfe8;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(8, 98, 155);
}
/* /Pages/Help.razor.rz.scp.css */
/*
    Plain selectors, no ::deep -- everything here is this page's own markup.

    Read as a document, not operated as a screen, so the choices lean on the things that make long
    text readable: a bounded measure, real spacing between ideas, and a contents list that stays put.
*/

.help-page[b-ux9hjwp5vv] {
    padding: 8px 4px 40px;
}

/* ---------------------------------------------------------------- hero */

.help-hero[b-ux9hjwp5vv] {
    background: linear-gradient(135deg, rgb(8, 98, 155) 0%, #0a3f66 100%);
    color: #fff;
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 22px;
}

.help-hero-text h2[b-ux9hjwp5vv] {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
}

.help-hero-text p[b-ux9hjwp5vv] {
    margin: 0;
    opacity: .92;
    /* Kept short so the opening lines are read rather than skimmed past. */
    max-width: 70ch;
    font-size: .95rem;
}

.help-search[b-ux9hjwp5vv] {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 18px;
    background: #fff;
    border-radius: 22px;
    padding: 0 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.16);
    max-width: 640px;
}

.help-search i.bi-search[b-ux9hjwp5vv] {
    color: #98a2b3;
    font-size: .95rem;
}

.help-search input[b-ux9hjwp5vv] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 10px;
    font-size: .95rem;
    color: #0f172a;
    min-width: 0;
}

.help-search-clear[b-ux9hjwp5vv] {
    border: none;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.help-search-clear:hover[b-ux9hjwp5vv] {
    color: #64748b;
}

/* ---------------------------------------------------------------- search results */

.help-results[b-ux9hjwp5vv] {
    max-width: 900px;
}

.help-results-count[b-ux9hjwp5vv] {
    color: #64748b;
    font-size: .85rem;
    margin-bottom: 10px;
}

.help-result[b-ux9hjwp5vv] {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.help-result:hover[b-ux9hjwp5vv] {
    border-color: rgb(8, 98, 155);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.help-result-title[b-ux9hjwp5vv] {
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.help-result-sub[b-ux9hjwp5vv] {
    font-size: .875rem;
    color: #475569;
    margin-top: 2px;
}

.help-result-section[b-ux9hjwp5vv] {
    font-size: .75rem;
    color: #94a3b8;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.help-noresult[b-ux9hjwp5vv] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 10px;
    padding: 14px 16px;
}

/* ---------------------------------------------------------------- layout */

.help-body[b-ux9hjwp5vv] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.help-toc[b-ux9hjwp5vv] {
    /*
        display MUST be set explicitly. app.css carries a bare `nav { display: flex; gap: 1rem;
        flex-wrap: wrap; }`, and this contents list is a <nav> -- so without this every heading and
        link laid out as a wrapping row instead of a list, which is exactly what "out of whack"
        looked like. The scoped selector out-specifies the element rule.
    */
    display: block;

    position: sticky;
    /*
        Clears the sticky page header rather than sliding under it -- #pageheaders is
        position: sticky, top: 0, z-index: 1000.
    */
    top: 84px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-right: 1px solid #e5e7eb;
    padding-right: 14px;
}

.help-toc-title[b-ux9hjwp5vv] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: 10px;
}

.help-toc-section[b-ux9hjwp5vv] {
    font-size: .8rem;
    font-weight: 700;
    color: #0f172a;
    margin: 14px 0 5px;
}

.help-toc-link[b-ux9hjwp5vv] {
    display: block;
    font-size: .84rem;
    color: #475569;
    text-decoration: none;
    padding: 3px 0 3px 10px;
    border-left: 2px solid transparent;
}

.help-toc-link:hover[b-ux9hjwp5vv] {
    color: rgb(8, 98, 155);
    border-left-color: rgb(8, 98, 155);
}

/* A measure this wide is about 75 characters at this size -- long enough not to feel cramped,
   short enough that the eye finds the next line without effort. */
.help-content[b-ux9hjwp5vv] {
    max-width: 78ch;
}

/* ---------------------------------------------------------------- topics */

.help-section-heading[b-ux9hjwp5vv] {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgb(8, 98, 155);
    margin: 30px 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.help-section-heading:first-child[b-ux9hjwp5vv] {
    margin-top: 0;
}

.help-topic[b-ux9hjwp5vv] {
    /* Offsets the sticky header so an anchored topic is not hidden under it on arrival. */
    scroll-margin-top: 90px;
    padding: 18px 0 6px;
    border-bottom: 1px solid #f1f5f9;
}

.help-topic-title[b-ux9hjwp5vv] {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.help-topic-summary[b-ux9hjwp5vv] {
    color: #64748b;
    font-size: .9rem;
    margin: 0 0 12px;
}

.help-topic p[b-ux9hjwp5vv] {
    line-height: 1.62;
    margin: 0 0 10px;
    font-size: .93rem;
}

.help-steps[b-ux9hjwp5vv] {
    margin: 4px 0 12px;
    padding-left: 20px;
}

.help-steps li[b-ux9hjwp5vv] {
    line-height: 1.6;
    margin-bottom: 5px;
    font-size: .93rem;
}

/* ---------------------------------------------------------------- flow diagram */

.help-flow[b-ux9hjwp5vv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 4px 0 14px;
}

.help-flow-step[b-ux9hjwp5vv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 20px;
    padding: 5px 12px 5px 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

.help-flow-num[b-ux9hjwp5vv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(8, 98, 155);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.help-flow-arrow[b-ux9hjwp5vv] {
    color: #94a3b8;
    font-size: .9rem;
    line-height: 1;
}

/* ---------------------------------------------------------------- links and permissions */

.help-meta[b-ux9hjwp5vv] {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0 4px;
}

.help-meta-block[b-ux9hjwp5vv] {
    min-width: 0;
}

.help-meta-label[b-ux9hjwp5vv] {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.help-chip[b-ux9hjwp5vv] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 16px;
    padding: 4px 6px 4px 11px;
    margin: 0 6px 6px 0;
    font-size: .82rem;
    color: rgb(8, 98, 155);
    text-decoration: none;
    font-weight: 500;
}

.help-chip:hover[b-ux9hjwp5vv] {
    border-color: rgb(8, 98, 155);
    background: #f0f7fc;
}

/* Monospace so a permission reads as an exact name to quote to an administrator, not as prose. */
.help-perm[b-ux9hjwp5vv] {
    display: inline-block;
    background: #eef2f6;
    border-radius: 5px;
    padding: 2px 8px;
    margin: 0 6px 5px 0;
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #334155;
}

.help-perm-none[b-ux9hjwp5vv] {
    font-size: .82rem;
    color: #16c444;
    font-weight: 600;
}

/* ---------------------------------------------------------------- reference table */

.help-table-wrap[b-ux9hjwp5vv] {
    overflow-x: auto;
    margin: 12px 0;
}

.help-table[b-ux9hjwp5vv] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.help-table th[b-ux9hjwp5vv] {
    text-align: left;
    background: #f1f5f9;
    padding: 8px 10px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.help-table td[b-ux9hjwp5vv] {
    padding: 8px 10px;
    border-top: 1px solid #e5e7eb;
    vertical-align: top;
}

.help-table tbody tr:hover[b-ux9hjwp5vv] {
    background: #f8fafc;
}

.help-table a[b-ux9hjwp5vv] {
    color: rgb(8, 98, 155);
    text-decoration: none;
}

.help-table a:hover[b-ux9hjwp5vv] {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
    .help-body[b-ux9hjwp5vv] {
        grid-template-columns: 1fr;
    }

    /* Unpinned and collapsed to a short list: a sticky sidebar on a phone eats the screen the
       content needs. */
    .help-toc[b-ux9hjwp5vv] {
        position: static;
        top: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 0 0 12px;
        margin-bottom: 8px;
    }

    .help-content[b-ux9hjwp5vv] {
        max-width: 100%;
    }

    .help-hero[b-ux9hjwp5vv] {
        padding: 20px;
    }
}

/* ---------------------------------------------------------------- teaching blocks

   Three distinct kinds of content that must not read as more body text: the ideas to grasp first,
   a worked example, and what goes wrong. Each gets its own colour and a label, so a reader
   skimming for "just show me the numbers" can find the example without reading around it. */

.help-block-label[b-ux9hjwp5vv] {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.help-concepts[b-ux9hjwp5vv] {
    background: #f0f7fc;
    border-left: 3px solid rgb(8, 98, 155);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 12px 0 14px;
}

.help-concepts .help-block-label[b-ux9hjwp5vv] {
    color: rgb(8, 98, 155);
}

.help-concepts ul[b-ux9hjwp5vv],
.help-pitfalls ul[b-ux9hjwp5vv] {
    margin: 0;
    padding-left: 18px;
}

.help-concepts li[b-ux9hjwp5vv],
.help-pitfalls li[b-ux9hjwp5vv] {
    line-height: 1.55;
    margin-bottom: 6px;
    font-size: .9rem;
}

.help-concepts li:last-child[b-ux9hjwp5vv],
.help-pitfalls li:last-child[b-ux9hjwp5vv] {
    margin-bottom: 0;
}

.help-example[b-ux9hjwp5vv] {
    background: #fbfdff;
    border: 1px solid #dbe7f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
}

.help-example .help-block-label[b-ux9hjwp5vv] {
    color: #16a34a;
}

.help-example-title[b-ux9hjwp5vv] {
    font-weight: 700;
    font-size: .95rem;
    color: #0f172a;
    margin-bottom: 4px;
}

.help-example-scenario[b-ux9hjwp5vv] {
    font-size: .9rem;
    color: #475569;
    margin: 0 0 12px;
    line-height: 1.55;
}

.help-example-table[b-ux9hjwp5vv] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.help-example-table th[b-ux9hjwp5vv] {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    padding: 0 10px 6px 0;
    font-weight: 700;
}

.help-example-table td[b-ux9hjwp5vv] {
    padding: 7px 10px 7px 0;
    border-top: 1px solid #e8eef4;
    vertical-align: top;
    line-height: 1.5;
}

/* The action column is the shorter half; the figures need the room. */
.help-example-table td:first-child[b-ux9hjwp5vv] {
    width: 38%;
    color: #0f172a;
    font-weight: 600;
}

.help-example-table td:last-child[b-ux9hjwp5vv] {
    color: #475569;
}

.help-example-outcome[b-ux9hjwp5vv] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e8eef4;
    font-size: .88rem;
    color: #15803d;
    font-weight: 600;
}

.help-pitfalls[b-ux9hjwp5vv] {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 12px 0 14px;
}

.help-pitfalls .help-block-label[b-ux9hjwp5vv] {
    color: #b45309;
}

@media (max-width: 700px) {
    /* Stacked: two columns of prose in a phone-width table is unreadable. */
    .help-example-table td:first-child[b-ux9hjwp5vv] {
        width: auto;
    }
}

/*  "Show me" sits under the summary, before the prose, because somebody who would rather be shown
    than read should not have to scroll past the reading to find that out. Quiet by default -- the
    written topic is still the main thing on the page. */
.help-tour-btn[b-ux9hjwp5vv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 12px;
    padding: 6px 14px;
    border: 1px solid rgb(8, 98, 155);
    border-radius: 20px;
    background: #fff;
    color: rgb(8, 98, 155);
    font-size: 0.84rem;
    cursor: pointer;
}

.help-tour-btn:hover[b-ux9hjwp5vv] {
    background: rgb(8, 98, 155);
    color: #fff;
}

.help-rec[b-ux9hjwp5vv] {
    margin: 0 0 14px;
}

.help-rec-toggle[b-ux9hjwp5vv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 10px;
    border: 1px solid #d6dce2;
    border-radius: 20px;
    background: #fff;
    color: #33414d;
    font-size: 0.84rem;
    cursor: pointer;
}

.help-rec-toggle:hover[b-ux9hjwp5vv] { border-color: rgb(8, 98, 155); color: rgb(8, 98, 155); }

/*  Bounded rather than natural size. A walkthrough GIF is wide, and left to itself it would
    dwarf the text it belongs to. */
.help-rec-img[b-ux9hjwp5vv] {
    display: block;
    margin-top: 10px;
    max-width: 100%;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
}

.help-rec-note[b-ux9hjwp5vv] {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #7a8894;
    max-width: 60ch;
}

/*  Several toggles can sit together on one topic, so they need to stack rather than run into
    each other. */
.help-rec-toggle[b-ux9hjwp5vv] { margin-right: 8px; margin-bottom: 6px; }
/* /Pages/Index.razor.rz.scp.css */
/* The public landing page. Plain selectors only: every element is this page's own markup, so
   ::deep would match nothing (see CLAUDE.md, the CreateQuote.razor.css lesson). Single @ on
   @keyframes and @media -- .razor.css is never Razor-templated. */

.lp-shell[b-4k4uha4x1o] {
    --lp-navy: #071a2c;
    --lp-navy-2: #0b2a45;
    --lp-blue: rgb(8, 98, 155);
    --lp-blue-bright: #1f8fe0;
    --lp-green: #16c444;
    --lp-amber: #f0a020;
    --lp-purple: #7b4fc9;
    --lp-rose: #e0567a;
    --lp-ink: #13212f;
    --lp-body: #3a4757;
    --lp-muted: #6b7786;
    --lp-line: #e3e8ef;
    --lp-soft: #f5f8fb;
    background: #ffffff;
    color: var(--lp-body);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.lp-wrap[b-4k4uha4x1o] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.lp-shell h1[b-4k4uha4x1o], .lp-shell h2[b-4k4uha4x1o], .lp-shell h3[b-4k4uha4x1o] {
    color: var(--lp-ink);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* ================================================================ buttons */

.lp-btn[b-4k4uha4x1o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 18px;
    font: 600 14px/1.2 inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    white-space: nowrap;
}

.lp-btn:disabled[b-4k4uha4x1o] {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.lp-btn-lg[b-4k4uha4x1o] { padding: 13px 24px; font-size: 15px; }
.lp-btn-block[b-4k4uha4x1o] { width: 100%; }

.lp-btn-primary[b-4k4uha4x1o] {
    background: var(--lp-blue);
    color: #fff;
    box-shadow: 0 6px 18px rgba(8, 98, 155, .28);
}
.lp-btn-primary:hover[b-4k4uha4x1o] { background: #06517f; transform: translateY(-1px); color: #fff; }

.lp-btn-go[b-4k4uha4x1o] {
    background: var(--lp-green);
    color: #fff;
    box-shadow: 0 6px 18px rgba(22, 196, 68, .28);
}
.lp-btn-go:hover[b-4k4uha4x1o] { background: #12a93a; transform: translateY(-1px); color: #fff; }

.lp-btn-light[b-4k4uha4x1o] { background: #fff; color: var(--lp-blue); }
.lp-btn-light:hover[b-4k4uha4x1o] { transform: translateY(-1px); color: var(--lp-blue); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

.lp-btn-ghost-light[b-4k4uha4x1o] { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.lp-btn-ghost-light:hover[b-4k4uha4x1o] { background: rgba(255,255,255,.1); color: #fff; }

.lp-btn-ghost-dark[b-4k4uha4x1o] { background: transparent; color: var(--lp-blue); border-color: rgba(8,98,155,.35); }
.lp-btn-ghost-dark:hover[b-4k4uha4x1o] { background: rgba(8,98,155,.06); color: var(--lp-blue); }

.lp-link[b-4k4uha4x1o] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--lp-blue);
    font: 600 14px inherit;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-link:hover[b-4k4uha4x1o] { color: #0a3f66; text-decoration: underline; }

/* ================================================================ nav */

.lp-nav[b-4k4uha4x1o] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(227, 232, 239, .8);
}

.lp-brand[b-4k4uha4x1o] { display: inline-flex; align-items: center; }
.lp-brand-logo[b-4k4uha4x1o] { height: 38px; width: auto; }

.lp-nav-links[b-4k4uha4x1o] { display: flex; gap: 22px; margin-left: 12px; }
.lp-nav-links a[b-4k4uha4x1o] { color: var(--lp-body); text-decoration: none; font-size: 14px; font-weight: 500; }
.lp-nav-links a:hover[b-4k4uha4x1o] { color: var(--lp-blue); }

.lp-nav-actions[b-4k4uha4x1o] { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ================================================================ hero */

.lp-hero[b-4k4uha4x1o] {
    position: relative;
    background: radial-gradient(1200px 600px at 80% -10%, #12507f 0%, transparent 60%),
                linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy-2) 100%);
    color: #c9d6e3;
    padding: 84px 0 96px;
    overflow: hidden;
}

.lp-hero-glow[b-4k4uha4x1o] {
    position: absolute;
    inset: auto -10% -40% auto;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(22,196,68,.18) 0%, transparent 65%);
    pointer-events: none;
}

.lp-hero-grid[b-4k4uha4x1o] {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}

.lp-pill[b-4k4uha4x1o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #dce7f1;
    font-size: 13px;
    font-weight: 600;
}

.lp-hero h1[b-4k4uha4x1o] {
    color: #fff;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    margin: 20px 0 18px;
}

.lp-grad[b-4k4uha4x1o] {
    display: block;
    background: linear-gradient(90deg, #5fc0ff 0%, #6ff29a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lp-lead[b-4k4uha4x1o] { font-size: 18px; max-width: 560px; color: #b8c8d8; margin: 0 0 28px; }

.lp-hero-cta[b-4k4uha4x1o] { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-hero-note[b-4k4uha4x1o] { margin: 18px 0 0; font-size: 13px; color: #8fa5ba; display: flex; gap: 8px; align-items: center; }

/* floating preview cards */

.lp-hero-visual[b-4k4uha4x1o] { position: relative; height: 420px; }

.lp-float[b-4k4uha4x1o] {
    position: absolute;
    background: rgba(255,255,255,.97);
    color: var(--lp-body);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    min-width: 230px;
    animation: lp-bob-b-4k4uha4x1o 7s ease-in-out infinite;
}

.lp-float-head[b-4k4uha4x1o] { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--lp-muted); text-transform: uppercase; letter-spacing: .04em; }
.lp-float-head i[b-4k4uha4x1o] { color: var(--lp-blue); font-size: 15px; }
.lp-float-big[b-4k4uha4x1o] { font-size: 30px; font-weight: 800; color: var(--lp-ink); margin-top: 6px; }
.lp-float-sub[b-4k4uha4x1o] { font-size: 13px; color: var(--lp-muted); margin-top: 4px; }
.lp-float-row[b-4k4uha4x1o] { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-size: 14px; }
.lp-float-row strong[b-4k4uha4x1o] { color: var(--lp-ink); }

.lp-float-a[b-4k4uha4x1o] { top: 0; left: 4%; animation-delay: 0s; }
.lp-float-b[b-4k4uha4x1o] { top: 118px; right: 0; animation-delay: -2s; }
.lp-float-c[b-4k4uha4x1o] { top: 248px; left: 12%; animation-delay: -4s; }
.lp-float-d[b-4k4uha4x1o] { bottom: 8px; right: 6%; animation-delay: -5.5s; }

.lp-ok[b-4k4uha4x1o] { color: #12a93a; font-weight: 600; }
.lp-warn[b-4k4uha4x1o] { color: #c47d00; font-weight: 600; }

.lp-chip[b-4k4uha4x1o] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff4dc;
    color: #a86700;
    font-size: 12px;
    font-weight: 700;
}

.lp-bar[b-4k4uha4x1o] { height: 7px; border-radius: 99px; background: #e8eef5; overflow: hidden; margin-top: 8px; }
.lp-bar span[b-4k4uha4x1o] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lp-blue), var(--lp-green)); transition: width .3s ease; }

@keyframes lp-bob-b-4k4uha4x1o {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ================================================================ modules strip */

.lp-modules[b-4k4uha4x1o] { border-bottom: 1px solid var(--lp-line); background: #fff; }
.lp-modules-row[b-4k4uha4x1o] { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-top: 22px; padding-bottom: 22px; }
.lp-module[b-4k4uha4x1o] { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-body); font-size: 14px; font-weight: 600; }
.lp-module i[b-4k4uha4x1o] { color: var(--lp-blue); font-size: 17px; }

/* ================================================================ section heads */

.lp-section-head[b-4k4uha4x1o] { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.lp-section-head h2[b-4k4uha4x1o] { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 10px 0 12px; }
.lp-section-head p[b-4k4uha4x1o] { color: var(--lp-muted); font-size: 17px; margin: 0; }

.lp-eyebrow[b-4k4uha4x1o] {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-blue);
    background: rgba(8,98,155,.08);
    padding: 5px 12px;
    border-radius: 999px;
}
.lp-eyebrow-light[b-4k4uha4x1o] { color: #9fd6ff; background: rgba(255,255,255,.08); }

/* ================================================================ demo */

.lp-demo[b-4k4uha4x1o] { padding: 88px 0; background: linear-gradient(180deg, var(--lp-soft) 0%, #fff 100%); }

.lp-demo-card[b-4k4uha4x1o] {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(15, 40, 70, .1);
    overflow: hidden;
}

.lp-demo-tabs[b-4k4uha4x1o] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f2f6fa;
    border-bottom: 1px solid var(--lp-line);
}

.lp-demo-tab[b-4k4uha4x1o] {
    border: 0;
    background: transparent;
    padding: 16px 12px;
    font: 600 15px inherit;
    font-family: inherit;
    color: var(--lp-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, background .15s ease;
}
.lp-demo-tab i[b-4k4uha4x1o] { font-size: 18px; }
.lp-demo-tab:hover[b-4k4uha4x1o] { color: var(--lp-ink); background: rgba(255,255,255,.6); }
.lp-demo-tab.is-active[b-4k4uha4x1o] { color: var(--lp-blue); background: #fff; border-bottom-color: var(--lp-blue); }

.lp-demo-sample[b-4k4uha4x1o] {
    font-size: 12.5px;
    color: var(--lp-muted);
    padding: 10px 24px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-demo-body[b-4k4uha4x1o] { padding: 18px 24px 26px; animation: lp-fade-b-4k4uha4x1o .25s ease; }

@keyframes lp-fade-b-4k4uha4x1o {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.lp-demo-label[b-4k4uha4x1o] { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-muted); margin: 8px 0 10px; }

.lp-muted[b-4k4uha4x1o] { color: var(--lp-muted); }

.lp-tone-blue[b-4k4uha4x1o] { background: rgba(31,143,224,.12); color: var(--lp-blue-bright); }
.lp-tone-green[b-4k4uha4x1o] { background: rgba(22,196,68,.12); color: #12a93a; }
.lp-tone-amber[b-4k4uha4x1o] { background: rgba(240,160,32,.14); color: #c47d00; }
.lp-tone-purple[b-4k4uha4x1o] { background: rgba(123,79,201,.12); color: var(--lp-purple); }
.lp-tone-rose[b-4k4uha4x1o] { background: rgba(224,86,122,.12); color: var(--lp-rose); }

/* ---- sale */

.lp-sale[b-4k4uha4x1o] { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }

.lp-tiles[b-4k4uha4x1o] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.lp-tile[b-4k4uha4x1o] {
    text-align: left;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lp-tile:hover:not(:disabled)[b-4k4uha4x1o] { border-color: var(--lp-blue); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,98,155,.12); }
.lp-tile:disabled[b-4k4uha4x1o] { cursor: default; opacity: .6; }
.lp-tile.is-out[b-4k4uha4x1o] { opacity: .55; }

.lp-tile-icon[b-4k4uha4x1o] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.lp-tile-name[b-4k4uha4x1o] { font-weight: 700; color: var(--lp-ink); font-size: 14px; line-height: 1.25; }
.lp-tile-meta[b-4k4uha4x1o] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 700; color: var(--lp-ink); font-size: 14px; }
.lp-tile-stock[b-4k4uha4x1o] { font-size: 12px; color: var(--lp-muted); }

.lp-pack[b-4k4uha4x1o] {
    background: rgba(22,196,68,.14);
    color: #0f8a31;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.lp-inline-msg[b-4k4uha4x1o] {
    margin-top: 12px;
    color: #a86700;
    background: #fff7e6;
    border: 1px solid #f7d99a;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.lp-sale-ticket[b-4k4uha4x1o] {
    background: var(--lp-soft);
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.lp-ticket-head[b-4k4uha4x1o] { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: var(--lp-ink); }

.lp-empty[b-4k4uha4x1o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--lp-muted);
    text-align: center;
    font-size: 14px;
}
.lp-empty i[b-4k4uha4x1o] { font-size: 34px; color: #b8c4d0; }

.lp-lines[b-4k4uha4x1o] { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.lp-line[b-4k4uha4x1o] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 10px;
    border: 1px solid var(--lp-line);
    animation: lp-fade-b-4k4uha4x1o .2s ease;
}

.lp-line-main[b-4k4uha4x1o] { display: flex; flex-direction: column; min-width: 0; }
.lp-line-name[b-4k4uha4x1o] { font-weight: 700; color: var(--lp-ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-line-sub[b-4k4uha4x1o] { font-size: 12px; color: var(--lp-muted); }
.lp-line-total[b-4k4uha4x1o] { font-weight: 800; color: var(--lp-ink); font-size: 14px; min-width: 88px; text-align: right; }

.lp-qty[b-4k4uha4x1o] { display: inline-flex; align-items: center; border: 1px solid var(--lp-line); border-radius: 999px; overflow: hidden; background: #fff; }
.lp-qty button[b-4k4uha4x1o] { border: 0; background: transparent; width: 30px; height: 30px; font-size: 16px; font-weight: 700; color: var(--lp-blue); cursor: pointer; }
.lp-qty button:hover:not(:disabled)[b-4k4uha4x1o] { background: rgba(8,98,155,.08); }
.lp-qty button:disabled[b-4k4uha4x1o] { color: #b8c4d0; cursor: default; }
.lp-qty span[b-4k4uha4x1o] { min-width: 24px; text-align: center; font-weight: 700; color: var(--lp-ink); font-size: 14px; }
.lp-qty input[b-4k4uha4x1o] { width: 62px; border: 0; text-align: center; font: 700 14px inherit; font-family: inherit; color: var(--lp-ink); -moz-appearance: textfield; }
.lp-qty input[b-4k4uha4x1o]::-webkit-outer-spin-button, .lp-qty input[b-4k4uha4x1o]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lp-totals[b-4k4uha4x1o] { margin: 14px 0 6px; border-top: 1px dashed #cdd6e0; padding-top: 10px; }
.lp-totals div[b-4k4uha4x1o] { display: flex; justify-content: space-between; font-size: 13px; color: var(--lp-muted); }
.lp-total-due[b-4k4uha4x1o] { font-size: 20px !important; font-weight: 800; color: var(--lp-ink) !important; margin-top: 4px; }

.lp-tender[b-4k4uha4x1o] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lp-tender button[b-4k4uha4x1o] {
    border: 1px solid var(--lp-line);
    background: #fff;
    border-radius: 999px;
    padding: 7px 12px;
    font: 600 13px inherit;
    font-family: inherit;
    color: var(--lp-body);
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.lp-tender button:hover[b-4k4uha4x1o] { border-color: var(--lp-blue); }
.lp-tender button.is-active[b-4k4uha4x1o] { background: var(--lp-blue); color: #fff; border-color: var(--lp-blue); }

.lp-change[b-4k4uha4x1o] { font-size: 14px; margin-bottom: 10px; color: var(--lp-body); }
.lp-change strong[b-4k4uha4x1o] { color: #12a93a; }

.lp-sale-ticket .lp-btn-block[b-4k4uha4x1o] { margin-top: auto; }

.lp-receipt[b-4k4uha4x1o] { display: flex; flex-direction: column; gap: 12px; animation: lp-fade-b-4k4uha4x1o .25s ease; }
.lp-receipt-ok[b-4k4uha4x1o] { color: #12a93a; font-weight: 800; display: flex; gap: 8px; align-items: center; }

.lp-receipt-paper[b-4k4uha4x1o] {
    background: #fff;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(15,40,70,.08);
    border-top: 4px solid var(--lp-blue);
}
.lp-receipt-store[b-4k4uha4x1o] { font-weight: 800; text-align: center; color: var(--lp-ink); }
.lp-receipt-meta[b-4k4uha4x1o] { text-align: center; color: var(--lp-muted); font-size: 12px; margin-bottom: 8px; }
.lp-receipt-line[b-4k4uha4x1o] { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.lp-receipt-sum[b-4k4uha4x1o] { border-top: 1px dashed #cdd6e0; margin-top: 6px; padding-top: 6px; font-weight: 800; color: var(--lp-ink); }

.lp-receipt-after[b-4k4uha4x1o] { font-size: 13px; }
.lp-receipt-after strong[b-4k4uha4x1o] { color: var(--lp-ink); }
.lp-receipt-after ul[b-4k4uha4x1o] { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.lp-receipt-after li[b-4k4uha4x1o] { display: flex; gap: 8px; color: var(--lp-body); }
.lp-receipt-after i[b-4k4uha4x1o] { color: var(--lp-blue); }

/* ---- count */

.lp-count-intro[b-4k4uha4x1o] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 14px; }
.lp-count-intro p[b-4k4uha4x1o] { margin: 0; color: var(--lp-muted); }
.lp-count-progress[b-4k4uha4x1o] { min-width: 220px; font-size: 13px; font-weight: 600; color: var(--lp-body); }

.lp-table-wrap[b-4k4uha4x1o] { overflow-x: auto; border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-table[b-4k4uha4x1o] { width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-table th[b-4k4uha4x1o] { text-align: left; background: #f2f6fa; color: var(--lp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; white-space: nowrap; }
.lp-table td[b-4k4uha4x1o] { padding: 9px 14px; border-top: 1px solid var(--lp-line); color: var(--lp-ink); }
.lp-table .num[b-4k4uha4x1o] { text-align: right; }
.lp-table input[b-4k4uha4x1o] {
    width: 110px;
    padding: 6px 10px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    text-align: right;
    font: 600 14px inherit;
    font-family: inherit;
}
.lp-table input:focus[b-4k4uha4x1o] { outline: 2px solid rgba(8,98,155,.35); border-color: var(--lp-blue); }
.lp-table tr.is-short td[b-4k4uha4x1o] { background: #fff5f5; }
.lp-table tr.is-short .lp-diff[b-4k4uha4x1o] { color: #c0392b; font-weight: 800; }
.lp-table tr.is-over td[b-4k4uha4x1o] { background: #f2fff5; }
.lp-table tr.is-over .lp-diff[b-4k4uha4x1o] { color: #12a93a; font-weight: 800; }

.lp-count-foot[b-4k4uha4x1o] { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 14px; }
.lp-count-foot p[b-4k4uha4x1o] { margin: 0; font-size: 14px; }

.lp-result[b-4k4uha4x1o] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    margin-top: 12px;
}
.lp-result i[b-4k4uha4x1o] { font-size: 18px; margin-top: 1px; }
.lp-result-ok[b-4k4uha4x1o] { background: #effcf3; color: #145a2a; border: 1px solid #bfe9cc; }
.lp-result-ok i[b-4k4uha4x1o] { color: #12a93a; }
.lp-result-warn[b-4k4uha4x1o] { background: #fff7e6; color: #7a4d00; border: 1px solid #f7d99a; }
.lp-result-warn i[b-4k4uha4x1o] { color: #d38a00; }
.lp-result-bad[b-4k4uha4x1o] { background: #fff1f0; color: #7d1d15; border: 1px solid #f5c2bd; }
.lp-result-bad i[b-4k4uha4x1o] { color: #c0392b; }

/* ---- batch */

.lp-batch-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.lp-batch-input[b-4k4uha4x1o] { display: flex; gap: 12px; align-items: center; background: var(--lp-soft); border: 1px solid var(--lp-line); border-radius: 12px; padding: 12px; }
.lp-batch-input div[b-4k4uha4x1o] { display: flex; flex-direction: column; }
.lp-batch-input strong[b-4k4uha4x1o] { color: var(--lp-ink); }
.lp-batch-input .lp-muted[b-4k4uha4x1o] { font-size: 13px; }

.lp-batch-row[b-4k4uha4x1o] { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lp-line); }
.lp-batch-name[b-4k4uha4x1o] { font-weight: 700; color: var(--lp-ink); font-size: 14px; }
.lp-batch-name .lp-muted[b-4k4uha4x1o] { font-weight: 500; font-size: 12px; margin-left: 6px; }

.lp-balance[b-4k4uha4x1o] { background: var(--lp-soft); border: 1px solid var(--lp-line); border-radius: 14px; padding: 16px; }

.lp-gauge[b-4k4uha4x1o] { height: 16px; border-radius: 99px; background: #e0e7ef; overflow: hidden; }
.lp-gauge-fill[b-4k4uha4x1o] { height: 100%; background: linear-gradient(90deg, #1f8fe0, var(--lp-green)); border-radius: inherit; transition: width .25s ease; }
.lp-gauge-fill.is-warn[b-4k4uha4x1o] { background: linear-gradient(90deg, #f0a020, #f5c04a); }
.lp-gauge-fill.is-bad[b-4k4uha4x1o] { background: linear-gradient(90deg, #d9534f, #e57a76); }

.lp-balance-rows[b-4k4uha4x1o] { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.lp-balance-rows div[b-4k4uha4x1o] { display: flex; justify-content: space-between; }
.lp-balance-rows strong[b-4k4uha4x1o] { color: var(--lp-ink); }
.lp-balance-pct[b-4k4uha4x1o] { border-top: 1px dashed #cdd6e0; margin-top: 4px; padding-top: 6px; font-size: 16px; }

.lp-balance .lp-btn-block[b-4k4uha4x1o] { margin-top: 14px; }

.lp-trace[b-4k4uha4x1o] { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; animation: lp-fade-b-4k4uha4x1o .25s ease; }
.lp-trace-node[b-4k4uha4x1o] { background: #fff; border: 1px solid var(--lp-line); border-radius: 10px; padding: 8px 12px; font-weight: 700; color: var(--lp-ink); font-family: "Consolas", Menlo, monospace; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.lp-trace-node .lp-muted[b-4k4uha4x1o] { font-family: "Segoe UI", sans-serif; font-weight: 500; }
.lp-trace-new[b-4k4uha4x1o] { border-color: var(--lp-green); box-shadow: 0 0 0 3px rgba(22,196,68,.15); }
.lp-trace-arrow[b-4k4uha4x1o] { color: var(--lp-muted); padding-left: 18px; }
.lp-trace p[b-4k4uha4x1o] { margin: 4px 0 0; font-size: 13px; }

/* ---- dashboard */

.lp-dash-head[b-4k4uha4x1o] { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 16px; }

.lp-chips[b-4k4uha4x1o] { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip-btn[b-4k4uha4x1o] {
    border: 1px solid var(--lp-line);
    background: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font: 600 13px inherit;
    font-family: inherit;
    color: var(--lp-body);
    cursor: pointer;
}
.lp-chip-btn:hover[b-4k4uha4x1o] { border-color: var(--lp-blue); }
.lp-chip-btn.is-active[b-4k4uha4x1o] { background: var(--lp-ink); color: #fff; border-color: var(--lp-ink); }

.lp-kpis[b-4k4uha4x1o] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.lp-kpi[b-4k4uha4x1o] { background: var(--lp-soft); border: 1px solid var(--lp-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.lp-kpi span[b-4k4uha4x1o] { font-size: 12px; font-weight: 700; color: var(--lp-muted); text-transform: uppercase; letter-spacing: .05em; }
.lp-kpi strong[b-4k4uha4x1o] { font-size: 26px; color: var(--lp-ink); font-weight: 800; }
.lp-kpi em[b-4k4uha4x1o] { font-style: normal; font-size: 13px; color: var(--lp-muted); }
.lp-kpi em.lp-up[b-4k4uha4x1o] { color: #12a93a; font-weight: 600; }

.lp-chart[b-4k4uha4x1o] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    align-items: end;
    height: 240px;
    padding: 14px 12px 0;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, var(--lp-soft) 100%);
}
.lp-chart-col[b-4k4uha4x1o] { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.lp-chart-bar[b-4k4uha4x1o] {
    width: 100%;
    max-width: 44px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #2fa6ff 0%, var(--lp-blue) 100%);
    transform-origin: bottom;
    animation: lp-grow-b-4k4uha4x1o .7s cubic-bezier(.2,.8,.2,1) both;
}
.lp-chart-col:hover .lp-chart-bar[b-4k4uha4x1o] { background: linear-gradient(180deg, #6ff29a 0%, var(--lp-green) 100%); }
.lp-chart-col span[b-4k4uha4x1o] { font-size: 11px; color: var(--lp-muted); padding-bottom: 8px; }

@keyframes lp-grow-b-4k4uha4x1o {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* ================================================================ features */

.lp-features[b-4k4uha4x1o] { padding: 88px 0; }

.lp-feature-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.lp-feature[b-4k4uha4x1o] {
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    padding: 24px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp-feature:hover[b-4k4uha4x1o] { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,40,70,.08); border-color: #cfdae6; }

.lp-feature-icon[b-4k4uha4x1o] { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.lp-feature h3[b-4k4uha4x1o] { font-size: 19px; margin: 14px 0 6px; }
.lp-feature p[b-4k4uha4x1o] { margin: 0 0 12px; color: var(--lp-muted); font-size: 15px; }
.lp-feature ul[b-4k4uha4x1o] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lp-feature li[b-4k4uha4x1o] { display: flex; gap: 8px; font-size: 14px; color: var(--lp-body); }
.lp-feature li i[b-4k4uha4x1o] { color: #12a93a; font-weight: 800; }

/* ================================================================ getting started */

.lp-how[b-4k4uha4x1o] { padding: 80px 0; background: var(--lp-soft); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); }

.lp-steps[b-4k4uha4x1o] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.lp-step[b-4k4uha4x1o] { background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 24px; position: relative; }
.lp-step-num[b-4k4uha4x1o] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lp-blue);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lp-step h3[b-4k4uha4x1o] { font-size: 18px; margin: 14px 0 6px; }
.lp-step p[b-4k4uha4x1o] { margin: 0; color: var(--lp-muted); font-size: 15px; }

/* ================================================================ trust */

.lp-trust[b-4k4uha4x1o] { padding: 88px 0; background: linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy-2) 100%); color: #b8c8d8; }
.lp-trust-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.lp-trust h2[b-4k4uha4x1o] { color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 12px 0 14px; }
.lp-trust-copy p[b-4k4uha4x1o] { margin: 0 0 24px; font-size: 17px; }

.lp-trust-list[b-4k4uha4x1o] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-trust-item[b-4k4uha4x1o] { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px; display: flex; gap: 12px; }
.lp-trust-item i[b-4k4uha4x1o] { font-size: 22px; color: #6ff29a; }
.lp-trust-item div[b-4k4uha4x1o] { display: flex; flex-direction: column; gap: 4px; }
.lp-trust-item strong[b-4k4uha4x1o] { color: #fff; }
.lp-trust-item span[b-4k4uha4x1o] { font-size: 14px; }

/* ================================================================ cta + footer */

.lp-cta[b-4k4uha4x1o] { padding: 76px 0; background: linear-gradient(120deg, var(--lp-blue) 0%, #0a3f66 100%); color: #d8e6f2; }
.lp-cta-inner[b-4k4uha4x1o] { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-cta h2[b-4k4uha4x1o] { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.lp-cta p[b-4k4uha4x1o] { margin: 0 0 10px; max-width: 620px; font-size: 17px; }

.lp-footer[b-4k4uha4x1o] { padding: 26px 0; background: #fff; border-top: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 14px; }
.lp-footer-inner[b-4k4uha4x1o] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-footer-logo[b-4k4uha4x1o] { height: 30px; width: auto; }

/* ================================================================ redirect, placeholders */

.lp-redirect[b-4k4uha4x1o] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", -apple-system, sans-serif;
    color: #6b7786;
}

/* A detail still to be supplied: visible, but obviously marked. */
.lp-ph[b-4k4uha4x1o] {
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
}

.lp-code[b-4k4uha4x1o] {
    font-family: "Consolas", Menlo, monospace;
    font-size: 13px;
    background: rgba(8,98,155,.08);
    padding: 1px 6px;
    border-radius: 6px;
    color: var(--lp-blue);
    white-space: nowrap;
}

/* ================================================================ who it's for */

.lp-who[b-4k4uha4x1o] { padding: 88px 0; }

.lp-who-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.lp-who-card[b-4k4uha4x1o] {
    position: relative;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    padding: 26px 24px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.lp-who-card:hover[b-4k4uha4x1o] { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,40,70,.08); }
.lp-who-card.is-highlight[b-4k4uha4x1o] { border-color: rgba(224,86,122,.45); box-shadow: 0 18px 44px rgba(224,86,122,.12); }
.lp-who-card h3[b-4k4uha4x1o] { font-size: 19px; margin: 14px 0 6px; }
.lp-who-card p[b-4k4uha4x1o] { margin: 0 0 12px; color: var(--lp-muted); font-size: 15px; }
.lp-who-card ul[b-4k4uha4x1o] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lp-who-card li[b-4k4uha4x1o] { display: flex; gap: 8px; font-size: 14px; }
.lp-who-card li i[b-4k4uha4x1o] { color: #12a93a; }

.lp-who-badge[b-4k4uha4x1o] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--lp-rose);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

/* ================================================================ about */

.lp-about[b-4k4uha4x1o] { padding: 88px 0; }
.lp-about-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.lp-about h2[b-4k4uha4x1o] { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 12px 0 16px; }
.lp-about p[b-4k4uha4x1o] { font-size: 17px; margin: 0 0 14px; }

.lp-about-values[b-4k4uha4x1o] { display: flex; flex-direction: column; gap: 14px; }
.lp-value[b-4k4uha4x1o] { display: flex; gap: 14px; background: var(--lp-soft); border: 1px solid var(--lp-line); border-radius: 14px; padding: 18px; }
.lp-value i[b-4k4uha4x1o] { font-size: 22px; color: var(--lp-blue); }
.lp-value div[b-4k4uha4x1o] { display: flex; flex-direction: column; gap: 3px; }
.lp-value strong[b-4k4uha4x1o] { color: var(--lp-ink); }
.lp-value span[b-4k4uha4x1o] { font-size: 14px; color: var(--lp-muted); }

/* ================================================================ quote */

.lp-quote[b-4k4uha4x1o] { padding: 88px 0; background: linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy-2) 100%); color: #b8c8d8; }
.lp-quote-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.lp-quote h2[b-4k4uha4x1o] { color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 12px 0 14px; }
.lp-quote-copy p[b-4k4uha4x1o] { font-size: 17px; margin: 0 0 20px; }
.lp-quote-points[b-4k4uha4x1o] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-quote-points li[b-4k4uha4x1o] { display: flex; gap: 10px; }
.lp-quote-points i[b-4k4uha4x1o] { color: #6ff29a; }

.lp-quote-form[b-4k4uha4x1o] {
    background: #fff;
    color: var(--lp-body);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 30px 70px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-form-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.lp-field[b-4k4uha4x1o] { display: flex; flex-direction: column; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.lp-field > span[b-4k4uha4x1o], .lp-field legend[b-4k4uha4x1o] { font-size: 13px; font-weight: 700; color: var(--lp-ink); padding: 0; }
.lp-field input[b-4k4uha4x1o], .lp-field select[b-4k4uha4x1o], .lp-field textarea[b-4k4uha4x1o] {
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    padding: 10px 12px;
    font: 15px inherit;
    font-family: inherit;
    color: var(--lp-ink);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.lp-field input:focus[b-4k4uha4x1o], .lp-field select:focus[b-4k4uha4x1o], .lp-field textarea:focus[b-4k4uha4x1o] { outline: 2px solid rgba(8,98,155,.3); border-color: var(--lp-blue); }
.lp-field textarea[b-4k4uha4x1o] { resize: vertical; }
.lp-field-full[b-4k4uha4x1o] { grid-column: 1 / -1; }

.lp-checks[b-4k4uha4x1o] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lp-check[b-4k4uha4x1o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.lp-check:has(input:checked)[b-4k4uha4x1o] { border-color: var(--lp-blue); background: rgba(8,98,155,.06); color: var(--lp-blue); font-weight: 600; }
.lp-check input[b-4k4uha4x1o] { accent-color: var(--lp-blue); margin: 0; }

.lp-form-note[b-4k4uha4x1o] { margin: -4px 0 0; font-size: 12.5px; color: var(--lp-muted); text-align: center; }

.lp-quote-done[b-4k4uha4x1o] { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lp-quote-done > i[b-4k4uha4x1o] { font-size: 36px; color: #12a93a; }
.lp-quote-done h3[b-4k4uha4x1o] { font-size: 22px; }
.lp-quote-done p[b-4k4uha4x1o] { margin: 0; }
.lp-quote-copybox[b-4k4uha4x1o] {
    width: 100%;
    box-sizing: border-box;
    background: var(--lp-soft);
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    white-space: pre-wrap;
    margin: 0;
    max-height: 220px;
    overflow: auto;
}

/* ================================================================ contact */

.lp-contact[b-4k4uha4x1o] { padding: 88px 0 72px; }
.lp-contact-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lp-contact-card[b-4k4uha4x1o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: var(--lp-body);
    background: #fff;
    min-width: 0;
    transition: border-color .15s ease, transform .15s ease;
}
a.lp-contact-card:hover[b-4k4uha4x1o] { border-color: var(--lp-blue); transform: translateY(-2px); color: var(--lp-body); }
.lp-contact-card i[b-4k4uha4x1o] { font-size: 22px; color: var(--lp-blue); }
.lp-contact-card strong[b-4k4uha4x1o] { color: var(--lp-ink); }
.lp-contact-card span[b-4k4uha4x1o] { font-size: 14px; overflow-wrap: anywhere; }

/* ================================================================ faq */

.lp-faq[b-4k4uha4x1o] { padding: 72px 0 88px; background: var(--lp-soft); border-top: 1px solid var(--lp-line); }
.lp-faq-wrap[b-4k4uha4x1o] { max-width: 820px; }
.lp-faq-item[b-4k4uha4x1o] { background: #fff; border: 1px solid var(--lp-line); border-radius: 12px; margin-bottom: 10px; padding: 0 18px; }
.lp-faq-item summary[b-4k4uha4x1o] {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    font-weight: 700;
    color: var(--lp-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.lp-faq-item summary[b-4k4uha4x1o]::-webkit-details-marker { display: none; }
.lp-faq-item summary i[b-4k4uha4x1o] { transition: transform .2s ease; color: var(--lp-muted); }
.lp-faq-item[open] summary i[b-4k4uha4x1o] { transform: rotate(180deg); }
.lp-faq-item p[b-4k4uha4x1o] { margin: 0 0 16px; color: var(--lp-body); }

/* ================================================================ footer (columns) */

.lp-footer-grid[b-4k4uha4x1o] { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 28px; padding-top: 12px; padding-bottom: 20px; }
.lp-footer-grid div[b-4k4uha4x1o] { display: flex; flex-direction: column; gap: 8px; }
.lp-footer-grid strong[b-4k4uha4x1o] { color: var(--lp-ink); font-size: 14px; }
.lp-footer-grid a[b-4k4uha4x1o] { color: var(--lp-muted); text-decoration: none; font-size: 14px; }
.lp-footer-grid a:hover[b-4k4uha4x1o] { color: var(--lp-blue); }
.lp-footer-grid p[b-4k4uha4x1o] { margin: 0; font-size: 14px; }
.lp-footer-base[b-4k4uha4x1o] { border-top: 1px solid var(--lp-line); padding-top: 16px; font-size: 13px; }

/* ================================================================ responsive */

@media (max-width: 1024px) {
    .lp-hero-grid[b-4k4uha4x1o], .lp-trust-grid[b-4k4uha4x1o], .lp-about-grid[b-4k4uha4x1o], .lp-quote-grid[b-4k4uha4x1o] { grid-template-columns: 1fr; }
    .lp-who-grid[b-4k4uha4x1o] { grid-template-columns: 1fr; }
    .lp-contact-grid[b-4k4uha4x1o] { grid-template-columns: repeat(3, 1fr); }
    .lp-footer-grid[b-4k4uha4x1o] { grid-template-columns: 1fr 1fr; }
    .lp-hero-visual[b-4k4uha4x1o] { height: 380px; max-width: 520px; width: 100%; margin: 0 auto; }
    .lp-sale[b-4k4uha4x1o], .lp-batch-grid[b-4k4uha4x1o] { grid-template-columns: 1fr; }
    .lp-feature-grid[b-4k4uha4x1o] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .lp-nav[b-4k4uha4x1o] { padding: 10px 16px; gap: 12px; }
    .lp-nav-links[b-4k4uha4x1o] { display: none; }
    .lp-nav-demo[b-4k4uha4x1o] { display: none; }
    .lp-hero[b-4k4uha4x1o] { padding: 56px 0 64px; }
    .lp-hero-visual[b-4k4uha4x1o] { display: none; }
    .lp-demo-tabs[b-4k4uha4x1o] { grid-template-columns: repeat(2, 1fr); }
    .lp-demo-tab span[b-4k4uha4x1o] { font-size: 13px; }
    .lp-tiles[b-4k4uha4x1o] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-kpis[b-4k4uha4x1o] { grid-template-columns: 1fr; }
    .lp-chart[b-4k4uha4x1o] { gap: 4px; height: 200px; }
    .lp-feature-grid[b-4k4uha4x1o], .lp-steps[b-4k4uha4x1o], .lp-trust-list[b-4k4uha4x1o] { grid-template-columns: 1fr; }
    .lp-count-intro[b-4k4uha4x1o], .lp-count-foot[b-4k4uha4x1o] { flex-direction: column; align-items: stretch; }
    .lp-footer-inner[b-4k4uha4x1o] { flex-direction: column; }
    .lp-form-grid[b-4k4uha4x1o], .lp-contact-grid[b-4k4uha4x1o], .lp-footer-grid[b-4k4uha4x1o] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-float[b-4k4uha4x1o], .lp-chart-bar[b-4k4uha4x1o], .lp-demo-body[b-4k4uha4x1o], .lp-line[b-4k4uha4x1o], .lp-receipt[b-4k4uha4x1o], .lp-trace[b-4k4uha4x1o] { animation: none !important; }
    .lp-shell[b-4k4uha4x1o] { scroll-behavior: auto; }
}
/* /Pages/Inventory/DuplicateCodes.razor.rz.scp.css */
/*
    Plain selectors, no ::deep -- this page's top-level markup has no single wrapping element
    carrying the scope attribute, so a ::deep rule would compile to a selector that never matches.
    The one exception is the New Code input, which belongs to DxTextBox: see the note on it.
*/

/* Why the screen exists, once, at the top. Stated rather than assumed -- a barcode clash reads
   as untidiness until somebody explains what the till does with it. */
.dup-intro[b-8298v4om8o] {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px solid #dbe6f0;
    border-radius: 6px;
    background: #f4f9fd;
    color: #40505e;
    font-size: .86rem;
}

.dup-intro .bi[b-8298v4om8o] { color: rgb(8, 98, 155); }

.dup-controls[b-8298v4om8o] {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.dup-toggle[b-8298v4om8o] { display: flex; gap: 6px; }

.dup-check[b-8298v4om8o] { margin: 0; font-size: .86rem; }

.dup-code[b-8298v4om8o] {
    font-variant-numeric: tabular-nums;
    font-size: .84rem;
}

/* The actions sit above the grid they act on, not in the page toolbar, because they apply to the
   selected group rather than to the page. */
.dup-actions[b-8298v4om8o] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 12px;
}

.dup-note-inline[b-8298v4om8o] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #6b7280;
    font-size: .82rem;
}

/* Empty states sized like a grid, so "nothing here" sits roughly where the rows would and the
   heading is not left floating above nothing. */
.dup-empty[b-8298v4om8o] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: 18px 16px;
    margin-bottom: 10px;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #fbfcfd;
    color: #5a6068;
    font-size: .88rem;
}

.dup-empty .bi[b-8298v4om8o] { color: rgb(8, 98, 155); }

/* Finding nothing is good news here, so it does not look like a failed load. */
.dup-empty-good[b-8298v4om8o] {
    border-color: #bde5c8;
    background: #f4fbf6;
    color: #2f6b43;
}

.dup-empty-good .bi[b-8298v4om8o] { color: #16c444; }

/* The one row that is NOT changing, tinted so it is findable at a glance in a group of six. */
.dup-keep-row td[b-8298v4om8o] {
    background-color: #f2fbf5 !important;
}

.dup-flag[b-8298v4om8o] {
    display: inline-block;
    margin-left: .4rem;
    padding: .02rem .34rem;
    border-radius: 8px;
    background: #fdecec;
    color: #b02a37;
    font-size: .68rem;
    font-weight: 600;
}

.dup-newcode[b-8298v4om8o] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/*  The input belongs to DxTextBox, a child component, so its own element never carries this
    page's scope attribute and a plain rule would compile to a selector that matches nothing.
    .dup-newcode IS this page's markup, so it satisfies ::deep's ancestor requirement.  */
.dup-newcode[b-8298v4om8o]  .dup-newcode-input {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Pages/Inventory/MovementDetail.razor.rz.scp.css */
/*
    Plain selectors, no ::deep. Every element styled here is this component's own markup, and
    ::deep needs a scoped ANCESTOR separate from the matched element -- copying it onto a page that
    has no such wrapper is how those rules silently stop matching anything, which this app has been
    caught by before.
*/

.md-head[b-hktcokyon7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.md-title[b-hktcokyon7] {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

/* The movement is the one figure the whole page exists to explain, so it is sized to be read
   first and from a distance. Tabular numerals stop the digits shifting as values change. */
.md-delta[b-hktcokyon7] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.md-delta-type[b-hktcokyon7] {
    font-size: .75rem;
    font-weight: 400;
    margin-top: 4px;
}

.md-actions[b-hktcokyon7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Auto-fit rather than a fixed column count: a sale emits three groups and an adjustment one, and
   a fixed grid would leave a lone card stranded beside empty space. */
.md-groups[b-hktcokyon7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
}

.md-group[b-hktcokyon7] {
    height: auto;
}

.md-group-title[b-hktcokyon7] {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: 10px;
}

.md-fact[b-hktcokyon7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f3f5;
}

.md-fact:last-child[b-hktcokyon7] {
    border-bottom: none;
}

.md-fact-label[b-hktcokyon7] {
    color: #6b7280;
    font-size: .85rem;
    flex: 0 0 auto;
}

/* The value wraps and stays right-aligned: log messages and transfer comments are free text and
   can run long, and letting them overflow would push the layout sideways. */
.md-fact-value[b-hktcokyon7] {
    font-weight: 600;
    font-size: .88rem;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 700px) {
    .md-delta[b-hktcokyon7] {
        font-size: 1.5rem;
        text-align: left;
    }
}
/* /Pages/Inventory/ProductJournal.razor.rz.scp.css */
/*
    Plain selectors, no ::deep -- every element here is this page's own markup, and ::deep needs a
    scoped ancestor separate from the matched element.
*/

/*
    THIS OVERRIDE IS LOAD-BEARING, not cosmetic.

    The global .card sets `overflow: clip`, so a tooltip positioned outside the card's box is
    silently cut off -- it renders, and you see nothing, which reads as a popover that simply does
    not work. Scoped to this page's KPI cards only, so the clipping that keeps every other card's
    rounded corners clean is left alone. These contain nothing but text, so there is nothing here
    that needed clipping in the first place.

    Specificity: the isolation attribute makes this .pj-kpi[b-xxx] (0,2,0), which beats .card
    (0,1,0) without needing !important.
*/
.pj-kpi[b-zdisfshoks] {
    overflow: visible;

    /*
        Removing the transform is the ACTUAL fix, and no amount of z-index was ever going to
        substitute for it.

        The global .card sets `transform: translateZ(0)` as a compositing hint. Any transform other
        than `none` creates a NEW STACKING CONTEXT, which traps every descendant inside it -- so the
        tooltip's own z-index (999999999) was being resolved against its siblings *within the card*
        and never against the page. The card itself has z-index auto, so it painted in plain DOM
        order, and the alert further down the page painted over the whole card, tooltip included.
        That is why the popover appeared to slide behind the notice below it.

        These cards hold static text and animate nothing, so the compositing hint buys them
        nothing to lose.
    */
    transform: none;
}

/*
    Belt and braces on top of the fix above: lift the whole card while it is hovered, which is
    exactly when a tooltip can be open. If any ancestor ever gains its own stacking context -- a
    z-index on .card-grid, say -- this keeps the tooltip above later siblings anyway, and it costs
    nothing when it is not needed.
*/
.pj-kpi:hover[b-zdisfshoks] {
    z-index: 20;
}

.pj-kpi .card-subtitle[b-zdisfshoks] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/*
    Deliberately quiet. The icon is an offer of an explanation, not a call for attention -- the
    number is what the card is for, and an accent-coloured icon beside every one of five cards
    would compete with it. It brightens to the app's blue on hover, which is where the affordance
    actually needs to read.
*/
.pj-info[b-zdisfshoks] {
    color: #94a3b8;
    cursor: help;
    font-size: .85rem;
    transition: color .12s ease-in-out;
}

.pj-info:hover[b-zdisfshoks] {
    color: var(--omx-primary);
}

/*  Shown while the standing imbalance scan runs behind the page. Without it the tab shows an
    empty grid, which reads as "nothing is out of balance" rather than "not counted yet". */
.pj-anomaly-loading[b-zdisfshoks] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 4px 0 8px;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #4a5a6a;
    font-size: 13px;
}
/* /Pages/Inventory/ProductRequests/EditRequests.razor.rz.scp.css */
/*
    Process flow for an internal transfer.

    Plain selectors, no ::deep -- this markup is the page's own and sits at the top level with
    no wrapping component, so ::deep would need a scoped ancestor it does not have.

    Colours are the app's own tokens rather than new ones: the primary blue for the stage in
    progress, the accent green for completed stages, the negative red for a terminal
    rejection or cancellation.
*/

.xfer-flow-wrap[b-0kjskaaz83] {
    background: #fff;
    border: 1px solid #e4eaf1;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 16px;
}

.xfer-flow[b-0kjskaaz83] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}

.xfer-step[b-0kjskaaz83] {
    display: grid;
    grid-template-columns: 26px auto;
    grid-template-rows: auto auto auto;
    column-gap: 8px;
    align-items: center;
    min-width: 0;
}

.xfer-step-icon[b-0kjskaaz83] {
    grid-row: 1 / 2;
    grid-column: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c7d0d9;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.xfer-step-label[b-0kjskaaz83] {
    grid-row: 1 / 2;
    grid-column: 2;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b7784;
    white-space: nowrap;
}

/* Who did it, and when. The reason this flow exists rather than a row of labels. */
.xfer-step-who[b-0kjskaaz83] {
    grid-row: 2 / 3;
    grid-column: 2;
    font-size: 11.5px;
    color: #42505e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.xfer-step-when[b-0kjskaaz83] {
    grid-row: 3 / 4;
    grid-column: 2;
    font-size: 11px;
    color: #8a95a1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.xfer-connector[b-0kjskaaz83] {
    height: 2px;
    background: #d7dee5;
    flex: 1 1 18px;
    min-width: 18px;
    margin-top: 12px;
}

.xfer-step-done .xfer-step-icon[b-0kjskaaz83]      { background: #16c444; }
.xfer-step-done .xfer-step-label[b-0kjskaaz83]     { color: #16c444; }
.xfer-connector-done[b-0kjskaaz83]                 { background: #16c444; }

.xfer-step-active .xfer-step-icon[b-0kjskaaz83]    { background: rgb(8, 98, 155); }
.xfer-step-active .xfer-step-label[b-0kjskaaz83]   { color: rgb(8, 98, 155); }
.xfer-connector-active[b-0kjskaaz83]               { background: rgb(8, 98, 155); }

.xfer-step-error .xfer-step-icon[b-0kjskaaz83]     { background: #b02a37; }
.xfer-step-error .xfer-step-label[b-0kjskaaz83]    { color: #b02a37; }
.xfer-connector-error[b-0kjskaaz83]                { background: #b02a37; }

.xfer-flow-comment[b-0kjskaaz83] {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dotted #e2e8f0;
    font-size: 12.5px;
    color: #5b6773;
}

.xfer-flow-comment i[b-0kjskaaz83] { color: #8a95a1; margin-right: 5px; }

@media (max-width: 900px) {
    .xfer-connector[b-0kjskaaz83] { display: none; }
    .xfer-flow[b-0kjskaaz83] { gap: 14px 22px; }
}
/* /Pages/Inventory/ProductRequests/PickScan.razor.rz.scp.css */
/*
    Picking screen. Sized for a tablet held in one hand, and for the phones this is heading
    towards.

    Every interactive target is at least 48px because it is operated with a thumb, often
    gloved. Type is large because a picker glances rather than reads. Plain selectors, no
    ::deep -- this markup is the page's own and has no wrapping component to scope against.
*/

.pick[b-y0lwuk8fg5] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #f4f7fa;
    font-family: inherit;
    overflow: hidden;
}

/* ------------------------------------------------------------------ header */
.pick-top[b-y0lwuk8fg5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgb(8, 98, 155);
    color: #fff;
    padding: 10px 12px;
    flex: none;
}

.pick-back[b-y0lwuk8fg5] {
    width: 48px;
    height: 48px;
    flex: none;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.pick-back:active[b-y0lwuk8fg5] { background: rgba(255, 255, 255, .3); }

.pick-top-mid[b-y0lwuk8fg5] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pick-title[b-y0lwuk8fg5] { font-size: 16px; font-weight: 700; line-height: 1.2; }
.pick-sub[b-y0lwuk8fg5] {
    font-size: 12.5px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pick-count[b-y0lwuk8fg5] { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pick-count span[b-y0lwuk8fg5] { opacity: .6; margin: 0 1px; }

.pick-progress[b-y0lwuk8fg5] { height: 5px; background: #d7dee5; flex: none; }
.pick-progress-bar[b-y0lwuk8fg5] { height: 100%; background: #16c444; transition: width .25s ease; }

/* ------------------------------------------------------------------ the line */
.pick-card[b-y0lwuk8fg5] {
    flex: 1;
    overflow-y: auto;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.pick-product[b-y0lwuk8fg5] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.22;
    color: #12222e;
    margin: 0;
    max-width: 20ch;
}

.pick-ids[b-y0lwuk8fg5] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12.5px;
    color: #6b7784;
    font-variant-numeric: tabular-nums;
}

/* The number the picker is actually working to. */
.pick-qty[b-y0lwuk8fg5] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.pick-qty-got[b-y0lwuk8fg5]  { font-size: 62px; font-weight: 800; color: rgb(8, 98, 155); line-height: 1; }
.pick-qty-sep[b-y0lwuk8fg5]  { font-size: 18px; color: #8a95a1; }
.pick-qty-need[b-y0lwuk8fg5] { font-size: 34px; font-weight: 700; color: #42505e; }

.pick-pack[b-y0lwuk8fg5] {
    margin: 0;
    font-size: 14px;
    color: #5b6773;
    background: #eef2f6;
    border-radius: 99px;
    padding: 6px 14px;
}

/* Result of the last scan, right where the eye already is. */
.pick-feedback[b-y0lwuk8fg5] {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 6px;
    max-width: 100%;
}

.pick-feedback.ok[b-y0lwuk8fg5]  { background: #e6f6ec; color: #0f8a37; }
.pick-feedback.bad[b-y0lwuk8fg5] { background: #fdecee; color: #b02a37; }
.pick-feedback i[b-y0lwuk8fg5]   { font-size: 20px; flex: none; }

/* ------------------------------------------------------------------ actions */
.pick-actions[b-y0lwuk8fg5] {
    flex: none;
    background: #fff;
    border-top: 1px solid #e4eaf1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pick-cam[b-y0lwuk8fg5] {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: 10px;
    background: #000;
}

.pick-manual[b-y0lwuk8fg5] { display: flex; gap: 8px; }

.pick-input[b-y0lwuk8fg5] {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 16px;   /* 16px stops iOS zooming the page on focus */
    color: #12222e;
    background: #fff;
}

.pick-input:focus[b-y0lwuk8fg5] {
    outline: 2px solid rgb(8, 98, 155);
    outline-offset: 1px;
    border-color: rgb(8, 98, 155);
}

.pick-row[b-y0lwuk8fg5] { display: flex; gap: 8px; flex-wrap: wrap; }

.pick-btn[b-y0lwuk8fg5] {
    flex: 1 1 auto;
    min-height: 48px;
    min-width: 110px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    background: #fff;
    color: #2b3a47;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.pick-btn:active[b-y0lwuk8fg5] { background: #eef2f6; }
.pick-btn.on[b-y0lwuk8fg5]     { border-color: rgb(8, 98, 155); color: rgb(8, 98, 155); background: #eaf3fa; }

.pick-btn-primary[b-y0lwuk8fg5] {
    background: rgb(8, 98, 155);
    border-color: rgb(8, 98, 155);
    color: #fff;
}

/* ------------------------------------------------------------------ states */
.pick-msg[b-y0lwuk8fg5] { padding: 40px; text-align: center; color: #6b7784; }

.pick-done[b-y0lwuk8fg5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 30px 20px;
}

.pick-done i[b-y0lwuk8fg5]  { font-size: 64px; color: #16c444; }
.pick-done h2[b-y0lwuk8fg5] { margin: 0; font-size: 24px; font-weight: 700; color: #12222e; }
.pick-done p[b-y0lwuk8fg5]  { margin: 0; color: #6b7784; }
.pick-done .pick-btn[b-y0lwuk8fg5] { flex: none; margin-top: 10px; min-width: 200px; }

.pick-short-name[b-y0lwuk8fg5] { font-weight: 600; margin: 0 0 12px; }
.pick-short-note[b-y0lwuk8fg5] { font-size: 12.5px; color: #6b7784; margin: 12px 0 0; }

/* On a phone the product name and the count both step down so the action row stays reachable. */
@media (max-width: 480px) {
    .pick-product[b-y0lwuk8fg5]  { font-size: 21px; }
    .pick-qty-got[b-y0lwuk8fg5]  { font-size: 50px; }
    .pick-qty-need[b-y0lwuk8fg5] { font-size: 28px; }
    .pick-cam[b-y0lwuk8fg5]      { max-height: 150px; }
}
/* /Pages/Inventory/StockCounting/Departments.razor.rz.scp.css */
/*
    Departments on a stock count.

    Plain selectors, no ::deep. Every element styled here is this page's own markup, which Blazor
    scopes correctly on its own; ::deep needs a scoped ANCESTOR and would compile to something
    unreachable, which this repo has already lost an afternoon to once.

    The .sc-* rules below are DUPLICATED from EditCount.razor.css deliberately. CSS isolation does
    not cascade between components, so a shared class name is not shared styling -- these have to
    exist in both files or the metrics strip here renders bare.
*/

/* ===== Back to the count ===== */
.dep-back[b-g9s0bfh907] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 2px;
}

/* ===== Grid beside the editor, rather than the editor over the grid ===== */
.dep-layout[b-g9s0bfh907] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 6px;
}

.dep-main[b-g9s0bfh907] {
    /*  min-width: 0 or the grid refuses to shrink below its content and pushes the panel off the
        side -- a flex child defaults to min-width: auto. */
    flex: 1 1 auto;
    min-width: 0;
}

.dep-panel[b-g9s0bfh907] {
    flex: 0 0 340px;
    width: 340px;
    align-self: stretch;
    /*  Follows the supervisor down a 45-row grid instead of scrolling away from the row being
        assigned. */
    position: sticky;
    top: 12px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(13, 51, 80, .07);
    overflow: hidden;
}

.dep-panel-head[b-g9s0bfh907] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf0f3;
    background: #f8fafc;
}

.dep-panel-title[b-g9s0bfh907] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0d3350;
}

.dep-panel-sub[b-g9s0bfh907] {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6b7684;
}

.dep-panel-body[b-g9s0bfh907] {
    padding: 16px;
}

.dep-panel-label[b-g9s0bfh907] {
    margin-top: 16px;
}

.dep-panel-save[b-g9s0bfh907] {
    margin-top: 16px;
}

/*  The open row's handle, so the panel and the row it belongs to are visibly the same thing. */
.dep-row-open[b-g9s0bfh907] {
    color: var(--omx-primary, rgb(8, 98, 155)) !important;
    font-weight: 700;
}

/* ===== Departments nobody is counting ===== */
.dep-callout[b-g9s0bfh907] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(214, 143, 0, .10);
    border: 1px solid rgba(214, 143, 0, .26);
    font-size: 13px;
    color: #7a5208;
}

    .dep-callout i[b-g9s0bfh907] {
        margin-right: 6px;
    }

/*  Read as a gap to fill rather than as ordinary muted text, because it is the one cell on this
    grid a supervisor is scanning for. */
.dep-nobody[b-g9s0bfh907] {
    color: #96650b;
    font-size: 12px;
    font-style: italic;
}

/* ===== Nothing here ===== */
.dep-empty[b-g9s0bfh907] {
    max-width: 520px;
    margin: 40px auto;
    padding: 28px;
    text-align: center;
    border: 1px dashed #d7e0e8;
    border-radius: 14px;
    color: #44586b;
}

    .dep-empty i[b-g9s0bfh907] {
        font-size: 30px;
        color: #9fb2c2;
    }

    .dep-empty p[b-g9s0bfh907] {
        margin: 10px 0 0;
    }

/* ===== Duplicated from EditCount.razor.css -- isolation does not share them ===== */
.sc-metrics[b-g9s0bfh907] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    margin: 14px 0 6px;
}

.sc-metric[b-g9s0bfh907] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 160px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
}

.sc-metric-value[b-g9s0bfh907] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #0d3350;
    /*  So a percentage does not jitter sideways as it ticks up during a count. */
    font-variant-numeric: tabular-nums;
}

.sc-metric-label[b-g9s0bfh907] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(13, 51, 80, .66);
}

.sc-metric-sub[b-g9s0bfh907] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7684;
}

.sc-metric-split[b-g9s0bfh907] {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sc-chip[b-g9s0bfh907] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .sc-chip b[b-g9s0bfh907] {
        font-size: 14px;
        font-variant-numeric: tabular-nums;
    }

.sc-chip-grey[b-g9s0bfh907] { background: #f1f3f5; color: #5a6472; }
.sc-chip-slate[b-g9s0bfh907] { background: #e8edf2; color: #44586b; }
.sc-chip-blue[b-g9s0bfh907] { background: rgba(8, 98, 155, .12); color: rgb(8, 98, 155); }
.sc-chip-amber[b-g9s0bfh907] { background: rgba(214, 143, 0, .14); color: #96650b; }
.sc-chip-green[b-g9s0bfh907] { background: rgba(22, 196, 68, .14); color: #12813a; }

.sc-progress[b-g9s0bfh907] {
    height: 8px;
    border-radius: 999px;
    background: #e9eef3;
    overflow: hidden;
}

.sc-progress-bar[b-g9s0bfh907] {
    height: 100%;
    border-radius: 999px;
    background: var(--omx-primary, rgb(8, 98, 155));
    min-width: 0;
}

.sc-progress-text[b-g9s0bfh907] {
    display: inline-block;
    margin-top: 3px;
    font-size: 11.5px;
    color: #6b7684;
    font-variant-numeric: tabular-nums;
}

.sc-person[b-g9s0bfh907] {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef3f8;
    color: #33465a;
    font-size: 12px;
    white-space: nowrap;
}

.sc-hint[b-g9s0bfh907] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7684;
}

.sc-assign-actions[b-g9s0bfh907] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #edf0f3;
}

/*  Below this the panel stops being a column beside the grid and becomes a block under it --
    340px of sidebar on a tablet leaves the grid unusable. */
@media (max-width: 1100px) {
    .dep-layout[b-g9s0bfh907] {
        flex-direction: column;
    }

    .dep-panel[b-g9s0bfh907] {
        position: static;
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .sc-metric[b-g9s0bfh907] {
        min-width: 0;
        flex: 1 1 45%;
    }
}
/* /Pages/Inventory/StockCounting/EditCount.razor.rz.scp.css */
/*
    Stock count: progress, departments and who is on them.

    Plain selectors, no ::deep. This page's markup is its own -- the metrics strip and the banner
    are elements it renders directly, so Blazor scopes them correctly on its own. ::deep needs a
    scoped ANCESTOR and would compile to something unreachable here, which this repo has already
    lost an afternoon to once.
*/

/* ===== The headline: how far along is this count ===== */
.sc-metrics[b-pbsmr3e24l] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    margin: 14px 0 6px;
}

.sc-metric[b-pbsmr3e24l] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 160px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
}

.sc-metric-value[b-pbsmr3e24l] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #0d3350;
    /*  So a percentage does not jitter sideways as it ticks up during a count. */
    font-variant-numeric: tabular-nums;
}

.sc-metric-label[b-pbsmr3e24l] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(13, 51, 80, .66);
}

.sc-metric-sub[b-pbsmr3e24l] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7684;
}

/*  The five states, side by side rather than blended into one number: "not started" and "waiting
    to be approved" need completely different things done about them. */
.sc-metric-split[b-pbsmr3e24l] {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sc-chip[b-pbsmr3e24l] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .sc-chip b[b-pbsmr3e24l] {
        font-size: 14px;
        font-variant-numeric: tabular-nums;
    }

.sc-chip-grey[b-pbsmr3e24l]  { background: #f1f3f5; color: #5a6472; }
.sc-chip-slate[b-pbsmr3e24l] { background: #e8edf2; color: #44586b; }
.sc-chip-blue[b-pbsmr3e24l]  { background: rgba(8, 98, 155, .12); color: rgb(8, 98, 155); }
.sc-chip-amber[b-pbsmr3e24l] { background: rgba(214, 143, 0, .14); color: #96650b; }
.sc-chip-green[b-pbsmr3e24l] { background: rgba(22, 196, 68, .14); color: #12813a; }

/* ===== Filtered to one department ===== */
.sc-filter-banner[b-pbsmr3e24l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(8, 98, 155, .08);
    border: 1px solid rgba(8, 98, 155, .18);
    font-size: 13px;
    color: #0d3350;
}

/* ===== Per-department progress, in the assignment grid ===== */
.sc-progress[b-pbsmr3e24l] {
    height: 8px;
    border-radius: 999px;
    background: #e9eef3;
    overflow: hidden;
}

.sc-progress-bar[b-pbsmr3e24l] {
    height: 100%;
    border-radius: 999px;
    background: var(--omx-primary, rgb(8, 98, 155));
    /*  A department with nothing counted still shows the track, so an empty bar reads as zero
        rather than as a missing bar. */
    min-width: 0;
}

.sc-progress-text[b-pbsmr3e24l] {
    display: inline-block;
    margin-top: 3px;
    font-size: 11.5px;
    color: #6b7684;
    font-variant-numeric: tabular-nums;
}

/*  Assignees. Several people on one department is normal, so they read as a list of tags rather
    than a comma-separated run-on. */
.sc-person[b-pbsmr3e24l] {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef3f8;
    color: #33465a;
    font-size: 12px;
    white-space: nowrap;
}

.sc-hint[b-pbsmr3e24l] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7684;
}

.sc-assign-actions[b-pbsmr3e24l] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #edf0f3;
}

@media (max-width: 900px) {
    .sc-metric[b-pbsmr3e24l] {
        min-width: 0;
        flex: 1 1 45%;
    }
}

/* ===== Counting in the row =====

   Entering a count used to mean opening a dialog per product, four actions deep, against a
   department that runs to a hundred lines. The box lives in the row now, so a counter types a
   number and tabs on. */
.sc-count-cell[b-pbsmr3e24l] {
    display: flex;
    align-items: center;
    gap: 6px;
    /*  A flex container defaults to min-width: auto and refuses to shrink below its content, so
        without this the box pushes the tick out of the cell instead of being constrained. */
    min-width: 0;
}

/*  ::deep, and the ancestor matters.

    .sc-count-input is put on DxSpinEdit via CssClass, so it lands on an element DEVEXPRESS
    renders -- which never carries this page's scope attribute. Written plainly the rule compiles
    to .sc-count-input[b-xxx] and matches nothing: measured live, max-width came back "none" and a
    156px box sat in a 132px cell, overflowing into the variance column.

    .sc-count-cell IS this page's own markup and does carry the attribute, so it satisfies the
    ancestor requirement and this compiles to .sc-count-cell[b-xxx] .sc-count-input. */
.sc-count-cell[b-pbsmr3e24l]  .sc-count-input {
    /*  Wide enough for a real shelf quantity and no wider -- this column sits between the expected
        figure and the variance, and all three need to stay readable side by side. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 96px;
}

/*  The INNER input has to be constrained too, and that is not belt and braces.

    Capping the DXBL-SPINEDIT wrapper alone left it at 96px with a 154px input hanging out of it:
    an <input> carries min-width: auto and a default size, and the wrapper is overflow: visible, so
    the child simply escaped. Measured -- wrapper 96, input 154, right edge past the cell. */
.sc-count-cell[b-pbsmr3e24l]  .sc-count-input > input {
    min-width: 0;
    width: 100%;
}

/*  Counted, not "has a number in it": this is the same flag the commit gates on, so the tick means
    the line will genuinely apply rather than that somebody typed something. */
.sc-count-done[b-pbsmr3e24l] {
    color: var(--omx-accent-green, #16c444);
    font-size: 13px;
}

.sc-count-saving[b-pbsmr3e24l] {
    color: var(--omx-primary, rgb(8, 98, 155));
    font-size: 13px;
    animation: sc-count-spin-b-pbsmr3e24l 900ms linear infinite;
}

@keyframes sc-count-spin-b-pbsmr3e24l {
    to { transform: rotate(360deg); }
}

/*  A chip that is a way in rather than a read-out. "8 unassigned" is a problem, and the reader is
    already looking straight at it. */
.sc-chip-link[b-pbsmr3e24l] {
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color .12s ease, background-color .12s ease;
}

    .sc-chip-link:hover[b-pbsmr3e24l] {
        border-color: rgba(8, 98, 155, .35);
        background: rgba(8, 98, 155, .10);
        color: rgb(8, 98, 155);
    }

/*  The banner is two halves now: what is being shown on the left, what to do about it on the
    right. */
.sc-banner-actions[b-pbsmr3e24l] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-banner-progress[b-pbsmr3e24l] {
    margin-left: 8px;
    color: #44586b;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Manufacturing/BatchTraceability.razor.rz.scp.css */
/* Plain selectors, no ::deep -- no wrapping element exists to act as a scoped ancestor. */

/* Layout, label spacing and control heights for the filter strip come from
   .omx-field-strip / .omx-uniform-fields in app.css, so the copies that used to
   sit here are gone rather than competing with them. */

/* A batch number is read character by character when somebody is matching it against a physical
   label, so it is set in a monospaced face wherever it appears. */
.bt-mono[b-0iosdynrnb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.bt-trace[b-0iosdynrnb] {
    padding: 2px;
}

.bt-hero[b-0iosdynrnb] {
    padding: 14px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgb(8, 98, 155), #0a3f66);
    color: #fff;
    margin-bottom: 18px;
}

.bt-hero-num[b-0iosdynrnb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bt-hero-sub[b-0iosdynrnb] {
    margin-top: 2px;
    font-size: 0.875rem;
    opacity: 0.85;
}

.bt-section-title[b-0iosdynrnb] {
    margin: 18px 0 8px;
    font-weight: 600;
    color: #33414d;
    border-bottom: 1px solid #e6edf2;
    padding-bottom: 4px;
}

/* Sites as cards rather than a grid: the answer to "where is this batch" is usually two or three
   places, and a paged grid for three rows reads as heavier than the question deserves. */
.bt-sites[b-0iosdynrnb] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bt-site[b-0iosdynrnb] {
    flex: 1 1 180px;
    min-width: 160px;
    border: 1px solid #e2e8ee;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
}

.bt-site-name[b-0iosdynrnb] {
    font-weight: 600;
    color: #33414d;
}

.bt-site-qty[b-0iosdynrnb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2px 0;
}

/* A site holding none of the batch is still worth showing -- it is where the batch HAS been, and
   a recall needs that. Just quieter than one that still has stock. */
.bt-site-empty[b-0iosdynrnb] {
    color: #98a2b3;
}

.bt-site-origin[b-0iosdynrnb] {
    font-size: 0.75rem;
    color: #8a97a3;
}

.omx-badge-neutral[b-0iosdynrnb] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: #eef2f6;
    color: #4a5b6b;
    font-size: 0.75rem;
}
/* /Pages/Manufacturing/FactoryReadiness.razor.rz.scp.css */
/*
    Plain selectors, no ::deep. This page's markup is its own -- there is no nested child component
    wrapping the styled elements, so ::deep would compile to a selector needing a scoped ancestor
    that does not exist. The lesson is already recorded in CLAUDE.md for CreateQuote.razor.css.
*/

.fr-sitepick[b-nhyj9106ot] {
    max-width: 340px;
    margin: 14px 0 6px;
}

.fr-sitepick .form-label[b-nhyj9106ot] {
    display: block;
    margin-bottom: 6px;
}

/* ---------- summary ---------- */

.fr-summary[b-nhyj9106ot] {
    border: 1px solid #eef1f5;
    background: #f8fafc;
    padding: 16px 18px;
    margin: 14px 0 22px;
}

.fr-summary-head[b-nhyj9106ot] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fr-site[b-nhyj9106ot] {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.fr-score[b-nhyj9106ot] {
    font-size: 13px;
    font-weight: 700;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.fr-bar[b-nhyj9106ot] {
    height: 6px;
    background: #e6ebf1;
    margin: 12px 0 10px;
    overflow: hidden;
}

.fr-bar-fill[b-nhyj9106ot] {
    height: 100%;
    background: #16c444;
    transition: width .3s ease;
}

.fr-note[b-nhyj9106ot] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6c757d;
    max-width: 62ch;
}

/* ---------- checks ---------- */

.fr-checks[b-nhyj9106ot] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.fr-check[b-nhyj9106ot] {
    border: 1px solid #eef1f5;
    border-left: 3px solid #adb5bd;
    background: #fff;
    padding: 14px 16px 12px;
}

/* Status is carried by colour AND by the word, never colour alone. */
.fr-check.fr-ready[b-nhyj9106ot]    { border-left-color: #16c444; }
.fr-check.fr-partial[b-nhyj9106ot]  { border-left-color: #a86a12; }
.fr-check.fr-blocked[b-nhyj9106ot]  { border-left-color: #b02a37; }
.fr-check.fr-decision[b-nhyj9106ot] { border-left-color: rgb(8, 98, 155); }

.fr-check-head[b-nhyj9106ot] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.fr-status[b-nhyj9106ot] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 2px;
    background: #eef1f5;
    color: #495057;
    white-space: nowrap;
}

.fr-ready    .fr-status[b-nhyj9106ot] { background: #eaf8ee; color: #12a63a; }
.fr-partial  .fr-status[b-nhyj9106ot] { background: #fdf4e4; color: #a86a12; }
.fr-blocked  .fr-status[b-nhyj9106ot] { background: #fdeef0; color: #b02a37; }
.fr-decision .fr-status[b-nhyj9106ot] { background: #e9f2f8; color: rgb(8, 98, 155); }

.fr-title[b-nhyj9106ot] {
    font-size: 14px;
    font-weight: 600;
    color: #16324f;
}

.fr-measure[b-nhyj9106ot] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #16324f;
    margin-bottom: 8px;
}

.fr-minibar[b-nhyj9106ot] {
    height: 4px;
    background: #e6ebf1;
    margin-bottom: 10px;
    overflow: hidden;
}

.fr-minibar-fill[b-nhyj9106ot] {
    height: 100%;
    background: rgb(8, 98, 155);
}

.fr-detail[b-nhyj9106ot] {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}

.fr-detail dt[b-nhyj9106ot] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10px;
    color: #8a94a6;
    margin-top: 8px;
}

.fr-detail dd[b-nhyj9106ot] {
    margin: 2px 0 0;
    color: #495057;
}

.fr-go[b-nhyj9106ot] {
    margin-top: 10px;
    padding-left: 0;
}

/* ---------- empty ---------- */

.fr-empty[b-nhyj9106ot] {
    border: 1px solid #eef1f5;
    background: #f8fafc;
    padding: 28px;
    margin: 20px 0;
    max-width: 62ch;
}

.fr-empty h3[b-nhyj9106ot] {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.fr-empty p[b-nhyj9106ot] {
    font-size: 13px;
    line-height: 1.55;
    color: #6c757d;
    margin: 0 0 14px;
}
/* /Pages/Manufacturing/ItemUnits.razor.rz.scp.css */
/* Plain selectors, no ::deep -- this page's markup is its own, with no scoped ancestor for
   ::deep to hang from. Same reasoning as FactoryReadiness.razor.css. */

.iu-controls[b-9dbeju30k9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    margin: 14px 0 12px;
}

.iu-field[b-9dbeju30k9] { min-width: 190px; }
.iu-field .form-label[b-9dbeju30k9] { display: block; margin-bottom: 6px; }
.iu-actions[b-9dbeju30k9] { min-width: auto; }

.iu-summary[b-9dbeju30k9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    font-size: 13px;
    color: #495057;
    font-variant-numeric: tabular-nums;
}

.iu-summary .iu-needs[b-9dbeju30k9] { color: #a86a12; }

.iu-note[b-9dbeju30k9] {
    font-size: 12.5px;
    line-height: 1.55;
    color: #6c757d;
    max-width: 76ch;
    margin: 10px 0 14px;
}

.iu-name[b-9dbeju30k9] { font-weight: 600; color: #16324f; }

.iu-parent[b-9dbeju30k9] {
    display: block;
    font-size: 11.5px;
    color: #8a94a6;
}

/* Confidence is the reviewer's main signal, so it reads as a word and as a colour, never
   colour alone. */
.iu-conf[b-9dbeju30k9] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 2px;
    background: #eef1f5;
    color: #495057;
    white-space: nowrap;
}

.iu-conf.iu-high[b-9dbeju30k9]   { background: #eaf8ee; color: #12a63a; }
.iu-conf.iu-medium[b-9dbeju30k9] { background: #e9f2f8; color: rgb(8, 98, 155); }
.iu-conf.iu-low[b-9dbeju30k9]    { background: #fdf4e4; color: #a86a12; }
.iu-conf.iu-none[b-9dbeju30k9]   { background: #fdeef0; color: #b02a37; }

.iu-reason[b-9dbeju30k9] {
    font-size: 11.5px;
    line-height: 1.4;
    color: #6c757d;
}

.iu-val[b-9dbeju30k9] { max-width: 100px; }
/* /Pages/Manufacturing/ProductionOrders.razor.rz.scp.css */
/* Plain selectors, no ::deep -- this page's top-level markup has no wrapping element to act as a
   scoped ancestor, so ::deep rules would compile to something that can never match. */

/* Layout, label spacing and control heights for the filter strip come from
   .omx-field-strip / .omx-uniform-fields in app.css, so the copies that used to
   sit here are gone rather than competing with them. */

.po-loss[b-me6ma5w8vh] {
    white-space: nowrap;
}

.po-summary[b-me6ma5w8vh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* Can this be made, and if not what is missing. Two states rather than three: unlike a recipe's
   material balance, "we do not have enough" has no honest middle answer. */
.po-req[b-me6ma5w8vh] {
    border: 1px solid;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 14px 0 4px;
}

.po-req-head[b-me6ma5w8vh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.po-req-ok[b-me6ma5w8vh] {
    border-color: #b6e2c4;
    background: #f1fbf4;
    color: #1c6b38;
}

.po-req-short[b-me6ma5w8vh] {
    border-color: #f0c2c2;
    background: #fdf3f3;
    color: #8b2a2a;
}

.po-req-hint[b-me6ma5w8vh] {
    margin: 10px 0 6px;
}

.po-reserve-row[b-me6ma5w8vh] {
    margin-top: 16px;
}
/* /Pages/Manufacturing/Recipes.razor.rz.scp.css */
/* Plain selectors, no ::deep -- this page has no single wrapping element of its own, so a ::deep
   rule would need a scoped ancestor that does not exist and would silently never match. */

/* The filter strip's layout, label spacing and control heights all come from
   .omx-field-strip / .omx-uniform-fields in app.css now, so the copies that
   used to live here are gone rather than sitting alongside them competing. */

/*  The BODY scrolls, not the popup.

    DxPopup's own MaxHeight caps the frame but does nothing to the content inside it, so a recipe
    with several lines and a real method grew past the viewport: the balance banner was clipped off
    the top and the footer sat on the bottom edge. Capping the body instead keeps the title, the
    close button and Save/Close/New version on screen at every size, and the middle scrolls.

    Sized to leave room for the popup's own header and footer within its 88vh frame. */
.rc-editor[b-84drjon5qy] {
    max-height: 68vh;
    overflow-y: auto;
    padding-bottom: 6px;
    padding-right: 6px;
}

.rc-hint[b-84drjon5qy] {
    margin: 14px 0 6px;
}

.rc-lines-head[b-84drjon5qy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 8px;
    font-weight: 600;
    color: #33414d;
}

.rc-lines-actions[b-84drjon5qy] {
    display: flex;
    gap: 8px;
}

.rc-instructions[b-84drjon5qy] {
    margin-top: 14px;
}

/* The method is the one free-text field on this form that people actually write paragraphs into,
   so it gets real room rather than the shared field height. Set on the textarea, since that is
   the element DevExpress sizes; the wrapper grows with it.

   ::deep IS required here, and is the exception to this file's opening note. That note is about
   the page's TOP-LEVEL elements, which have no scoped ancestor. The textarea is different: it is
   rendered by DxMemo, a child component, so it never carries this page's scope attribute and a
   plain selector would compile to `... textarea[b-xxx]` and match nothing. .rc-instructions is
   this page's own div, so it carries the attribute and satisfies ::deep's ancestor requirement.
   Verified in the compiled bundle, not assumed from the build succeeding. */
/* The class is dxbl-memo-EDIT. Checked in the rendered DOM rather than guessed: DevExpress
   renders <DXBL-MEMO-EDITOR class="dxbl-text-edit dxbl-memo-edit">, and a rule written
   against .dxbl-memo matches nothing at all. */
.rc-instructions[b-84drjon5qy]  .dxbl-memo-edit textarea {
    min-height: 190px !important;
    line-height: 1.45;
}

/* The balance panel. Three states with three treatments, because "cannot be measured" is a
   perfectly good answer and must not be dressed as a problem. */
.rc-balance[b-84drjon5qy] {
    border: 1px solid;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.rc-balance-head[b-84drjon5qy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.rc-balance-body[b-84drjon5qy] {
    margin-top: 4px;
    font-size: 0.875rem;
}

.rc-balance-figures[b-84drjon5qy] {
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    opacity: 0.85;
}

.rc-balance-ok[b-84drjon5qy] {
    border-color: #b6e2c4;
    background: #f1fbf4;
    color: #1c6b38;
}

.rc-balance-bad[b-84drjon5qy] {
    border-color: #f0c2c2;
    background: #fdf3f3;
    color: #8b2a2a;
}

.rc-balance-neutral[b-84drjon5qy] {
    border-color: #d7e3ec;
    background: #f5f9fc;
    color: #40566a;
}
/* /Pages/OmaxAI/OmxAIAgent.razor.rz.scp.css */
/*
    OMAX Assistant.

    Built on the application's own palette rather than a new one -- the blue is the same
    rgb(8, 98, 155) used by the topbar, links and dashboards, and the green is the same #16c444
    already meaning "good" elsewhere. An assistant that looked like a different product would
    read as bolted on.

    Plain selectors throughout, no ::deep. Everything here is this component's own markup, and
    ::deep needs a scoped ancestor to match against -- a lesson this codebase has already learned
    the hard way on another page.

    Single @keyframes, never @@ -- .razor.css files are not Razor-templated, so a doubled @ is
    simply invalid CSS the browser discards silently.
*/

.ai-page[b-l3sksyzfrd] {
    --ai-blue: rgb(8, 98, 155);
    --ai-deep: #0a3f66;
    --ai-green: #16c444;
    --ai-ink: #1f2937;
    --ai-muted: #6b7280;
    --ai-line: #e5e9f0;
    --ai-surface: #ffffff;
    --ai-ground: #f6f8fb;

    display: flex;
    flex-direction: column;
    /* Fills the page area beneath the app chrome without ever making the body scroll -- the
       conversation scrolls inside itself instead. */
    height: calc(100vh - 130px);
    min-height: 480px;
    background: var(--ai-ground);
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    overflow: hidden;
    color: var(--ai-ink);
}

/* ------------------------------------------------------------------ header */

.ai-head[b-l3sksyzfrd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--ai-surface);
    border-bottom: 1px solid var(--ai-line);
    flex: 0 0 auto;
}

.ai-head-left[b-l3sksyzfrd] { display: flex; align-items: center; gap: 12px; }

.ai-mark[b-l3sksyzfrd] {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ai-blue), var(--ai-deep));
    color: #fff;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.ai-title[b-l3sksyzfrd] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ai-deep);
}

.ai-sub[b-l3sksyzfrd] {
    margin: 2px 0 0;
    font-size: .78rem;
    color: var(--ai-muted);
}

.ai-head-right[b-l3sksyzfrd] { display: flex; align-items: center; gap: 8px; }

.ai-pill[b-l3sksyzfrd] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.ai-pill-on[b-l3sksyzfrd] { background: rgba(22,196,68,.12); color: #0f7a2c; }

/* Grey, not red. Nothing is broken -- a provider has simply not been switched on yet, and a
   warning colour would send somebody looking for a fault that is not there. */
.ai-pill-off[b-l3sksyzfrd] { background: rgba(15,23,42,.06); color: #64748b; }

.ai-dot[b-l3sksyzfrd] {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ai-green);
}

.ai-pill-off .ai-dot[b-l3sksyzfrd] { background: #94a3b8; }

.ai-ghost[b-l3sksyzfrd] {
    border: 1px solid var(--ai-line);
    background: #fff;
    color: var(--ai-muted);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: .78rem;
    cursor: pointer;
}
.ai-ghost:hover[b-l3sksyzfrd] { color: var(--ai-blue); border-color: var(--ai-blue); }

/* ------------------------------------------------------------------ scroll area */

.ai-scroll[b-l3sksyzfrd] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ------------------------------------------------------------------ not connected */

.ai-notice[b-l3sksyzfrd] {
    display: flex; gap: 14px;
    padding: 16px 18px;
    background: #fff8e6;
    border: 1px solid #f0d99b;
    border-radius: 10px;
}
.ai-notice > i[b-l3sksyzfrd] { color: #b7791f; font-size: 1.2rem; margin-top: 2px; }
.ai-notice strong[b-l3sksyzfrd] { display: block; margin-bottom: 4px; font-size: .92rem; }
.ai-notice p[b-l3sksyzfrd] { margin: 0 0 10px; font-size: .84rem; color: #7a6127; }

.ai-btn[b-l3sksyzfrd] {
    border: none; border-radius: 8px;
    padding: 7px 14px;
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
}
.ai-btn-quiet[b-l3sksyzfrd] { background: var(--ai-blue); color: #fff; }
.ai-btn-quiet:hover[b-l3sksyzfrd] { background: #06517f; }

/* ------------------------------------------------------------------ empty state */

.ai-empty[b-l3sksyzfrd] { margin: auto 0; padding: 8px 0 20px; }

.ai-empty-title[b-l3sksyzfrd] {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--ai-deep);
    text-wrap: balance;
}

.ai-empty-sub[b-l3sksyzfrd] {
    margin: 0 0 22px;
    font-size: .9rem;
    color: var(--ai-muted);
    max-width: 60ch;
}

.ai-suggests[b-l3sksyzfrd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.ai-suggest-group[b-l3sksyzfrd] { display: flex; flex-direction: column; gap: 8px; }

.ai-suggest-label[b-l3sksyzfrd] {
    display: flex; align-items: center; gap: 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ai-muted);
    margin-bottom: 2px;
}
.ai-suggest-label i[b-l3sksyzfrd] { color: var(--ai-blue); font-size: .85rem; }

.ai-suggest[b-l3sksyzfrd] {
    text-align: left;
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: .845rem;
    line-height: 1.4;
    color: var(--ai-ink);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ai-suggest:hover:not(:disabled)[b-l3sksyzfrd] {
    border-color: var(--ai-blue);
    box-shadow: 0 2px 10px rgba(8,98,155,.10);
    transform: translateY(-1px);
}
.ai-suggest:disabled[b-l3sksyzfrd] { opacity: .55; cursor: default; }

/* ------------------------------------------------------------------ messages */

.ai-msg[b-l3sksyzfrd] { display: flex; gap: 11px; align-items: flex-start; }
.ai-msg.user[b-l3sksyzfrd] { justify-content: flex-end; }

.ai-avatar[b-l3sksyzfrd] {
    width: 30px; height: 30px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ai-blue), var(--ai-deep));
    color: #fff;
    font-size: .8rem;
    margin-top: 2px;
}

.ai-body[b-l3sksyzfrd] { max-width: min(74ch, 88%); min-width: 0; }

.ai-bubble[b-l3sksyzfrd] {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: .89rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

.ai-msg.user .ai-bubble[b-l3sksyzfrd] {
    background: var(--ai-blue);
    border-color: var(--ai-blue);
    color: #fff;
    border-radius: 12px 12px 4px 12px;
}

.ai-msg.bot .ai-bubble[b-l3sksyzfrd] { border-radius: 12px 12px 12px 4px; }

.ai-bubble.err[b-l3sksyzfrd] {
    background: #fdf2f2;
    border-color: #f3c2c2;
    color: #9b2c2c;
}

/* ------------------------------------------------------------------ the working */

.ai-sources[b-l3sksyzfrd] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 8px 0 0 2px;
}

.ai-sources-label[b-l3sksyzfrd] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9aa4b2;
    margin-right: 2px;
}

.ai-source[b-l3sksyzfrd] {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(8,98,155,.07);
    border: 1px solid rgba(8,98,155,.14);
    font-size: .72rem;
    color: var(--ai-deep);
}
.ai-source em[b-l3sksyzfrd] {
    font-style: normal;
    color: var(--ai-muted);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ thinking */

.ai-thinking[b-l3sksyzfrd] { display: flex; align-items: center; gap: 5px; }
.ai-thinking em[b-l3sksyzfrd] {
    font-style: normal;
    font-size: .82rem;
    color: var(--ai-muted);
    margin-left: 6px;
}
.ai-thinking span[b-l3sksyzfrd] {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ai-blue);
    opacity: .35;
    animation: aiPulse-b-l3sksyzfrd 1.3s infinite ease-in-out;
}
.ai-thinking span:nth-child(2)[b-l3sksyzfrd] { animation-delay: .18s; }
.ai-thinking span:nth-child(3)[b-l3sksyzfrd] { animation-delay: .36s; }

@keyframes aiPulse-b-l3sksyzfrd {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-thinking span[b-l3sksyzfrd] { animation: none; opacity: .5; }
    .ai-suggest:hover:not(:disabled)[b-l3sksyzfrd] { transform: none; }
}

/* ------------------------------------------------------------------ composer */

.ai-composer[b-l3sksyzfrd] {
    flex: 0 0 auto;
    padding: 12px 20px 14px;
    background: var(--ai-surface);
    border-top: 1px solid var(--ai-line);
}

.ai-input-wrap[b-l3sksyzfrd] {
    display: flex; align-items: flex-end; gap: 8px;
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    padding: 7px 7px 7px 14px;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.ai-input-wrap:focus-within[b-l3sksyzfrd] {
    border-color: var(--ai-blue);
    box-shadow: 0 0 0 3px rgba(8,98,155,.10);
}
.ai-input-wrap.busy[b-l3sksyzfrd] { opacity: .7; }

.ai-input[b-l3sksyzfrd] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    resize: none;
    font: inherit;
    font-size: .89rem;
    line-height: 1.5;
    padding: 6px 0;
    max-height: 130px;
    background: transparent;
    color: var(--ai-ink);
}
.ai-input[b-l3sksyzfrd]::placeholder { color: #9aa4b2; }

.ai-send[b-l3sksyzfrd] {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: none;
    border-radius: 9px;
    background: var(--ai-blue);
    color: #fff;
    cursor: pointer;
    transition: background .12s;
}
.ai-send:hover:not(:disabled)[b-l3sksyzfrd] { background: #06517f; }
.ai-send:disabled[b-l3sksyzfrd] { background: #cbd5e1; cursor: default; }

.ai-foot[b-l3sksyzfrd] {
    margin: 8px 2px 0;
    font-size: .72rem;
    color: #9aa4b2;
}

/* ------------------------------------------------------------------ markdown */

/*
    ::deep IS REQUIRED HERE, and its absence was a real bug.

    Everything with an .md- class is produced by MiniMarkdown and injected as a MarkupString.
    Blazor stamps its scope attribute onto elements IT renders; raw HTML from a MarkupString gets
    nothing. So a plain `.ai-bubble .md-table` compiles to `.ai-bubble .md-table[b-xxx]`, asks for
    an attribute the <table> will never carry, and matches nothing -- which is why assistant
    tables rendered with no cell padding and columns running together.

    `.ai-bubble ::deep .md-table` compiles to `.ai-bubble[b-xxx] .md-table`: the attribute lands
    on the bubble, which Blazor DOES render, and the descendant is matched normally.

    Note this is the opposite of the ::deep mistake recorded elsewhere in this project, where
    ::deep was put on top-level elements that had no scoped ancestor to hang it on. The rule is
    the same in both cases -- the attribute must land on an element Blazor actually renders.
*/
.ai-bubble[b-l3sksyzfrd]  .md-p { margin: 0 0 .65em; }
.ai-bubble[b-l3sksyzfrd]  .md-p:last-child { margin-bottom: 0; }

.ai-bubble[b-l3sksyzfrd]  .md-h {
    margin: .9em 0 .4em;
    font-size: .93rem;
    font-weight: 700;
    color: var(--ai-deep);
}
.ai-bubble[b-l3sksyzfrd]  .md-h:first-child { margin-top: 0; }

.ai-bubble[b-l3sksyzfrd]  .md-list { margin: .3em 0 .7em; padding-left: 1.25em; }
.ai-bubble[b-l3sksyzfrd]  .md-list li { margin-bottom: .28em; }

/* Links to pages inside this application. Matched to .omx-quicklink / .url-links, the two
   existing "click this text to go somewhere" styles, so an assistant link looks like every
   other link in the app rather than a third invention. */
.ai-bubble[b-l3sksyzfrd]  .md-link {
    color: rgb(8, 98, 155);
    text-decoration: none;
    border-bottom: 1px solid rgba(8, 98, 155, .35);
}
.ai-bubble[b-l3sksyzfrd]  .md-link:hover {
    color: #16c444;
    border-bottom-color: #16c444;
}

.ai-bubble[b-l3sksyzfrd]  .md-code {
    background: #eef2f7;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .84em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Tables get their own scroll container so a wide result never makes the page scroll
   sideways -- the standing rule for wide content anywhere in this app. */
.ai-bubble[b-l3sksyzfrd]  .md-tablewrap { overflow-x: auto; margin: .5em 0 .7em; }

.ai-bubble[b-l3sksyzfrd]  .md-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.ai-bubble[b-l3sksyzfrd]  .md-table th,
.ai-bubble[b-l3sksyzfrd]  .md-table td {
    border-bottom: 1px solid var(--ai-line);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}
.ai-bubble[b-l3sksyzfrd]  .md-table th {
    background: #f4f7fb;
    font-weight: 600;
    color: var(--ai-deep);
    border-bottom-color: #d7dfea;
}
.ai-bubble[b-l3sksyzfrd]  .md-table tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 760px) {
    .ai-page[b-l3sksyzfrd] { height: calc(100vh - 96px); border-radius: 0; border-left: none; border-right: none; }
    .ai-scroll[b-l3sksyzfrd] { padding: 16px 13px 6px; }
    .ai-composer[b-l3sksyzfrd] { padding: 10px 13px 12px; }
    .ai-body[b-l3sksyzfrd] { max-width: 94%; }
    .ai-suggests[b-l3sksyzfrd] { grid-template-columns: 1fr; gap: 14px; }
    .ai-sub[b-l3sksyzfrd] { display: none; }
}

/* Location scope. Amber rather than the success green, because it says "you are seeing part of
   the picture" -- information the reader must not mistake for a company-wide figure. */
.ai-pill-scope[b-l3sksyzfrd] {
    background: rgba(183,121,31,.12);
    color: #8a5a12;
    gap: 5px;
}
.ai-pill-scope i[b-l3sksyzfrd] { font-size: .8rem; }
/* /Pages/OmxReportBuilder/ReportBuilder.razor.rz.scp.css */
/*  Plain selectors, not ::deep: this page's top-level elements are siblings with no wrapping
    same-scoped ancestor, so a ::deep rule on them could never match. See CLAUDE.md's CreateQuote
    entry. The two exceptions at the bottom are marked and explained where they appear.

    The layout classes below (.data-area, .data-parent, .Field-containers, .reportTitle,
    .reportBar, .report-name) were moved out of app.css, where .data-area forced every panel to
    97.2vh with overflow:hidden -- the reason the designer read as a stack of tall grey blocks
    with the controls crammed into the top of each. They are page-owned now.                    */

/* ---------- page frame ---------------------------------------------------------- */

.reportTitle[b-yqt923un27] {
    margin: 4px 0 2px;
    color: var(--omx-primary);
    font-size: 1.35rem;
    font-weight: 600;
}

.report-name[b-yqt923un27] {
    color: #6c757d;          /* was the retired purple; grey reads as a subtitle, not a second accent */
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: 8px;
}

.rb-sub[b-yqt923un27] {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 14px;
}

/*  The action strip, matching POEdit's .po-toolbar so the page reads as part of the app. */
.reportBar[b-yqt923un27] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: #f7f8f9;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

.rb-name-field[b-yqt923un27] {
    flex: 1 1 320px;
    min-width: 240px;
}

.rb-name-field label[b-yqt923un27] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 4px;
}

.rb-actions[b-yqt923un27] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- section cards, matching .po-section ---------------------------------- */

.data-area[b-yqt923un27] {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

.data-parent[b-yqt923un27] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 10px;
}

/*  The two pick lists scroll inside their own card instead of being a fixed 350px block, so a
    short catalogue does not leave a hole and a long one does not push the canvas off screen. */
.Field-containers[b-yqt923un27] {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 300px;
    padding-left: 7px;
}

.rb-rail .Field-containers[b-yqt923un27] {
    max-height: 260px;
}

.rb-empty[b-yqt923un27] {
    color: #98a2b3;
    font-size: 0.85rem;
    padding: 2px 2px 4px;
    margin: 0;
}

/* ---------- pickable rows -------------------------------------------------------- */

.rb-pick[b-yqt923un27] {
    /*  7px of left padding so the icon is not flush against the card edge -- the rail lists read
        as items in a panel rather than text stuck to the border. */
    padding: 6px 9px 6px 7px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rb-pick i[b-yqt923un27] { opacity: .55; }

.rb-pick:hover[b-yqt923un27] {
    background-color: #eef4f9;
    color: var(--omx-primary);
}

.rb-pick:hover i[b-yqt923un27] { opacity: 1; }

.rb-pick-active[b-yqt923un27],
.rb-pick-active:hover[b-yqt923un27] {
    background-color: var(--omx-primary);
    color: #fff;
    font-weight: 600;
}

.rb-pick-active i[b-yqt923un27] { opacity: 1; }

/* ---------- tables --------------------------------------------------------------- */

.rb-table[b-yqt923un27] {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.rb-table thead th[b-yqt923un27] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    font-weight: 700;
    border-bottom: 1px solid #e6e6e6;
    white-space: nowrap;
}

.rb-table td[b-yqt923un27] { vertical-align: middle; }

/*  The preview scrolls in its own box rather than pushing the designer off the page. */
.rb-preview[b-yqt923un27] {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid #eef0f2;
    border-radius: 6px;
}

.rb-preview table[b-yqt923un27] { font-size: 0.82rem; }

.rb-preview thead th[b-yqt923un27] {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

/* ---------- the agent panel ------------------------------------------------------ */

.rb-assist[b-yqt923un27] {
    border: 1px solid #d6e4ef;
    border-left: 3px solid var(--omx-primary);
    border-radius: 6px;
    background-color: #f7fbfe;
    padding: 12px 14px;
}

.rb-assist-badge[b-yqt923un27] {
    background-color: var(--omx-primary);
    color: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.rb-assist-note[b-yqt923un27] {
    font-size: 0.85rem;
    color: #244d6b;
}

/*  ::deep IS required for these two: the input is rendered by a child component, so it never
    carries this page's scope attribute and a plain selector would compile to `input[b-xxx]`
    and match nothing. .rb-assist and .rb-name-field are this page's own divs, so they satisfy
    the ancestor requirement. Verified in the compiled bundle.                                 */
.rb-assist[b-yqt923un27]  .form-control,
.rb-name-field[b-yqt923un27]  .form-control {
    border-radius: 20px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    padding: 7px 14px;
    font-size: 0.88rem;
}

.rb-assist[b-yqt923un27]  .form-control:focus,
.rb-name-field[b-yqt923un27]  .form-control:focus {
    box-shadow: 0 2px 10px rgba(8, 98, 155, .35);
}

/*  A gap in the action strip, separating what you do WITH the report (preview, view, export)
    from what you do TO it (open, new, save). Cheaper than a second toolbar row and it stops the
    seven buttons reading as one undifferentiated run. */
.rb-actions-sep[b-yqt923un27] {
    width: 1px;
    height: 22px;
    background: #dfe3e6;
    margin: 0 2px;
}

/*  The rail's two cards sit closer together than page sections do -- they are one control
    surface split in two, not two unrelated sections. */
.rb-rail[b-yqt923un27] { margin-bottom: 12px; }
.rb-rail:last-child[b-yqt923un27] { margin-bottom: 16px; }

/* ---------- sharing ---------------------------------------------------------------- */

.rb-share[b-yqt923un27] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rb-share-opt[b-yqt923un27] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 190px;
    padding: 9px 11px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
}

.rb-share-opt:hover[b-yqt923un27] { border-color: var(--omx-primary); background: #f7fbfe; }

.rb-share-opt span[b-yqt923un27] { display: flex; flex-direction: column; line-height: 1.3; }
.rb-share-opt b[b-yqt923un27] { font-size: 0.87rem; font-weight: 600; }
.rb-share-opt small[b-yqt923un27] { color: #6c757d; font-size: 0.76rem; }

/*  A scrolling list rather than a combo: picking several people is the normal case here, and a
    multi-select combo hides who is already chosen behind a dropdown. */
.rb-share-people[b-yqt923un27] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-height: 190px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    background: #fbfcfd;
}

.rb-share-person[b-yqt923un27] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 190px;
    font-size: 0.85rem;
    cursor: pointer;
}
/* /Pages/POS/CloseShift.razor.rz.scp.css */
/* Plain (non-::deep) selectors -- CloseShift.razor's top-level markup has no single
   wrapping ancestor element, so ::deep rules would never match (see CreateQuote.razor.css
   lesson in CLAUDE.md). */

.shift-toolbar[b-5v52v4gez2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #f7f8f9;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

.shift-section[b-5v52v4gez2] {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

.shift-section-title[b-5v52v4gez2] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 12px;
}

.shift-field[b-5v52v4gez2] {
    margin-bottom: 12px;
}

.shift-field .form-label[b-5v52v4gez2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

.shift-variance-ok[b-5v52v4gez2] {
    font-size: 1rem;
    font-weight: 600;
    color: #16c444;
    margin: 0;
}

.shift-variance-bad[b-5v52v4gez2] {
    font-size: 1rem;
    font-weight: 600;
    color: #b02a37;
    margin: 0;
}

.shift-not-found[b-5v52v4gez2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
}

.shift-not-found i[b-5v52v4gez2] {
    font-size: 30px;
    color: #c4ccd4;
}

.shift-denom-sub[b-5v52v4gez2] {
    font-size: 0.78rem;
    color: #6c757d;
    margin: 4px 0 0;
}

.shift-counted-total[b-5v52v4gez2] {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
    margin: 0;
}
/* /Pages/POS/CreateInvoice.razor.rz.scp.css */
.section-card[b-p6j4duluw7] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.section-title[b-p6j4duluw7] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .75rem;
}

.total-bar[b-p6j4duluw7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin: 1rem 0;
}

.total-bar .total-label[b-p6j4duluw7] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.total-bar .total-value[b-p6j4duluw7] {
    font-size: 1.6rem;
    font-weight: 700;
}
/* /Pages/POS/CreateQuote.razor.rz.scp.css */
/* Mirrors POEdit.razor.css's .po-section/.po-field/.po-toolbar conventions -- CSS isolation
   means these have to be duplicated here rather than shared, same as every other component-scoped
   class in this app (see CLAUDE.md's QuickView popup notes for the same pattern). This page had no
   .razor.css at all before, so .section-card/.section-title (borrowed by name from
   CreateInvoice.razor's markup) were rendering completely unstyled -- that's what made the fields
   look like they had no spacing at all.

   NOTE: these selectors deliberately do NOT use `::deep`, unlike POEdit.razor.css. `::deep` compiles
   to `[b-xxx] .selector` (a scoped ANCESTOR required, separate from the matched element itself) --
   that's only valid when the target sits inside a nested child component (POEdit.razor's DxTabs/
   DxTabPage content). CreateQuote.razor's sections/toolbar/total-bar are flat, direct markup with no
   such wrapping child component, so `::deep` here would never find a matching ancestor and the rule
   would silently never apply -- confirmed via a real running instance: .total-bar and .po-section
   rendered completely unstyled with `::deep`, while nested .po-field/.form-label (whose ancestor
   .po-section carries the scope attribute) happened to still work. Removed `::deep` from every rule;
   matches the plain-selector convention already used by CreateInvoice.razor.css/RecordPayment.razor.css/
   RefundInvoice.razor.css's own .total-bar rules. */

.po-section[b-dou62p811i] {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

.po-section-title[b-dou62p811i] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 12px;
}

.po-field[b-dou62p811i] {
    margin-bottom: 22px;
}

.po-field .form-label[b-dou62p811i] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    display: block;
}

/* Baseline for every other label on this page (the Qty/Notes/Discount popups, which don't use
   .po-field) -- ensures nothing on this page ever falls back to zero spacing. */
.form-label[b-dou62p811i] {
    margin-bottom: 10px;
    display: block;
}

.po-toolbar[b-dou62p811i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #f7f8f9;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

.total-bar[b-dou62p811i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin-top: 24px;
    margin-bottom: 16px;
}

.total-bar .total-label[b-dou62p811i] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.total-bar .total-value[b-dou62p811i] {
    font-size: 1.6rem;
    font-weight: 700;
}
/* /Pages/POS/PayOutDrawerCash.razor.rz.scp.css */
/* Plain (non-::deep) selectors -- this page's top-level markup has no single wrapping
   ancestor element, so ::deep rules would never match (see CreateQuote.razor.css lesson
   in CLAUDE.md). */

.payout-section[b-6jgfef9vt2] {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

.payout-section-title[b-6jgfef9vt2] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 12px;
}

.payout-field[b-6jgfef9vt2] {
    margin-bottom: 12px;
}

.payout-field .form-label[b-6jgfef9vt2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

.payout-available-label[b-6jgfef9vt2] {
    font-weight: 600;
    color: rgb(8, 98, 155);
    margin: 0;
}

.payout-available-value[b-6jgfef9vt2] {
    font-weight: 600;
    color: rgb(8, 98, 155);
    text-align: right;
    margin: 0;
}
/* /Pages/POS/POSscreen.razor.rz.scp.css */
/* Plain (non-::deep) selectors -- POSscreen.razor's top-level markup is not wrapped in a single
   ancestor element (the popups defined later in the file are direct top-level siblings, not
   nested under one wrapper div), so ::deep rules would not reliably match. See the
   CreateQuote.razor.css lesson in CLAUDE.md. */

.ticket-lookup-filters[b-pvpfa3mhca] {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
}

.ticket-lookup-field[b-pvpfa3mhca] {
    margin-bottom: 12px;
}

.ticket-lookup-field .form-label[b-pvpfa3mhca] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

.ticket-lookup-search[b-pvpfa3mhca] {
    display: flex;
    align-items: flex-end;
}

/* ============================================================================
   A previous layout's Quick Actions row and Checkout CTA were styled here --
   .pos-quick-actions / .pos-quick-action / .pos-quick-action-warn / -danger /
   .pos-checkout-cta*. Nothing has rendered any of them since the cart footer
   replaced that row, confirmed by grep against POSscreen.razor, so they are
   gone rather than left to be mistaken for the live .pos-cart-bar /
   .pos-bar-btn rules further down. The names were close enough to be a trap.
   ============================================================================ */

/* ============================================================================
   CHECKOUT POPUP -- redesigned as a card-grid POS payment layout. The original
   payment-type/keypad/action rows all used CSS grid (1fr columns) with fixed
   pixel-width buttons (width:120px/80px/70px) that never stretched to fill
   their cell -- that mismatch is what produced the large uneven gaps between
   buttons ("horrible design"). Every rule below either makes its button a true
   block-level grid/flex item (width:100%) or gives the container a fixed
   track size that matches its content, so nothing floats in oversized
   whitespace again.

   Sizing pass (section titles/cards/keypad/pm-grid all tightened below, and
   the standalone Clear button folded into the quick-amounts column) was done
   specifically so the popup's real content height stays under its own
   max-height on an ordinary desktop viewport -- .pos-checkout-body's own
   overflow-y:auto stays in place as a defensive fallback for a genuinely
   short/zoomed-in viewport, not as the primary way this fits. */

.pos-checkout-body[b-pvpfa3mhca] {
    max-height: 76vh;
    overflow-y: auto;
    padding-right: 6px;
}

/*
    Who is being charged, and what their account can carry.

    Sits above the payment methods because it changes which of them are usable: Account is
    offered on every sale, but whether it can actually be taken depends on a figure that was
    otherwise invisible during checkout.
*/
.pos-cust-strip[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid #eef1f5;
    background: #f8fafc;
}

.pos-cust-who[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pos-cust-who i[b-pvpfa3mhca] {
    color: rgb(8, 98, 155);
    font-size: 14px;
}

.pos-cust-name[b-pvpfa3mhca] {
    font-size: 13.5px;
    font-weight: 700;
    color: #16324f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-cust-acct[b-pvpfa3mhca] {
    font-size: 11.5px;
    color: #8a94a6;
}

/* Holds the account and prepaid balances together on the right of the strip, wrapping onto a
   second line rather than squeezing when the popup runs out of room. */
.pos-cust-credits[b-pvpfa3mhca] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    min-width: 0;
}

.pos-cust-credit[b-pvpfa3mhca] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pos-cust-credit-label[b-pvpfa3mhca] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a94a6;
}

.pos-cust-credit-value[b-pvpfa3mhca] {
    font-size: 15px;
    font-weight: 800;
    color: #16c444;
    font-variant-numeric: tabular-nums;
}

/* No credit left is worth reading differently from a healthy balance -- it is the reason
   Account will be refused, and the cashier should see that before choosing it. */
.pos-cust-credit-value.is-none[b-pvpfa3mhca] {
    color: #b02a37;
}

.pos-cust-credit-limit[b-pvpfa3mhca] {
    font-size: 11.5px;
    color: #8a94a6;
}

/*
    Section headings in the checkout popup.

    The top margin was 12px, which read as cramped against the amount and currency cards above
    -- those are filled panels, so their edge sits right up against the next heading with
    nothing between. 22px gives the Payment Method block room to read as its own section rather
    than a continuation of the row above it.
*/
.pos-checkout-section-title[b-pvpfa3mhca] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a94a6;
    margin: 22px 0 8px;
}

/*
    Only the Currency heading loses its top margin, and it has to be named rather than matched
    by position.

    This was :first-of-type, which does not mean "the first one in the popup" -- it means the
    first of its type among ITS OWN siblings. Currency sits inside .pos-currency-card and
    Payment Method sits directly in the popup body, so they are first-of-type in different
    parents and BOTH matched. That silently cancelled the top margin on Payment Method, which
    is the one heading that needed it, and is why raising the margin appeared to do nothing.
*/
.pos-currency-card .pos-checkout-section-title[b-pvpfa3mhca] {
    margin-top: 0;
}

/* Amount + currency row */
.pos-checkout-top[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
}

.pos-amount-card[b-pvpfa3mhca],
.pos-currency-card[b-pvpfa3mhca] {
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    padding: 12px 16px;
}

/*
    The tendered amount. Sized to be read across a counter -- it is the number the cashier and
    the customer are both looking at while the keypad is used.
*/
.pos-amount-value[b-pvpfa3mhca] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: rgb(8, 98, 155);
    font-variant-numeric: tabular-nums;
}

.pos-amount-status[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.pos-amount-status-chip[b-pvpfa3mhca] {
    background: rgb(8, 98, 155);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
}

.pos-amount-status-desc[b-pvpfa3mhca] {
    font-size: 12.5px;
    color: #6c7686;
}

/* Tender-type selectors were plain <div onclick> elements -- not natively focusable/operable by
   keyboard, invisible as controls to screen readers. Converted to real <button> elements; this
   strips the browser's default button chrome (border/background/font). Restyled below as
   icon+label cards, replacing the old flat purple/lime/mustard fills. */
button.payment-types[b-pvpfa3mhca] {
    font: inherit;
    width: 100%;
    height: auto !important;
    min-height: 66px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #e5e9ef !important;
    color: #3a4453;
    font-weight: 600;
    font-size: 12.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: all .12s ease;
}

button.payment-types i[b-pvpfa3mhca] {
    font-size: 18px;
    color: rgb(8, 98, 155);
}

button.payment-types:hover[b-pvpfa3mhca] {
    border-color: rgb(8, 98, 155) !important;
    box-shadow: 0 3px 10px rgba(8, 98, 155, .12);
    opacity: 1 !important;
}

/* Currently-selected tender -- was a flat purple fill (.non-cash-credt-types in app.css); this
   scoped, higher-specificity override wins over that global !important rule (Blazor's CSS
   isolation adds a [b-xxxx] attribute selector here, which out-specifies the bare global class
   even with matching !important weight). */
button.payment-types.non-cash-credt-types[b-pvpfa3mhca] {
    background: rgb(8, 98, 155) !important;
    border-color: rgb(8, 98, 155) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(8, 98, 155, .32);
}

button.payment-types.non-cash-credt-types i[b-pvpfa3mhca],
button.payment-types.non-cash-credt-types .pos-pm-label[b-pvpfa3mhca] {
    color: #fff !important;
}

/* HasMoney-credt-types used to paint the whole button mustard-yellow whenever that tender had an
   amount entered -- replaced with a small green pill next to the label instead (the pill itself
   is already conditionally shown/hidden by the existing CashChecked/CreditChecked/etc. bindings
   in POSscreen.razor, so no C# change was needed), which reads clearly without fighting the
   selected-state color above. */
.HasMoney-credt-types[b-pvpfa3mhca] {
    background-color: transparent !important;
}

.pos-pm-amount[b-pvpfa3mhca] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 8px;
    background: rgba(22, 196, 68, .15);
    color: #16c444;
}

button.payment-types.non-cash-credt-types .pos-pm-amount[b-pvpfa3mhca] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.pos-pm-grid[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

/* Keypad + quick amounts -- a real 3-column numeric grid (left) instead of digits scattered
   across an 8-column grid, with quick-cash chips (now including Clear, folded in as the 5th
   item -- see the markup comment in POSscreen.razor) as their own column (right) instead of
   wedged between the numbers. Both columns are 5 rows tall so they align. */
.pos-checkout-keys[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 14px;
}

.pos-keypad-modern[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
}

.pos-key-btn[b-pvpfa3mhca] {
    width: 100%;
    height: 46px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #f3f5f8;
    color: #2a3341;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: all .1s ease;
}

.pos-key-btn:hover[b-pvpfa3mhca] {
    background: #e7ebf0;
}

.pos-key-btn:active[b-pvpfa3mhca],
.pos-key-btn.active[b-pvpfa3mhca] {
    transform: scale(0.95);
    background: rgb(8, 98, 155);
    color: #fff;
}

.pos-key-delete[b-pvpfa3mhca] {
    background: #fdeceb;
    color: #d64545;
}

.pos-key-delete:hover[b-pvpfa3mhca] {
    background: #fbdad8;
}

.pos-quick-amounts[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pos-quick-amt[b-pvpfa3mhca] {
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #eef4fa;
    color: rgb(8, 98, 155);
    font-weight: 700;
    font-size: 11.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: all .1s ease;
}

.pos-quick-amt:hover[b-pvpfa3mhca] {
    background: #dfeaf5;
}

.pos-quick-amt-exact[b-pvpfa3mhca] {
    background: rgba(22, 196, 68, .12);
    color: #16c444;
}

.pos-quick-amt-exact:hover[b-pvpfa3mhca] {
    background: rgba(22, 196, 68, .2);
}

/* Clear -- folded into this column as its 5th item (was a separate full-width row below the
   keypad, which is what pushed the popup's total content height past what fits without
   scrolling). Kept the same amber "this wipes something" color it had as a standalone button. */
.pos-quick-amt-clear[b-pvpfa3mhca] {
    background: #fff4e0;
    color: #b5750a;
}

.pos-quick-amt-clear:hover[b-pvpfa3mhca] {
    background: #ffe9c2;
}

/* Secondary actions (Coupon/Notes/Shipping/Pick up/Delivery) -- a wrapping pill toolbar instead
   of a 5-column grid with fixed-width buttons. Delete and Void moved out of this popup to the
   cart, which is why no warn/danger variants live here. */
.pos-secondary-actions[b-pvpfa3mhca] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pos-secondary-btn[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #e2e5ea;
    background: #fff;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3a4453;
    transition: all .12s ease;
}

.pos-secondary-btn:hover[b-pvpfa3mhca] {
    border-color: rgb(8, 98, 155);
    background: #f0f7fc;
}

/* Footer -- Close on the left, a big primary Pay button (with the live total) on the right. */
.pos-checkout-footer[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pos-pay-btn[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    background: #16c444;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(22, 196, 68, .3);
    transition: all .12s ease;
}

.pos-pay-btn:hover[b-pvpfa3mhca] {
    background: #12a83a;
}

.pos-pay-btn:disabled[b-pvpfa3mhca] {
    opacity: .6;
    cursor: not-allowed;
}

/* Resume Ticket popup row -- replaces the old stacked <p class="small-p"> layout with a tight
   flex column, matching pos-cart-line's own visual language elsewhere on this page. */
.resume-ticket-row[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
}

.resume-ticket-main[b-pvpfa3mhca] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.resume-ticket-bill[b-pvpfa3mhca] {
    font-weight: 700;
    color: rgb(8, 98, 155);
    font-size: 14px;
}

.resume-ticket-customer[b-pvpfa3mhca] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.resume-ticket-comments[b-pvpfa3mhca] {
    font-size: 12px;
    color: #8a94a6;
}


/* =====================================================================================
   SPLIT REGISTER
   Cart left, product browsing right.

   Plain selectors throughout, no ::deep -- every element below is this component's own
   markup, so Blazor scopes it directly. (::deep needs a scoped ANCESTOR, which several of
   this page's top-level popups do not have; that trap is documented in CLAUDE.md.)
   ===================================================================================== */

/*
    One pane now, and it has to hold the page open by itself.

    While the browsing tiles existed, THEY set the height -- .pos-product-grid's max-height was
    what stopped the register collapsing to the height of an empty basket. With them gone,
    nothing did, and the cart sat as a short card with the rest of the screen blank beneath it.

    So the height is stated outright. calc() rather than a plain vh because the top bar and the
    lookup row above it are real and fixed; subtracting them is what makes the pane end at the
    bottom of the window instead of pushing past it and scrolling -- which on a register is worse
    than empty space, since it can put Checkout below the fold.

    THE SUBTRACTED VALUE IS EMPIRICAL, NOT ARITHMETIC, and the arithmetic was wrong twice.

    Adding up the visible chrome -- top bar ~52px, content padding ~18px, the lookup row ~65px,
    this pane's own bottom margin 10px -- predicts about 145px. 170px was set on that basis and
    scrolled; 205px scrolled too. 275px is where it settled, which means roughly 130px of height
    above this element comes from somewhere the sum does not see: Bootstrap row gutters, the
    wrapper divs between .content and here, main.flex-fill, and whatever the always-rendered
    popup bodies further down this page contribute.

    It errs high on purpose. A small gap below the register is harmless; a scrollbar is not,
    because it can push Checkout below the fold.

    If this ever needs a fourth adjustment, stop tuning it and go find what is actually adding
    the height -- three misses says the model is wrong, not the number. Measuring the element's
    real offsetTop in the browser would settle it in seconds.

    min-height keeps it usable on a very short window, where calc() would otherwise squeeze the
    lines out entirely.
*/
.pos-split[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 275px);
    /*
        Lowered from 420px alongside the taller subtraction above, and kept there.

        The floor and the calculated height must never cross: if calc() drops below the floor,
        the floor wins and overflows the very scrollbar this is meant to remove. At 275px with
        the guard below taking over at 760px, the smallest height this can compute is about
        485px -- comfortably clear of 360px. The old 420px floor would also survive that, but
        only by a few pixels at the boundary, which is not a margin worth relying on.
    */
    min-height: 360px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 10px;
}

/* ---------------------------------- left: cart ---------------------------------- */
.pos-cart-pane[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    background: #fff;
    /* No border-right: there is nothing to its right any more. */
    min-width: 0;
    flex: 1;
    min-height: 0;
}

.pos-cart-head[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #eef2f6;
}

.pos-cart-avatar[b-pvpfa3mhca] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: rgb(8, 98, 155);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
}

.pos-cart-cust[b-pvpfa3mhca] {
    min-width: 0;
    flex: 1;
}

    .pos-cart-cust b[b-pvpfa3mhca] {
        display: block;
        font-size: 13.5px;
        line-height: 1.3;
    }

    .pos-cart-cust span[b-pvpfa3mhca] {
        display: block;
        font-size: 11.5px;
        color: #6b7784;
    }

/*
    The lines take whatever room is left and scroll inside it.

    overflow was `hidden`, which was survivable when the pane sized to its content and the grid
    below capped itself. Now that the pane is a fixed height, hidden would simply cut off the
    end of a long basket with no way to reach it -- auto is what makes a twenty-line sale
    reachable while keeping the totals and Checkout pinned where the cashier expects them.
*/
.pos-cart-lines[b-pvpfa3mhca] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.pos-cart-totals[b-pvpfa3mhca] {
    border-top: 1px solid #e2e8f0;
    padding: 11px 14px;
    background: #fbfcfd;
}

.pos-tot-row[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #5b6773;
    padding: 2px 0;
}

    .pos-tot-row b[b-pvpfa3mhca] {
        color: #131c26;
        font-variant-numeric: tabular-nums;
    }

.pos-tot-grand[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px dashed #d8e0e8;
}

    .pos-tot-grand span[b-pvpfa3mhca] {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #5b6773;
    }

    .pos-tot-grand b[b-pvpfa3mhca] {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
        color: #131c26;
    }

/*
    THE ACTION BAR -- one row, More at the left, Checkout at the right.

    It was two rows: six icon-only tools above, then More and Checkout below. Splitting them cost
    vertical space the register does not have, and the icons carried no captions, which is the
    mistake this project has already written down twice.

    Everything is one flex row now, and ranking is carried by position and weight rather than by
    a separate line: More sits furthest from the till hand and is quietest, Checkout is last,
    widest and solid blue. flex: 1 1 0 with min-width: 0 lets all eight share the row evenly and
    lets labels ellipse instead of forcing a horizontal scrollbar -- a fixed width inside a flex
    row is exactly what produced the uneven gaps in the checkout popup.
*/
.pos-cart-bar[b-pvpfa3mhca] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px 14px;
    border-top: 1px solid #e2e8f0;
    background: #fbfcfd;
}

.pos-bar-btn[b-pvpfa3mhca] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    color: #5b6773;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.pos-bar-btn i[b-pvpfa3mhca] {
    font-size: 15px;
    line-height: 1;
}

/* The caption. Ellipsed rather than wrapped: a label that wraps to a second line changes the
   button's height and breaks the row's alignment. */
.pos-bar-btn span:not(.pos-bar-badge)[b-pvpfa3mhca] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-bar-btn:hover[b-pvpfa3mhca] {
    background: #eef4f9;
    border-color: rgb(8, 98, 155);
    color: rgb(8, 98, 155);
}

/* Quietest in the row, and furthest from the till hand. */
.pos-bar-more[b-pvpfa3mhca] {
    color: #7b8794;
}

/* Void is the one destructive action here. Red on approach rather than permanently red -- a row
   with one permanently alarming button becomes a warning that gets ignored. CancelSale's own
   confirmation is the actual guard. */
.pos-bar-danger:hover[b-pvpfa3mhca] {
    background: #fdecee;
    border-color: #e9b8be;
    color: #b02a37;
}

/* The primary path, and it must never be ambiguous: wider than the rest, solid, and last. */
.pos-bar-checkout[b-pvpfa3mhca] {
    flex: 1.9 1 0;
    background: rgb(8, 98, 155);
    border-color: rgb(8, 98, 155);
    color: #fff;
    font-size: 12.5px;
}

.pos-bar-checkout i[b-pvpfa3mhca] {
    font-size: 17px;
}

.pos-bar-checkout:hover[b-pvpfa3mhca] {
    background: #06517f;
    border-color: #06517f;
    color: #fff;
}

/* How many held tickets are waiting to be resumed. */
.pos-bar-badge[b-pvpfa3mhca] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: rgb(8, 98, 155);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Two ranked buttons now, not three: Hold moved up to the quick bar, so the columns changed
   from auto/1fr/1.5fr to auto/1fr. More stays quietest, Checkout loudest -- the primary path
   must never be ambiguous. Neither is disabled on an empty cart, since Resume and Open Invoices
   are only usable WHILE the cart is empty. */
/* ------------------------- checkout: ranked money summary ------------------------- */
.pos-pay-summary[b-pvpfa3mhca] {
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    padding: 11px 13px;
    background: #fbfcfd;
    margin-bottom: 6px;
}

.pos-pay-row[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13px;
    color: #5b6773;
}

    .pos-pay-row b[b-pvpfa3mhca] {
        color: #131c26;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .pos-pay-row:first-child b[b-pvpfa3mhca] {
        font-size: 16px;
        font-weight: 800;
    }

/* Change gets its own panel -- it is the figure read aloud to the customer, and it used to
   rank equal with five other values in a flat strip. */
.pos-pay-change[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-top: 8px;
    padding: 9px 11px;
    background: #eaf7ee;
    border: 1px solid #c6e9d2;
    border-radius: 9px;
}

    .pos-pay-change span[b-pvpfa3mhca] {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #0f7a37;
    }

    .pos-pay-change b[b-pvpfa3mhca] {
        font-size: 19px;
        font-weight: 800;
        color: #0f7a37;
        font-variant-numeric: tabular-nums;
    }

/* ------------------------------ More Actions sheet ------------------------------ */
.pos-sheet[b-pvpfa3mhca] {
    padding: 2px 2px 6px;
}

.pos-sheet-group[b-pvpfa3mhca] {
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #8a95a1;
    font-weight: 800;
    margin: 14px 0 8px;
}

    .pos-sheet-group:first-child[b-pvpfa3mhca] {
        margin-top: 2px;
    }

.pos-sheet-acts[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 7px;
}

/*
    Smaller, so the sheet fits without scrolling.

    .omx-action-btn is declared in app.css at 80px tall and 160px WIDE -- a fixed width inside a
    1fr grid cell, so the buttons never filled their cells and the sheet was both taller and
    gappier than its content needed. width:100% fixes the gaps; the reduced height and font fix
    the overflow. Overridden here rather than in app.css because the sizing is specific to this
    sheet, and a scoped rule out-specifies the global one without needing !important.

    That global class is used by this page and nothing else -- checked -- so nothing elsewhere
    is affected either way.
*/
.pos-sheet-acts .omx-action-btn[b-pvpfa3mhca] {
    width: 100%;
    height: 58px;
    font-size: 12px;
    line-height: 1.25;
    padding: 6px 8px;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .07);
}

.pos-sheet-acts .omx-action-btn i[b-pvpfa3mhca] {
    display: block;
    font-size: 15px;
    margin-bottom: 3px;
}

/*
    Both variants keep WHITE captions.

    They previously set a dark amber and a dark red as the TEXT colour, with !important, on top
    of the global class's solid blue background -- dark-on-blue, which is what made Refund Ticket
    and Sign Out hard to read. The distinction lives in the background now, where white text
    works.
*/
.omx-action-warn[b-pvpfa3mhca] {
    color: #fff !important;
    background-color: #b45309 !important;
    border-color: #b45309 !important;
}

.omx-action-danger[b-pvpfa3mhca] {
    color: #fff !important;
    border-color: #b02a37 !important;
}

/*
    Sign Out carries both .omx-action-danger and .sign-out-btn, and .sign-out-btn's orange lives
    in app.css unscoped -- so the scoped rule above would otherwise out-specify it and repaint
    the button red. Its orange is restated here deliberately, with a white caption.
*/
.sign-out-btn[b-pvpfa3mhca] {
    color: #fff !important;
    background-color: #f16021 !important;
    border-color: #f16021 !important;
}

/* ------------------------------------ responsive ------------------------------------ */
/* On a short window the fixed height stops being a help. Let the register grow with its
   content instead, so nothing is squeezed out of reach. */
@media (max-height:760px) {
    .pos-split[b-pvpfa3mhca] {
        height: auto;
        min-height: 0;
    }

    .pos-cart-lines[b-pvpfa3mhca] {
        max-height: 46vh;
    }
}

@media (max-width:640px) {
    /* Eight across stops fitting. The row wraps rather than shrinking the labels away. */
    .pos-cart-bar[b-pvpfa3mhca] {
        flex-wrap: wrap;
    }

    .pos-bar-btn[b-pvpfa3mhca] {
        flex: 1 1 22%;
    }

    .pos-bar-checkout[b-pvpfa3mhca] {
        flex: 1 1 100%;
    }

    /* Five columns stop fitting. The description keeps the full width and everything else
       falls to a second line, rather than the money and the stepper squeezing each other. */
    .pos-cart-row[b-pvpfa3mhca] {
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }

    /* Both are placed explicitly. Left to auto-placement the stepper would drop into the
       32px kebab column on the second row and be crushed. */
    .pos-cart-stepper[b-pvpfa3mhca] {
        grid-column: 2;
        justify-self: end;
    }

    .pos-cart-remove[b-pvpfa3mhca] {
        grid-column: 3;
        justify-self: end;
    }

    .pos-sheet-acts[b-pvpfa3mhca] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:420px) {
    .pos-sheet-acts[b-pvpfa3mhca] {
        grid-template-columns: 1fr;
    }
}

/* Qty stepper on a cart line. The mockup promised these; the first cut shipped a static
   "1 x $12,500.00" instead. Small but real: changing a quantity previously meant focusing the
   row, opening the Qty Change popup, typing and confirming. */
.pos-cart-stepper[b-pvpfa3mhca] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
    /* No margin-top any more: it used to nudge the stepper clear of the meta line above it,
       and in its own grid cell that offset only knocks it out of vertical centre. */
    background: #fff;
}

    .pos-cart-stepper button[b-pvpfa3mhca] {
        border: 0;
        background: #f7f9fb;
        color: rgb(8, 98, 155);
        font-weight: 800;
        font-size: 14px;
        line-height: 1;
        width: 26px;
        height: 26px;
        cursor: pointer;
        padding: 0;
    }

        .pos-cart-stepper button:hover[b-pvpfa3mhca] {
            background: #e8f1f8;
        }

    .pos-cart-stepper em[b-pvpfa3mhca] {
        font-style: normal;
        font-weight: 800;
        font-size: 12.5px;
        font-variant-numeric: tabular-nums;
        min-width: 22px;
        text-align: center;
    }

/* Shortcut to the customer lookup at the top of the page. */
.pos-cart-change[b-pvpfa3mhca] {
    flex: none;
    border: 1px solid #cfe0ee;
    background: #f2f8fd;
    color: rgb(8, 98, 155);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}

    .pos-cart-change:hover[b-pvpfa3mhca] {
        background: #e4f0fa;
    }

/* ---------------------------------- packaging picker ---------------------------------- */
.pos-pack-body[b-pvpfa3mhca] {
    padding: 4px 2px;
}

.pos-pack-label[b-pvpfa3mhca] {
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #8a95a1;
    font-weight: 800;
    margin: 12px 0 7px;
}

    .pos-pack-label:first-child[b-pvpfa3mhca] {
        margin-top: 2px;
    }

.pos-pack-list[b-pvpfa3mhca] {
    display: grid;
    gap: 7px;
}

/* Each option is a real button: keyboard-reachable and announced as a control, which a
   clickable div is not. */
.pos-pack-opt[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: center;
    text-align: left;
    border: 1px solid #e4eaf1;
    background: #fff;
    border-radius: 10px;
    padding: 11px 13px;
    cursor: pointer;
    min-height: 52px;
}

    .pos-pack-opt:hover[b-pvpfa3mhca] {
        border-color: rgb(8, 98, 155);
    }

    .pos-pack-opt.on[b-pvpfa3mhca] {
        border-color: rgb(8, 98, 155);
        background: #f2f8fd;
        box-shadow: inset 0 0 0 1px rgb(8, 98, 155);
    }

.pos-pack-name[b-pvpfa3mhca] {
    font-weight: 700;
    font-size: 13.5px;
}

.pos-pack-tag[b-pvpfa3mhca] {
    background: #eef2f6;
    color: #5b6773;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-left: 6px;
}

.pos-pack-sub[b-pvpfa3mhca] {
    grid-column: 1;
    font-size: 12px;
    color: #6b7784;
    font-variant-numeric: tabular-nums;
}

.pos-pack-price[b-pvpfa3mhca] {
    grid-row: 1 / 3;
    grid-column: 2;
    font-weight: 800;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    color: rgb(8, 98, 155);
    white-space: nowrap;
}

/* What actually leaves stock, and what it costs. A pack is the one place on this screen where
   the quantity removed is not the number the cashier tapped, so it is stated rather than
   implied. */
.pos-pack-effect[b-pvpfa3mhca] {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #f7f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #42505e;
    font-variant-numeric: tabular-nums;
}

/* ======================================================================
   Checkout: two columns.

   How you are paying on the left, what is owed on the right. The previous
   build stacked everything, which put the money at the very bottom below
   the keypad -- so the amount being entered and the balance it leaves were
   the two furthest-apart things on screen, when they are the two the
   cashier reads together.

   Container-relative auto-fit, not a viewport breakpoint: this sits inside
   a popup, and col-md-* style rules measure the window rather than the
   popup. Below roughly 760px of popup the two columns become one, money
   first, because on a phone the figure matters more than the keypad.
   ====================================================================== */

.pos-co-split[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: start;
}

.pos-co-tender[b-pvpfa3mhca] { min-width: 0; }

@media (max-width: 860px) {
    .pos-co-split[b-pvpfa3mhca] { grid-template-columns: 1fr; }
    /* Money first when stacked: the total is what gets read aloud. */
    .pos-co-money[b-pvpfa3mhca] { order: -1; }
}

/* ---------------------------------------------------------------- money column */

.pos-co-money[b-pvpfa3mhca] {
    min-width: 0;
    background: #f7f9fc;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 0;
}

.pos-money-basket[b-pvpfa3mhca],
.pos-money-run[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-money-row[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .84rem;
    color: #5c6875;
}
.pos-money-row b[b-pvpfa3mhca] {
    font-weight: 600;
    color: #1f2937;
    /* Digits line up column-wise so the eye can compare them down the panel. */
    font-variant-numeric: tabular-nums;
}
.pos-money-muted[b-pvpfa3mhca], .pos-money-muted b[b-pvpfa3mhca] { color: #9aa4b2; font-weight: 500; }

/* The heading figure. Everything above it is detail; everything below is
   arithmetic against it. */
.pos-money-due[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgb(8, 98, 155);
    color: #fff;
}
.pos-money-due span[b-pvpfa3mhca] { font-size: .78rem; opacity: .85; letter-spacing: .02em; }
.pos-money-due b[b-pvpfa3mhca] { font-size: 1.22rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Split tender, one line each. */
.pos-money-tenders[b-pvpfa3mhca] {
    display: flex; flex-direction: column; gap: 3px;
    padding: 9px 11px;
    border: 1px dashed #d7dfea;
    border-radius: 9px;
}
.pos-money-caption[b-pvpfa3mhca] {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #9aa4b2; margin-bottom: 3px;
}
.pos-money-tender[b-pvpfa3mhca] {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .82rem; color: #1f2937;
}
.pos-money-tender b[b-pvpfa3mhca] { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Change gets its own panel because it is the number said out loud to the
   customer. As one of six identical rows it was the easiest to misread. */
.pos-money-change[b-pvpfa3mhca] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(22, 196, 68, .12);
    border: 1px solid rgba(22, 196, 68, .35);
}
.pos-money-change span[b-pvpfa3mhca] { font-size: .8rem; font-weight: 600; color: #0f7a2c; }
.pos-money-change b[b-pvpfa3mhca] {
    font-size: 1.3rem; font-weight: 800; color: #0f7a2c;
    font-variant-numeric: tabular-nums;
}

/* ======================================================================
   The cart, as a list.

   This replaced a DxGrid. The grid brought a header row, a pager, a
   page-size selector, always-on filter buttons, column resize handles,
   focused-row highlighting and Grid_CustomizeElement's #E6E6E6 headers
   with alternate-row striping -- the report-page treatment used across
   this app, and the reason the register did not resemble the layout it
   was built from.

   Styling a list is also the only way this stays right. Suppressing grid
   chrome means writing rules that have to keep out-specificity the
   DevExpress theme, and that is a fight to be re-fought on every upgrade.
   ====================================================================== */

.pos-cart-list[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    /* Lines are separated by a hairline, not boxed. Boxing each row is what
       made the grid read as a table. */
    gap: 0;
}

/*
    Five columns: actions, description, money, quantity, remove.

    Was three, with the stepper tucked under the product name -- which put the control that
    changes a line's value on the far side of the row from the value itself. Reading now runs
    left to right in the order a cashier actually needs it: what it is, what it costs, how many,
    and the way out.

    minmax(0, 1fr) on the description column is what lets its text truncate; without the 0
    minimum a grid column refuses to shrink below its content and a long product name pushes the
    money and the stepper off the row instead of ellipsing.
*/
.pos-cart-row[b-pvpfa3mhca] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 2px;
    border-bottom: 1px solid #eef1f5;
    cursor: pointer;
    transition: background .12s;
}
.pos-cart-row:last-child[b-pvpfa3mhca] { border-bottom: none; }
.pos-cart-row:hover[b-pvpfa3mhca] { background: #f7f9fc; }

/* Selection is a left marker, not a fill. A full-row highlight competes with
   the line total, which is the thing being read. */
.pos-cart-row.is-selected[b-pvpfa3mhca] {
    background: rgba(8, 98, 155, .05);
    box-shadow: inset 3px 0 0 rgb(8, 98, 155);
}

/* Secondary by construction: visible enough to find, quiet enough not to
   compete with the product name or the money. */
.pos-cart-kebab[b-pvpfa3mhca] {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: none; background: transparent;
    border-radius: 6px;
    color: #9aa4b2;
    opacity: .55;
    cursor: pointer;
    transition: opacity .12s, background .12s, color .12s;
}
.pos-cart-row:hover .pos-cart-kebab[b-pvpfa3mhca] { opacity: 1; }
.pos-cart-kebab:hover[b-pvpfa3mhca] { background: #eef2f7; color: rgb(8, 98, 155); }

/*
    Remove, in the last column.

    Same quiet-until-hovered treatment as the kebab -- findable without competing with the
    product name or the money -- but it turns red on approach, because this one is destructive
    and should not look like the others right before it is pressed. It still routes through
    RemoveCartItem's confirmation prompt; the colour is a warning, not the guard.
*/
.pos-cart-remove[b-pvpfa3mhca] {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: none; background: transparent;
    border-radius: 6px;
    color: #9aa4b2;
    opacity: .55;
    cursor: pointer;
    font-size: 13px;
    transition: opacity .12s, background .12s, color .12s;
}

.pos-cart-row:hover .pos-cart-remove[b-pvpfa3mhca] { opacity: 1; }

.pos-cart-remove:hover[b-pvpfa3mhca] {
    background: #fdecee;
    color: #b02a37;
}

.pos-cart-empty[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: #9aa4b2;
    font-size: .86rem;
    text-align: center;
}
.pos-cart-empty i[b-pvpfa3mhca] { font-size: 1.6rem; opacity: .5; }

/*
    An action that cannot run yet.

    Dimmed, not disabled: a disabled button cannot fire a click, so it can never
    say why it is unavailable -- and "why is Void greyed out" is exactly the
    question this answers. It stays clickable and explains itself in a toast;
    this only makes the state visible before the click rather than after it.

    Kept subtle on purpose. These become available the moment an item is
    scanned, which on a till is most of the time, so a heavy treatment would be
    shouting about a state that barely lasts.
*/
.pos-bar-btn-idle[b-pvpfa3mhca] {
    opacity: 0.45;
}

.pos-bar-btn-idle:hover[b-pvpfa3mhca] {
    opacity: 0.7;
}

/* Search and export on one line. The export button used to sit on a row of its
   own above the grid, where it read as a stray control belonging to nothing. */
.resume-toolbar[b-pvpfa3mhca] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.resume-toolbar-search[b-pvpfa3mhca] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nothing on hold is an ordinary state, so it gets a plain explanation rather
   than an empty grid with "No data to display" adrift in the middle of it. */
.resume-empty[b-pvpfa3mhca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 40px 24px;
    color: #6b7c8a;
}

.resume-empty i[b-pvpfa3mhca] {
    font-size: 2rem;
    color: #b6c2cc;
}

.resume-empty-head[b-pvpfa3mhca] {
    font-weight: 600;
    color: #33414d;
}

.resume-empty-sub[b-pvpfa3mhca] {
    font-size: 0.85rem;
    max-width: 340px;
}
/* /Pages/POS/StockRequest.razor.rz.scp.css */

/* ------------------------------- asking by the case ------------------------------- */
.sr-pack-tag[b-v8c341elwf] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #eef2f6;
    color: #5b6773;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Explains the base-unit figure above it; never replaces it. */
.sr-pack-note[b-v8c341elwf] {
    display: block;
    font-size: 11.5px;
    color: #6b7784;
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}

.sr-pack-effect[b-v8c341elwf] {
    margin: 16px 0 0;
    padding: 10px 12px;
    background: #f7f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #42505e;
    font-variant-numeric: tabular-nums;
}
/* /Pages/PurchaseOrders/POEdit.razor.rz.scp.css */
/* Header / breadcrumb */
[b-ptkwb4wf6m] .po-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

[b-ptkwb4wf6m] .po-vendor-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
    margin: 0;
}

[b-ptkwb4wf6m] .po-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

[b-ptkwb4wf6m] .po-step {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-ptkwb4wf6m] .po-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: #b9bec4;
    flex: none;
}

[b-ptkwb4wf6m] .po-step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    white-space: nowrap;
}

[b-ptkwb4wf6m] .po-step-connector {
    width: 26px;
    height: 2px;
    background: #d9dcdf;
    margin: 0 8px;
    flex: none;
}

[b-ptkwb4wf6m] .po-step-done .po-step-icon { background: #16c444; }
[b-ptkwb4wf6m] .po-step-done .po-step-label { color: #16c444; }
[b-ptkwb4wf6m] .po-step-connector-done { background: #16c444; }

[b-ptkwb4wf6m] .po-step-active .po-step-icon { background: rgb(8, 98, 155); }
[b-ptkwb4wf6m] .po-step-active .po-step-label { color: rgb(8, 98, 155); }
[b-ptkwb4wf6m] .po-step-connector-active { background: rgb(8, 98, 155); }

[b-ptkwb4wf6m] .po-step-error .po-step-icon { background: #b02a37; }
[b-ptkwb4wf6m] .po-step-error .po-step-label { color: #b02a37; }
[b-ptkwb4wf6m] .po-step-connector-error { background: #b02a37; }

/* Action toolbar */
[b-ptkwb4wf6m] .po-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #f7f8f9;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

/* Section cards */
[b-ptkwb4wf6m] .po-section {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

[b-ptkwb4wf6m] .po-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 12px;
}

[b-ptkwb4wf6m] .po-field {
    margin-bottom: 12px;
}

[b-ptkwb4wf6m] .po-field .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

/* Normalize control heights so OmxComboBox lines up with DxDateEdit / DxSpinEdit */
[b-ptkwb4wf6m] .po-field .omx-combobox-wrapper {
    height: 34px;
}

[b-ptkwb4wf6m] .po-field .omx-input {
    height: 34px !important;
    line-height: 34px;
}

[b-ptkwb4wf6m] .po-field .dxbl-edit,
[b-ptkwb4wf6m] .po-field .dxbl-spinedit,
[b-ptkwb4wf6m] .po-field .dxbl-date-edit-content {
    min-height: 34px;
}

/* Add line item strip */
[b-ptkwb4wf6m] .po-add-line {
    background: #f7f8f9;
    border: 1px dashed #c7ccd1;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

[b-ptkwb4wf6m] .po-add-line .po-field {
    margin-bottom: 0;
}

/* Totals footer */
[b-ptkwb4wf6m] .po-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid #e6e6e6;
    max-width: 100%;
    box-sizing: border-box;
}

[b-ptkwb4wf6m] .po-totals-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    max-width: 100%;
}

[b-ptkwb4wf6m] .po-totals-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
}

[b-ptkwb4wf6m] .po-totals-value {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 100px;
    text-align: right;
    word-break: break-word;
}

[b-ptkwb4wf6m] .po-totals-row-main .po-totals-label,
[b-ptkwb4wf6m] .po-totals-row-main .po-totals-value {
    font-size: 1.05rem;
}

/* ------------------------------- ordering by the case ------------------------------- */
/* Plain selectors: POEdit wraps its body in a top-level div, but these sit inside a DxGrid
   cell template and a DxPopup, so they are this component's own markup either way. */

/* The pack reading under a base-unit quantity. Quiet and secondary -- the base-unit number is
   the one that is received against and counted, this only explains it. */
.po-pack-note[b-ptkwb4wf6m] {
    display: block;
    font-size: 11.5px;
    color: #6b7784;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* What the order actually commits to, stated before it is committed. */
.po-pack-effect[b-ptkwb4wf6m] {
    margin: 16px 0 0;
    padding: 10px 12px;
    background: #f7f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #42505e;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------- shipments ------------------------------------- */
/* Plain selectors: these sit inside a DxTabPage, which is a child component, but the page
   already wraps its body in a top-level div so ::deep would also work here -- plain is used
   for consistency with the rest of the shipment markup. */

.ship-empty[b-ptkwb4wf6m] { color: #8a95a1; font-style: italic; padding: 8px 2px; }

.ship-card[b-ptkwb4wf6m] {
    background: #fff;
    border: 1px solid #e4eaf1;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.ship-head[b-ptkwb4wf6m] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ship-carrier[b-ptkwb4wf6m] {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #42505e;
}

/* The number is the link. With no integration configured this is the whole feature. */
.ship-number[b-ptkwb4wf6m] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    color: rgb(8, 98, 155) !important;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.ship-number:hover[b-ptkwb4wf6m] { text-decoration: underline; }
.ship-number i[b-ptkwb4wf6m] { font-size: 11px; opacity: .7; margin-left: 3px; }

.ship-badge[b-ptkwb4wf6m] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 10px;
    white-space: nowrap;
}

.ship-pending[b-ptkwb4wf6m]    { background: #eef1f4; color: #6b7784; }
.ship-intransit[b-ptkwb4wf6m]  { background: #eaf3fa; color: rgb(8, 98, 155); }
.ship-exception[b-ptkwb4wf6m]  { background: #fdf3e2; color: #a56a00; }
.ship-delivered[b-ptkwb4wf6m]  { background: #e6f6ec; color: #0f8a37; }

.ship-meta[b-ptkwb4wf6m] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 9px;
    font-size: 12.5px;
    color: #5b6773;
}

.ship-meta i[b-ptkwb4wf6m] { margin-right: 4px; opacity: .75; }
.ship-meta .ship-delivered[b-ptkwb4wf6m] { background: none; padding: 0; color: #0f8a37; font-weight: 600; }
.ship-meta .ship-polled[b-ptkwb4wf6m] { color: #8a95a1; margin-left: auto; }

/* Carrier messages and "not connected" notes. Stated, not alarmed -- an unrecognised number is
   normal for a few hours after booking. */
.ship-note[b-ptkwb4wf6m] {
    margin: 9px 0 0;
    font-size: 12px;
    color: #6b7784;
    background: #f7f9fb;
    border-radius: 7px;
    padding: 8px 10px;
    line-height: 1.45;
}

.ship-actions[b-ptkwb4wf6m] {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    border-top: 1px dotted #e2e8f0;
    padding-top: 6px;
}

.ship-events[b-ptkwb4wf6m] {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px dotted #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ship-events li[b-ptkwb4wf6m] { display: flex; gap: 12px; font-size: 12.5px; align-items: baseline; }

.ship-ev-when[b-ptkwb4wf6m] {
    color: #8a95a1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 92px;
}

.ship-ev-what[b-ptkwb4wf6m] { color: #2b3a47; flex: 1; }
.ship-ev-where[b-ptkwb4wf6m] { color: #6b7784; white-space: nowrap; }

/* Goods arriving without a sellable price. Amber rather than red: the order is fine, the
   receiving is fine, and only the selling is blocked. */
.po-unpriced[b-ptkwb4wf6m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdf3e2;
    border: 1px solid #f0dcb4;
    border-radius: 9px;
    padding: 12px 15px;
    margin: 0 0 14px;
    font-size: 13.2px;
    color: #7a5100;
    line-height: 1.5;
}

.po-unpriced i[b-ptkwb4wf6m] { font-size: 17px; flex: none; margin-top: 1px; }
.po-unpriced b[b-ptkwb4wf6m] { color: #5e3d00; }
.po-unpriced a[b-ptkwb4wf6m] { color: #7a5100 !important; font-weight: 600; margin-left: 4px; }
/* /Pages/Reports/CustomReportViewer.razor.rz.scp.css */
/* Plain selectors, not ::deep -- this page's top-level elements are siblings with no wrapping
   same-scoped ancestor, so ::deep rules could never match here. */

.cr-results[b-6tw3scv9wh] {
    max-height: 68vh;
    overflow: auto;
}

.cr-results table[b-6tw3scv9wh] {
    font-size: 0.85rem;
}

.cr-results thead th[b-6tw3scv9wh] {
    position: sticky;
    top: 0;
    background-color: #E6E6E6;
    font-weight: 600;
    z-index: 1;
}

.cr-share[b-6tw3scv9wh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cr-share-opt[b-6tw3scv9wh] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    cursor: pointer;
}

.cr-share-opt:hover[b-6tw3scv9wh] { border-color: rgb(8, 98, 155); }

.cr-share-opt span[b-6tw3scv9wh] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cr-share-opt small[b-6tw3scv9wh] { color: #6c757d; }

/*  Capped and scrolling: this is every member of staff, which runs to dozens. Letting it grow
    would push Apply off the bottom of the popup. */
.cr-share-people[b-6tw3scv9wh] {
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cr-share-person[b-6tw3scv9wh] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
/* /Pages/Reports/DailyStockReconciliation.razor.rz.scp.css */
/* Plain selectors, no ::deep -- top-level siblings with no wrapping ancestor. */

.rec-summary[b-ahn0mavzbj] {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 14px 18px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 11px;
}

.rec-stat b[b-ahn0mavzbj] {
    display: block;
    font-size: 20px;
    letter-spacing: -.02em;
    color: #1f2933;
}

.rec-lab[b-ahn0mavzbj] {
    display: block;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8494a2;
    margin-bottom: 2px;
}

/* Only the two figures that mean "look at this" get colour, so colour keeps meaning something. */
.rec-flag b[b-ahn0mavzbj] { color: #b02a37; }

.rec-warning[b-ahn0mavzbj], .rec-clean[b-ahn0mavzbj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 15px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.rec-warning[b-ahn0mavzbj] { background: #fdf3e6; color: #8a5a18; }
.rec-clean[b-ahn0mavzbj] { background: #e6f8ec; color: #137a34; }

    .rec-warning i[b-ahn0mavzbj], .rec-clean i[b-ahn0mavzbj] { font-size: 15px; margin-top: 1px; }
/* /Pages/Reports/EditOnlineOrder.razor.rz.scp.css */
/* Plain (non-::deep) selectors, deliberately -- this page has no single wrapping ancestor <div>
   around its top-level markup (HeadeBar/po-section/banner/toolbar are direct siblings), so a
   ::deep rule here would never match (see CreateQuote.razor.css's own documented lesson on this
   exact mistake). Duplicated from POEdit.razor.css's .po-section/.po-field/.po-toolbar/.po-totals
   block since CSS isolation doesn't share rules between components even with matching class names. */

.po-toolbar[b-grjccg37hy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #f7f8f9;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

.po-section[b-grjccg37hy] {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

.po-section-title[b-grjccg37hy] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 12px;
}

.po-field[b-grjccg37hy] {
    margin-bottom: 12px;
}

.po-field .form-label[b-grjccg37hy] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    display: block;
}

.po-totals[b-grjccg37hy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid #e6e6e6;
    max-width: 100%;
    box-sizing: border-box;
}

.po-totals-row[b-grjccg37hy] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    max-width: 100%;
}

.po-totals-label[b-grjccg37hy] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
}

.po-totals-value[b-grjccg37hy] {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 100px;
    text-align: right;
    word-break: break-word;
}

.oo-checkedout-banner[b-grjccg37hy] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eafaf0;
    border: 1px solid #b7e4c7;
    color: #146c43;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-weight: 600;
}

.oo-notes-list[b-grjccg37hy] {
    max-height: 260px;
    overflow-y: auto;
}

.oo-note-row[b-grjccg37hy] {
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
}

.oo-note-date[b-grjccg37hy] {
    font-size: .75rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.oo-note-text[b-grjccg37hy] {
    font-size: .9rem;
    white-space: pre-wrap;
}
/* /Pages/Reports/OnlineOrders.razor.rz.scp.css */
.oo-summary-strip[b-e9ck96ixow] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.oo-summary-card[b-e9ck96ixow] {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 130px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.oo-summary-warn[b-e9ck96ixow] {
    border-color: #f5c2c7;
}

.oo-summary-label[b-e9ck96ixow] {
    font-size: .75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

.oo-summary-value[b-e9ck96ixow] {
    font-size: 1.35rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}

.oo-summary-badges[b-e9ck96ixow] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.oo-badge[b-e9ck96ixow] {
    background: #eef4f9;
    color: rgb(8, 98, 155);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: .78rem;
    white-space: nowrap;
}

.oo-sync-strip[b-e9ck96ixow] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: .85rem;
    color: #495057;
}

.oo-sync-status i[b-e9ck96ixow] {
    color: rgb(8, 98, 155);
}

.oo-sync-error[b-e9ck96ixow] {
    color: #b02a37;
    cursor: help;
}

.oo-sync-error i[b-e9ck96ixow] {
    color: #b02a37;
}

.oo-sync-btn[b-e9ck96ixow] {
    margin-left: auto;
}

.oo-sync-spin[b-e9ck96ixow] {
    display: inline-block;
    animation: oo-spin-b-e9ck96ixow 1s linear infinite;
}

@keyframes oo-spin-b-e9ck96ixow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Pages/Reports/TimeVarianceReport.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this page's top-level markup is not wrapped in a single
   ancestor <div>, so ::deep rules would not reliably match (see the CreateQuote.razor.css lesson
   in CLAUDE.md). A plain HTML/CSS diverging bar per row -- deliberately not DxChart, see the
   page's own top-of-file comment and CLAUDE.md's DxChart gotcha. */

.variance-bar-track[b-8vnxk7yeiy] {
    position: relative;
    width: 120px;
    height: 10px;
    background: #f2f4f6;
    border-radius: 5px;
    margin-bottom: 3px;
}

.variance-bar-center[b-8vnxk7yeiy] {
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #adb5bd;
}

.variance-bar[b-8vnxk7yeiy] {
    position: absolute;
    top: 0;
    height: 10px;
    border-radius: 5px;
}

.variance-bar-late[b-8vnxk7yeiy] {
    background: #b02a37;
}

.variance-bar-early[b-8vnxk7yeiy] {
    background: var(--omx-accent-green);
}

.variance-bar-label[b-8vnxk7yeiy] {
    font-size: 11px;
    color: #6c757d;
}
/* /Pages/Reports/UnpricedStock.razor.rz.scp.css */
/* Plain selectors: this page's own top-level markup, no wrapping component to scope against. */

.unpriced-intro[b-cujl5ncmw3] { margin: 0 0 14px; }

.unpriced-intro p[b-cujl5ncmw3] {
    margin: 0;
    color: #5b6773;
    font-size: 13.5px;
    max-width: 78ch;
}

.unpriced-summary[b-cujl5ncmw3] { margin-top: 6px !important; color: #b02a37 !important; font-weight: 600; }

/* The price box and its save button sit on one line so a long list can be worked down without
   the eye or the hand travelling. */
.unpriced-set[b-cujl5ncmw3] { display: flex; gap: 8px; align-items: center; }
.unpriced-set > :first-child[b-cujl5ncmw3] { max-width: 110px; }
/* /Pages/Search/SearchResults.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this page's markup has no nested child components. Visual
   language matches Dashboard's ".dash-recent-*" list, duplicated here rather than shared since
   Blazor CSS isolation doesn't cascade between components (see CLAUDE.md's CreateQuote.razor.css
   lesson) -- class names are kept distinct ("sr-*") to avoid any confusion with Dashboard's own. */

.sr-shell[b-xtt3c9l99q] {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    padding-bottom: 24px;
}

.sr-header[b-xtt3c9l99q] {
    margin-bottom: 22px;
}

    .sr-header h1[b-xtt3c9l99q] {
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 14px;
        color: #1a1a1a;
    }

.sr-search[b-xtt3c9l99q] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 12px;
    padding: 6px 6px 6px 16px;
    max-width: 640px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

    .sr-search i[b-xtt3c9l99q] {
        color: #98a2b3;
        font-size: 15px;
    }

    .sr-search input[b-xtt3c9l99q] {
        flex: 1 1 auto;
        border: none;
        outline: none;
        font-size: 14px;
        padding: 10px 0;
        color: #1a1a1a;
        background: transparent;
    }

    .sr-search button[b-xtt3c9l99q] {
        border: none;
        background: rgb(8, 98, 155);
        color: #fff;
        font-weight: 600;
        font-size: 13px;
        padding: 10px 18px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color .15s ease;
    }

        .sr-search button:hover[b-xtt3c9l99q] {
            background: #06517f;
        }

.sr-category[b-xtt3c9l99q] {
    margin-bottom: 26px;
}

.sr-category-heading[b-xtt3c9l99q] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

    .sr-category-heading i[b-xtt3c9l99q] {
        color: rgb(8, 98, 155);
        font-size: 15px;
    }

    .sr-category-heading h2[b-xtt3c9l99q] {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        color: #1a1a1a;
    }

.sr-category-count[b-xtt3c9l99q] {
    font-size: 12px;
    color: #6c757d;
    background: #f1f3f5;
    border-radius: 10px;
    padding: 1px 8px;
}

.sr-result-list[b-xtt3c9l99q] {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    overflow: hidden;
}

.sr-result-row[b-xtt3c9l99q] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f4f6;
    cursor: pointer;
    transition: background-color .12s ease;
}

    .sr-result-row:last-child[b-xtt3c9l99q] {
        border-bottom: none;
    }

    .sr-result-row:hover[b-xtt3c9l99q] {
        background: #f7f9fb;
    }

.sr-result-icon[b-xtt3c9l99q] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
}

.sr-icon-blue[b-xtt3c9l99q] { background: #e5f0f7; color: rgb(8, 98, 155); }
.sr-icon-green[b-xtt3c9l99q] { background: #e3f9e8; color: #16c444; }
.sr-icon-purple[b-xtt3c9l99q] { background: #ede7f4; color: #5f368d; }

.sr-result-info[b-xtt3c9l99q] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.sr-result-title[b-xtt3c9l99q] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.sr-result-sub[b-xtt3c9l99q] {
    font-size: 12.5px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-result-chevron[b-xtt3c9l99q] {
    color: #c4ccd4;
    font-size: 13px;
}

.sr-empty[b-xtt3c9l99q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
}

    .sr-empty i[b-xtt3c9l99q] {
        font-size: 26px;
        color: #c4ccd4;
    }

.sr-spinner[b-xtt3c9l99q] {
    width: 15px;
    height: 15px;
    border: 2px solid #d3dfe8;
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: sr-spin-b-xtt3c9l99q .7s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes sr-spin-b-xtt3c9l99q {
    to { transform: rotate(360deg); }
}
/* /Pages/Setup/FirstRunSetup.razor.rz.scp.css */
/*
    First-run setup.

    Same palette as UserAuthentication.razor.css -- rgb(8,98,155) to #0a3f66, #16c444 for success --
    because this page and the sign-in page are seen back to back and should read as one product.
    The rules are DUPLICATED rather than shared: CSS isolation does not cascade between components,
    so borrowing the .auth-* names would render this page with no styling at all.

    Single @keyframes, never @@keyframes. A .razor.css file is not Razor-templated, so @@ passes
    through as invalid CSS the browser silently discards -- that mistake sat in six files here and
    meant no spinner in this app ever animated.
*/

.setup-shell[b-tl49jrsvoe] {
    display: flex;
    min-height: 100vh;
    background: #f7f9fb;
    color: #1f2933;
}

/* ── brand panel ─────────────────────────────────────────────────────────────────────────── */

.setup-brand[b-tl49jrsvoe] {
    position: relative;
    flex: 0 0 42%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: linear-gradient(150deg, rgb(8, 98, 155) 0%, #0a3f66 65%, #062c48 100%);
    color: #fff;
}

.setup-blob[b-tl49jrsvoe] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .28;
    pointer-events: none;
}

.setup-blob-1[b-tl49jrsvoe] { width: 320px; height: 320px; top: -70px; right: -60px; background: #16c444; }
.setup-blob-2[b-tl49jrsvoe] { width: 380px; height: 380px; bottom: -120px; left: -90px; background: #3fa9f5; }

.setup-brand-content[b-tl49jrsvoe] { position: relative; z-index: 1; max-width: 380px; width: 100%; }

.setup-logo[b-tl49jrsvoe] { width: 300px; max-width: 100%; display: block; margin-bottom: 26px; }

.setup-tagline[b-tl49jrsvoe] {
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 30px;
}

/* the step rail -- structure that encodes real progress, not decoration */
.setup-steps[b-tl49jrsvoe] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.setup-steps li[b-tl49jrsvoe] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .55);
    transition: color .2s ease;
}

.setup-step-dot[b-tl49jrsvoe] {
    flex: 0 0 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    transition: background-color .2s ease, border-color .2s ease;
}

.setup-steps li.setup-step-on[b-tl49jrsvoe]   { color: #fff; font-weight: 600; }
.setup-step-on .setup-step-dot[b-tl49jrsvoe]  { background: #fff; color: rgb(8, 98, 155); border-color: #fff; }

.setup-steps li.setup-step-done[b-tl49jrsvoe]  { color: rgba(255, 255, 255, .8); }
.setup-step-done .setup-step-dot[b-tl49jrsvoe] { background: #16c444; border-color: #16c444; color: #fff; }

.setup-dbname[b-tl49jrsvoe] {
    margin: 30px 0 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .02em;
}

/* ── form panel ──────────────────────────────────────────────────────────────────────────── */

.setup-panel[b-tl49jrsvoe] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

.setup-panel-wrap[b-tl49jrsvoe] { width: 100%; max-width: 460px; }

.setup-mark[b-tl49jrsvoe] { display: none; margin-bottom: 22px; }
.setup-mark img[b-tl49jrsvoe] { width: 190px; }

.setup-heading[b-tl49jrsvoe] { font-size: 1.55rem; font-weight: 700; margin: 0 0 6px; color: #14202b; }
.setup-sub[b-tl49jrsvoe]     { font-size: .92rem; color: #5b6b7a; margin: 0 0 24px; line-height: 1.5; }

.setup-field[b-tl49jrsvoe] { margin-bottom: 16px; min-width: 0; }

.setup-row[b-tl49jrsvoe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 14px;
}

.setup-label[b-tl49jrsvoe] {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #3c4a57;
    margin-bottom: 6px;
}

.setup-input[b-tl49jrsvoe] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    font-size: .95rem;
    color: #1f2933;
    border: 1px solid #d5dde5;
    border-radius: 10px;
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.setup-input:focus[b-tl49jrsvoe] {
    border-color: rgb(8, 98, 155);
    box-shadow: 0 0 0 3px rgba(8, 98, 155, 0.12);
}

.setup-hint[b-tl49jrsvoe] { font-size: .78rem; color: #7b8a99; margin: 6px 0 0; line-height: 1.45; }

.setup-pwd[b-tl49jrsvoe] { position: relative; }
.setup-pwd .setup-input[b-tl49jrsvoe] { padding-right: 42px; }

.setup-pwd-toggle[b-tl49jrsvoe] {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #8a99a8;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
}

.setup-pwd-toggle:hover[b-tl49jrsvoe] { color: rgb(8, 98, 155); }

/* ── messages ────────────────────────────────────────────────────────────────────────────── */

.setup-error[b-tl49jrsvoe], .setup-warn[b-tl49jrsvoe] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.45;
    margin: 4px 0 16px;
}

.setup-error[b-tl49jrsvoe] { background: #fdecea; color: #a4252b; border: 1px solid #f3c9c6; }
.setup-warn[b-tl49jrsvoe]  { background: #fff6e5; color: #8a5a00; border: 1px solid #f1dcb0; }

/* ── summary ─────────────────────────────────────────────────────────────────────────────── */

.setup-summary[b-tl49jrsvoe] {
    margin: 22px 0 18px;
    padding: 16px 18px;
    border: 1px solid #e2e9f0;
    border-radius: 10px;
    background: #fbfcfe;
}

.setup-summary h2[b-tl49jrsvoe] { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: #7b8a99; margin: 0 0 12px; font-weight: 600; }

.setup-summary dl[b-tl49jrsvoe] { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; font-size: .88rem; }
.setup-summary dt[b-tl49jrsvoe] { color: #6b7a89; }
.setup-summary dd[b-tl49jrsvoe] { margin: 0; color: #1f2933; font-weight: 500; overflow-wrap: anywhere; }

/* ── actions ─────────────────────────────────────────────────────────────────────────────── */

.setup-actions[b-tl49jrsvoe] { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

.setup-submit[b-tl49jrsvoe] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    background: rgb(8, 98, 155);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(8, 98, 155, 0.25);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.setup-submit:hover:not(:disabled)[b-tl49jrsvoe] {
    background: #06517f;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(8, 98, 155, 0.32);
}

.setup-submit:disabled[b-tl49jrsvoe] { opacity: .65; cursor: default; box-shadow: none; }

.setup-back[b-tl49jrsvoe] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border: 1px solid #d5dde5;
    border-radius: 10px;
    background: #fff;
    color: #4a5b6b;
    font-size: .9rem;
    cursor: pointer;
}

.setup-back:hover:not(:disabled)[b-tl49jrsvoe] { border-color: #b9c6d2; color: #1f2933; }

/* ── done ────────────────────────────────────────────────────────────────────────────────── */

.setup-done-mark[b-tl49jrsvoe] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e7f8ed;
    color: #16c444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 18px;
}

.setup-footnote[b-tl49jrsvoe] { font-size: .8rem; color: #7b8a99; margin: 18px 0 0; line-height: 1.5; }

/* ── loading ─────────────────────────────────────────────────────────────────────────────── */

.setup-centred[b-tl49jrsvoe] { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; }
.setup-muted[b-tl49jrsvoe]   { font-size: .9rem; color: #7b8a99; margin: 0; }

.setup-spinner[b-tl49jrsvoe] {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(8, 98, 155, .2);
    border-top-color: rgb(8, 98, 155);
    border-radius: 50%;
    animation: setup-spin-b-tl49jrsvoe .7s linear infinite;
}

.setup-spinner-sm[b-tl49jrsvoe] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #fff;
}

@keyframes setup-spin-b-tl49jrsvoe { to { transform: rotate(360deg); } }

/* ── narrow ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .setup-brand[b-tl49jrsvoe] { display: none; }
    .setup-mark[b-tl49jrsvoe]  { display: block; }
    .setup-panel[b-tl49jrsvoe] { padding: 32px 20px; background: #fff; }
    .setup-shell[b-tl49jrsvoe] { background: #fff; }
}
/* /Pages/Tasks/MyTasks.razor.rz.scp.css */
/*  Plain selectors, no ::deep -- this page's markup is its own, so Blazor scopes it correctly. */

/*  A LIST, not a grid of cards.

    A task carries a name, a place, a percentage and a status. That is a row. As cards they were
    four boxes read left to right and then wrapped, each with a heading, three lines of meta and
    its own "open" affordance -- a lot of chrome for a screen whose entire job is answering "what
    am I meant to be doing". */
.task-list[b-oefzjvpzk1] {
    display: flex;
    flex-direction: column;
    margin: 14px 0 30px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
    overflow: hidden;
}

/*  The whole row is the link. A counter opening this on a phone in an aisle should not be aiming
    at a few words. */
.task-row[b-oefzjvpzk1] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 13px 18px;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid #eef2f6;
    transition: background-color .12s ease;
}

    .task-row:first-child[b-oefzjvpzk1] {
        border-top: none;
    }

    .task-row:hover[b-oefzjvpzk1],
    .task-row:focus-visible[b-oefzjvpzk1] {
        background: #f6f9fc;
    }

/*  min-width: 0 or a long department name refuses to shrink and pushes the progress and status off
    the right-hand end -- a flex child defaults to min-width: auto. */
.task-row-main[b-oefzjvpzk1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.task-row-name[b-oefzjvpzk1] {
    font-size: 14.5px;
    font-weight: 600;
    color: #0d3350;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-row-where[b-oefzjvpzk1] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7684;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-row-progress[b-oefzjvpzk1] {
    display: flex;
    flex-direction: column;
    flex: 0 0 170px;
    width: 170px;
}

.task-row-track[b-oefzjvpzk1] {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #e9eef3;
    overflow: hidden;
}

.task-row-bar[b-oefzjvpzk1] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--omx-primary, rgb(8, 98, 155));
}

.task-row-count[b-oefzjvpzk1] {
    margin-top: 4px;
    font-size: 11.5px;
    color: #6b7684;
    /*  So the figures line up down the column instead of shifting as they tick up. */
    font-variant-numeric: tabular-nums;
}

/*  The status, on the end of the where-line rather than on the row's edge.

    Italic and bracketed makes it read as an aside about the task, which is what it is -- where a
    filled pill on the right read as a fourth column and pulled the eye away from the progress
    figures beside it. Inherits the muted colour of its line by default, so only the one state
    worth acting on is coloured.  */
.task-row-state[b-oefzjvpzk1] {
    font-style: italic;
    /*  The gap belongs here rather than as a space in the markup: Razor collapses a literal one,
        which rendered as "TRAINING(In progress)", and a non-breaking space would be a gap that
        cannot break if the line ever has to wrap.  */
    margin-left: 5px;
}

/*  The one state somebody has to do something about. Colouring the ordinary two as well would
    spend the signal on every row and leave this one no louder than the rest.  */
.task-row-state-wait[b-oefzjvpzk1] {
    color: #8a5a12;
    font-style: italic;
    font-weight: 600;
}

.task-row-go[b-oefzjvpzk1] {
    flex: 0 0 auto;
    color: #9fb2c2;
    font-size: 13px;
}

/* ===== Nothing assigned ===== */
.tasks-empty[b-oefzjvpzk1] {
    background: #fff;
    border: 1px dashed #d7e0e8;
    border-radius: 14px;
}

    .tasks-empty h5[b-oefzjvpzk1] {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 700;
        color: #0d3350;
    }

    .tasks-empty i[b-oefzjvpzk1] {
        margin-right: 8px;
        color: var(--omx-accent-green, #16c444);
    }

/*  Below this the row stops being one line and stacks: 170px of progress bar plus a status badge
    leaves a phone no room for the department name, which is the thing being scanned for. */
@media (max-width: 720px) {
    .task-row[b-oefzjvpzk1] {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .task-row-main[b-oefzjvpzk1] {
        flex: 1 1 100%;
    }

    .task-row-progress[b-oefzjvpzk1] {
        flex: 1 1 auto;
        width: auto;
    }
}
/* /Pages/UserAuthentication.razor.rz.scp.css */
/* Deliberately plain selectors (no ::deep) -- every element here is this page's own direct
   markup, not nested inside a child component, so ::deep would compile to an unreachable
   ancestor-scoped selector (see CLAUDE.md's CreateQuote.razor.css lesson). */

.auth-shell[b-epty4zq56a] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    overflow: hidden;
}

/* ===== Brand panel (left) ===== */

.auth-brand[b-epty4zq56a] {
    position: relative;
    flex: 0 0 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, rgb(8, 98, 155) 0%, #0a3f66 65%, #062c48 100%);
    color: #fff;
    padding: 48px;
    overflow: hidden;
}

.auth-brand-blob[b-epty4zq56a] {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.16;
    background: #16c444;
    pointer-events: none;
}

.auth-brand-blob-1[b-epty4zq56a] {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -160px;
}

.auth-brand-blob-2[b-epty4zq56a] {
    width: 320px;
    height: 320px;
    bottom: -120px;
    left: -100px;
    background: #ffffff;
    opacity: 0.08;
}

.auth-brand-content[b-epty4zq56a] {
    position: relative;
    z-index: 1;
    max-width: 380px;
}

.auth-logo[b-epty4zq56a] {
    display: block;
    /* The source PNG has generous transparent padding baked in around the mark itself, so the
       container is sized wider than the visible glyphs need to read at a reasonable size. */
    width: 340px;
    max-width: 100%;
    height: auto;
    margin: -20px 0 8px -14px;
}

.auth-brand-tagline[b-epty4zq56a] {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0 0 40px;
}

.auth-brand-features[b-epty4zq56a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .auth-brand-features li[b-epty4zq56a] {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 15px;
        opacity: 0.92;
    }

    .auth-brand-features i[b-epty4zq56a] {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

/* ===== Form panel (right) ===== */

.auth-form-panel[b-epty4zq56a] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fb;
    padding: 32px;
}

.auth-form-wrap[b-epty4zq56a] {
    width: 100%;
    max-width: 380px;
}

.auth-form-mark[b-epty4zq56a] {
    display: none;
    margin-bottom: 28px;
}

    .auth-form-mark img[b-epty4zq56a] {
        height: 36px;
        width: auto;
    }

.auth-heading[b-epty4zq56a] {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.auth-subheading[b-epty4zq56a] {
    font-size: 14px;
    color: #6c757d;
    margin: 0 0 28px;
}

.auth-label[b-epty4zq56a] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 6px;
}

.auth-input-group[b-epty4zq56a] {
    position: relative;
    margin-bottom: 18px;
}

.auth-input-icon[b-epty4zq56a] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 15px;
    pointer-events: none;
}

.auth-input[b-epty4zq56a] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 12px 42px;
    border-radius: 10px;
    border: 1px solid #dde3ea;
    background: #fff;
    font-size: 14px;
    color: #1a1a1a;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .auth-input[b-epty4zq56a]::placeholder {
        color: #adb5bd;
    }

    .auth-input:focus[b-epty4zq56a] {
        outline: none;
        border-color: rgb(8, 98, 155);
        box-shadow: 0 0 0 3px rgba(8, 98, 155, 0.12);
    }

.auth-pwd-toggle[b-epty4zq56a] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #98a2b3;
    font-size: 15px;
    padding: 6px;
    cursor: pointer;
    line-height: 1;
}

    .auth-pwd-toggle:hover[b-epty4zq56a] {
        color: rgb(8, 98, 155);
    }

.auth-error[b-epty4zq56a] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fdecea;
    color: #b02a37;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 18px;
}

    .auth-error i[b-epty4zq56a] {
        margin-top: 1px;
    }

.auth-info[b-epty4zq56a] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #e5f0f7;
    color: rgb(8, 98, 155);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 18px;
}

    .auth-info i[b-epty4zq56a] {
        margin-top: 1px;
    }

.auth-submit[b-epty4zq56a] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: rgb(8, 98, 155);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(8, 98, 155, 0.25);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .auth-submit:hover:not(:disabled)[b-epty4zq56a] {
        background: #06517f;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(8, 98, 155, 0.32);
    }

    .auth-submit:disabled[b-epty4zq56a] {
        opacity: 0.75;
        cursor: default;
    }

.auth-spinner[b-epty4zq56a] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin-b-epty4zq56a .7s linear infinite;
}

@keyframes auth-spin-b-epty4zq56a {
    to { transform: rotate(360deg); }
}

.auth-footer[b-epty4zq56a] {
    text-align: center;
    font-size: 12px;
    color: #adb5bd;
    margin-top: 28px;
}

/* ===== Responsive: collapse the brand panel below tablet width ===== */

@media (max-width: 900px) {
    .auth-brand[b-epty4zq56a] {
        display: none;
    }

    .auth-form-mark[b-epty4zq56a] {
        display: flex;
    }

    .auth-form-panel[b-epty4zq56a] {
        background: #fff;
    }
}
/* /Shared/Header.razor.rz.scp.css */
/* Plain selectors (no ::deep) -- this rule targets Header.razor's own direct markup. Pre-existing
   .omx-topbar/.topBanners/.CompanyTitle rules stay in the shared app.css untouched; only the new
   search column gets its own scoped stylesheet. */

.omx-topbar-search-col[b-txsjtb8i5s] {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .omx-topbar-search-col[b-txsjtb8i5s] {
        display: none;
    }
}

/* =====================================================================================
   TOPBAR USER BADGE
   Round initials avatar in place of the plain "SYSTEM ADMIN" text link, matching the
   customer avatar on the POS split register (.pos-cart-avatar) so the same "who is this"
   affordance looks the same everywhere in the app.

   Colours are INVERTED against that one, deliberately: .pos-cart-avatar is blue-on-white
   because it sits on a white cart pane, but the topbar is itself the brand blue since the
   colour overhaul, so a blue badge there would disappear into its own background. White
   circle, blue initials.
   ===================================================================================== */

.omx-user-trigger[b-txsjtb8i5s] {
    /* INLINE-flex, not flex. .login-user (global app.css) declares display:flex, which makes
       the anchor a BLOCK-level flex container -- it then fills the whole col-md-3, stranding
       the badge at the far left of the topbar and stretching the control across it. Sizing to
       content instead lets .pull-right's text-align:right put it back on the right where it
       belongs, and keeps it only as wide as the badge plus the name.

       justify-content is also overridden: .login-user sets space-between, which would push
       the name away from its own badge to opposite ends of whatever width it had. Both are
       overridden here rather than edited globally, since .login-user still styles the
       unauthenticated "Login" link. */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border-radius: 99px;
    text-decoration: none;
    transition: background-color .15s;
}

    .omx-user-trigger:hover[b-txsjtb8i5s] {
        background: rgba(255, 255, 255, .14);
    }

.omx-user-badge[b-txsjtb8i5s] {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    color: rgb(8, 98, 155);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .02em;
    line-height: 1;
    /* The circle must stay a circle regardless of how long the initials are. */
    overflow: hidden;
}

.omx-user-name[b-txsjtb8i5s] {
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On a narrow topbar the badge alone carries it -- the full name is still the title
   attribute, and the dropdown itself names the account. */
@media (max-width: 1100px) {
    .omx-user-name[b-txsjtb8i5s] {
        display: none;
    }
}

/* =====================================================================================
   TOPBAR USER MENU

   Built to match LocationSwitcher, which sits a few pixels away in the same topbar: same
   pill trigger, same dropped panel, same icon-and-label rows, same click-to-open with a
   backdrop. Two menus in one bar behaving and looking like two different controls is the
   sort of thing a person notices without being able to say why.

   Duplicated rather than shared. Blazor CSS isolation does not cascade between components,
   so a rule in LocationSwitcher.razor.css carries THAT component's scope attribute and can
   never match anything rendered here, however identical the class names look.
   ===================================================================================== */

.usrmenu[b-txsjtb8i5s] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/*  Sizes to its content so .pull-right can place it, rather than filling the whole column and
    stranding the badge at the far left of the topbar. */
.usrmenu-trigger[b-txsjtb8i5s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 99px;
    padding: 3px 12px 3px 3px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s;
}

    .usrmenu-trigger:hover[b-txsjtb8i5s] {
        background: rgba(255, 255, 255, .26);
    }

/*  Signed out there is no avatar to inset for, so the padding evens up. */
.usrmenu-trigger-plain[b-txsjtb8i5s] {
    padding: 6px 14px;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
}

.usrmenu-caret[b-txsjtb8i5s] {
    font-size: 9px;
    opacity: .8;
}

/*  Catches a click anywhere else. Covers the viewport but paints nothing, so the page underneath
    looks untouched while the menu is open. */
.usrmenu-backdrop[b-txsjtb8i5s] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.usrmenu-menu[b-txsjtb8i5s] {
    position: absolute;
    top: calc(100% + 8px);
    /*  Right-aligned, unlike the location switcher: this sits at the end of the topbar, so a
        left-aligned panel would hang off the edge of the window. */
    right: 0;
    z-index: 1041;
    min-width: 240px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: 6px;
    overflow: hidden;
    text-align: left;
}

/*  No caps label above this. The name reads as a name and the location reads as a location --
    a "SIGNED IN AS" heading was telling the reader what they could already see. */
.usrmenu-who[b-txsjtb8i5s] {
    padding: 10px 12px 8px;
}

/*  The location leads, so it takes the small label slot the removed caps heading used to hold --
    it names where the session is pointed, which is what changes during a day. */
.usrmenu-who-loc[b-txsjtb8i5s] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--omx-primary, rgb(8, 98, 155));
}

.usrmenu-who-name[b-txsjtb8i5s] {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2933;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usrmenu-rule[b-txsjtb8i5s] {
    height: 1px;
    margin: 4px 8px;
    background: #eef2f6;
}

.usrmenu-item[b-txsjtb8i5s] {
    display: flex;
    align-items: center;
    /*  Explicit, because a BUTTON is not an ordinary flex container: browsers centre a button's
        content in their own stylesheet, which survives display:flex and text-align:left and left
        every row sitting in the middle of the panel. */
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2933;
    cursor: pointer;
}

    .usrmenu-item:hover[b-txsjtb8i5s] {
        background: #eef5fb;
    }

    .usrmenu-item i[b-txsjtb8i5s] {
        color: rgb(8, 98, 155);
        font-size: 14px;
    }

/*  The one item that ends what you were doing, set apart from the three that just navigate. */
.usrmenu-item-out[b-txsjtb8i5s] {
    color: #b02a37;
}

    .usrmenu-item-out i[b-txsjtb8i5s] {
        color: #b02a37;
    }

    .usrmenu-item-out:hover[b-txsjtb8i5s] {
        background: #fdecee;
    }
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-0xvbq61j3v] {
    height: 100%;
    overflow: hidden;
    background-color: inherit;
}
[b-0xvbq61j3v] .page-layout,
[b-0xvbq61j3v] .page-layout > .dx-gridlayout-root,
[b-0xvbq61j3v] .layout-item {
    background-color: inherit;
}

[b-0xvbq61j3v] .content {
    padding: 1.1rem 2rem 0 2rem;
    overflow: auto;
}

@media (max-width: 1199.98px) {
    [b-0xvbq61j3v] .page-layout > .dx-gridlayout-root {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

[b-0xvbq61j3v] .fit-width {
    max-width: 100%;
}

[b-0xvbq61j3v] .mw-1100 {
    max-width: 1100px;
}

/*Omax settings override*/


/* /Shared/NavMenu.razor.rz.scp.css */
.sidebar[b-drisd9cwj3] {
    min-width: 300px;
    max-width: 300px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background-color: inherit;
}

.sidebar.collapse[b-drisd9cwj3] {
    display: none;
}

.sidebar.expand[b-drisd9cwj3] {
    display: block;
}

@media (max-width: 1199.98px) {
    .sidebar[b-drisd9cwj3] {
        display: none;
    }

    .sidebar.expand[b-drisd9cwj3] {
        position: fixed;
        top: 3.5rem;
        left: 0;
        height: auto;
        min-width: 100%;
        z-index: 1050;
    }
}

[b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item:first-of-type {
    padding-top: 1rem;
}

[b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item:last-of-type {
    padding-bottom: 1rem;
}

[b-drisd9cwj3] .app-sidebar .nav-pills > .nav-item a {
    border-radius: 0px;
    display: flex;
    align-items: center;
}

[b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item > a {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: .25rem 1rem .25rem .125rem;
}
[b-drisd9cwj3] .app-sidebar,
[b-drisd9cwj3] .app-sidebar > .nav-pills,
[b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item,
[b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item > a:not(.active) {
    background-color: inherit;
}

@media (max-width: 1199.98px) {
    [b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item:last-of-type {
        padding-bottom: 0;
    }
}
/* /Shared/OmxLoader.razor.rz.scp.css */
/* Fullscreen overlay */
.omx-loader-overlay[b-bxcczt2wjs] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5000;
}

/* Centered loader (non-blocking, just a floating spinner box) */
.omx-loader-centered[b-bxcczt2wjs] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5000;
}

/* Spinner */
.omx-spinner[b-bxcczt2wjs] {
    border: 4px solid rgba(255,255,255,0.2);
    border-top: 4px solid #5f368d;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin-b-bxcczt2wjs 1s linear infinite;
}

.omx-loading-text[b-bxcczt2wjs] {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

.omx-loader-centered .omx-loading-text[b-bxcczt2wjs] {
    color: #333; /* darker for white background */
}

@keyframes spin-b-bxcczt2wjs {
    to {
        transform: rotate(360deg);
    }
}
/* /Shared/Toast.razor.rz.scp.css */
/* Container—bottom-right */
.omx-toast-container[b-rdf5axkfis] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column-reverse; /* newest toast at bottom */
    gap: 0.5rem;
    z-index: 4000;
}

/* Toast card */
.omx-toast[b-rdf5axkfis] {
    position: relative;
    /* Everything inside is measured against the card's own width rather than
       overflowing it. Without this a flex or grid child sizes to its content. */
    box-sizing: border-box;
    background-color: #fdfdfd;
    color: #38393d;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 0.7rem; /* extra space for progress bar */
    overflow: hidden;
    min-height:90px;
    min-width: 280px;
    max-width: 360px;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.icon-color[b-rdf5axkfis] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.omx-toast-success[b-rdf5axkfis] {
    background: #28a745;
}

.omx-toast-warning[b-rdf5axkfis] {
    background: #ffc107;
    color: #000;
}
/* black text works better on yellow */
.omx-toast-error[b-rdf5axkfis] {
    background: #dc3545;
}

.omx-toast-info[b-rdf5axkfis] {
    background: #007bff;
}

/* Slide-in from bottom */
@keyframes omx-slideInUp-b-rdf5axkfis {
    from {
        opacity: 0;
        transform: translateY(50%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.omx-toast-animate-in[b-rdf5axkfis] {
    animation: omx-slideInUp-b-rdf5axkfis 0.4s forwards;
}

/* Fade-out downward */
@keyframes omx-fadeOutDown-b-rdf5axkfis {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(50%);
    }
}

.omx-toast-animate-out[b-rdf5axkfis] {
    animation: omx-fadeOutDown-b-rdf5axkfis 0.35s forwards;
}

/* Header: icon + title */
.omx-toast-header[b-rdf5axkfis] {
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.omx-toast-icon[b-rdf5axkfis] {
    margin-right: 0.5rem;
    font-size: 0.7rem;
}

/*
    Header: dot, title, close button on one line.

    min-width: 0 on the title is load-bearing. A flex child defaults to
    min-width: auto, which refuses to shrink below its content -- so a long
    title pushed the close button off the card instead of ellipsing.
*/
.omx-toast-head[b-rdf5axkfis] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.omx-toast-head .toast-title[b-rdf5axkfis] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omx-toast-close[b-rdf5axkfis] {
    flex: 0 0 auto;
    margin-left: auto;
}

/*
    Message body.

    Indented to line up under the title rather than under the status dot, using
    padding on the body itself -- the old rule used margin-left with !important
    while app.css set margin on all four sides with !important too, and which of
    the two won depended on the order they happened to land in the bundle.
*/
.omx-toast-body[b-rdf5axkfis] {
    margin: 6px 0 0 0 !important;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #70757a !important;
    /* Long unbroken text -- an exception message, a URL, a batch number -- has
       somewhere to break rather than running past the edge. */
    overflow-wrap: anywhere;
}

/* Soft divider line (optional) */
.omx-toast-divider[b-rdf5axkfis] {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0.5rem 0;
}

/* Progress bar with subtle shrink animation */
.omx-toast-progress[b-rdf5axkfis] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.8);
    width: 100%;
    animation-timing-function: linear;
}

/* Base style for all toast level indicators */
.omx-toast-success[b-rdf5axkfis],
.omx-toast-warning[b-rdf5axkfis],
.omx-toast-error[b-rdf5axkfis],
.omx-toast-info[b-rdf5axkfis] {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 0.5rem; /* space before text */
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

/* Success: green */
.omx-toast-success[b-rdf5axkfis] {
    background: linear-gradient(135deg, #28a745, #3ddc84);
}

/* Warning: amber/yellow */
.omx-toast-warning[b-rdf5axkfis] {
    background: linear-gradient(135deg, #ffc107, #ffdb6e);
}

/* Error: red */
.omx-toast-error[b-rdf5axkfis] {
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

/* Info: blue */
.omx-toast-info[b-rdf5axkfis] {
    background: linear-gradient(135deg, #007bff, #4dabf7);
}


@keyframes omx-progressShrink-b-rdf5axkfis {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.toast-title[b-rdf5axkfis]{
    font-weight:bold;
}

.sm[b-rdf5axkfis]{
    width:5px!important;
    height:5px!important;
    color:#ff0000!important;

}