/* Shared Landed fragments (LogisticsPills.razor): status pill, vs. cancel date, X-Factory countdown.
   Global because the fragments render inside several pages, drawers and grids. */
.lg-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 4px;
}
.lg-pill--bad { background: #f9dede; color: #b03030; }
.lg-pill--warn { background: #fbefd2; color: #9a6a12; }
.lg-pill--ok { background: #ddf1e4; color: #1e7a4b; }
.lg-pill--none { background: #e8ecf1; color: #5b6470; }
/* Neutral-but-notable states (Invoices: an email delivery method; EDI). Not a status, so neither ok nor warn. */
.lg-pill--acc { background: #dfe9f8; color: #1d5c9e; }
.lg-pill--edi { background: #eadff7; color: #5b2e9a; }

.lg-slack { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.lg-slack--bad { color: #b03030; }
.lg-slack--warn { color: #9a6a12; }
.lg-slack--ok { color: #1e7a4b; }
.lg-slack--none { color: #9aa4b1; }

.lg-cd {
    display: inline-block;
    border-radius: 999px;
    padding: 0 7px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
}
.lg-cd--ok { background: #d9f0e2; color: #14683b; }
.lg-cd--warn { background: #fdf0c8; color: #8a6a00; }
.lg-cd--hot { background: #fbdcdc; color: #a52323; }
.lg-cd--overdue { background: #a52323; color: #fff; }
.lg-cd--done { background: #eef0f3; color: #5b6470; }
.lg-cd--none { background: #eef0f3; color: #9aa4b1; }
.lg-cd--sailed { background: #e3edf8; color: #2563b0; }

/* Estimated arrival: date over its source line. An estimate with nothing shipped yet is muted and italic. */
.lg-arr { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-arr--est { font-style: italic; color: #6b7889; }
.lg-arr-src { display: block; font-size: 0.68rem; color: #6b7889; line-height: 1.2; margin-top: 1px; white-space: normal; }

/* Factory status pill: same palette as the Orders page so the two read as one thing. */
.lg-fs { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.lg-fs--ok { background: #d9f0e2; color: #14683b; }
.lg-fs--warn { background: #fdf0c8; color: #8a6a00; }
.lg-fs--ready { background: #e3edf8; color: #2563b0; }
.lg-fs--wait { background: #ece6f8; color: #5b3fa3; }
.lg-fs--partial { background: #d5eef0; color: #0f6b73; }
.lg-fs--shipped { background: #1e3a5f; color: #fff; }
.lg-fs--none { background: #eef0f3; color: #5b6470; font-weight: 500; }
.lg-fs--dash { color: #9aa4b1; font-weight: 400; }
.lg-fs--stale { opacity: 0.65; outline: 1px dashed currentColor; outline-offset: -1px; }

/* Country flag beside a location group name (CountryFlag.razor). */
.lg-flag { width: 18px; height: 12.6px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); vertical-align: -2px; margin-right: 5px; flex: none; }

/* ── Consolidated 2026-09-23: these were copied into every Logistics page and drawer under its own
   prefix (ov-, ci-, lgd-, sd-, imp-). One copy here; page chrome is in r2-pages.css. ── */

/* Customer notified: "2 / 5", "all notified", "Not Notified". */
.lg-told {
    display: inline-block;
    border-radius: 4px;
    padding: 0 7px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lg-told--ok { background: #ddf1e4; color: #1e7a4b; }
.lg-told--bad { background: #f9dede; color: #b03030; }
.lg-told--stale { background: #fbefd2; color: #9a6a12; }
.lg-told--none { background: #eef0f3; color: #6b7889; }

/* Evidence chip: what the estimate is based on. The dot (<i>) is optional. */
.lg-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.lg-ev {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #dce3eb;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.7rem;
    color: #3c4a5e;
    background: #fff;
    white-space: nowrap;
    line-height: 1.6;
    vertical-align: middle;
}
.lg-ev i { width: 6px; height: 6px; border-radius: 50%; background: #6b7889; display: inline-block; }
.lg-ev--ok { color: #1e7a4b; border-color: #b3dcc2; }
.lg-ev--ok i { background: #1e7a4b; }
.lg-ev--warn { color: #9a6a12; border-color: #ead9a4; background: #fffaf0; }
.lg-ev--warn i { background: #9a6a12; }
.lg-ev--acc { color: #1d5c9e; border-color: #9fc3ea; }
.lg-ev--acc i { background: #1d5c9e; }
.lg-ev--wait { color: #5b3fa3; border-color: #cbbdf0; background: #f4f0fb; }
.lg-ev--wait i { background: #6d4fc2; }
.lg-ev--stale { color: #9a6a12; border-style: dashed; }
.lg-ev--stale i { background: #9a6a12; }
.lg-ev--miss { color: #6b7889; border-style: dashed; }
.lg-ev--miss i { background: #c9d2dc; }

/* Status stripe down the left edge of a grid cell (the cell needs position: relative). */
.lg-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.lg-stripe--bad { background: #b03030; }
.lg-stripe--warn { background: #9a6a12; }
.lg-stripe--ok { background: #1e7a4b; }
.lg-stripe--none { background: #c9d2dc; }

/* "!" beside a value with a data problem; the reason is in its title. */
.lg-warn-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fbefd2;
    color: #9a6a12;
    font-size: 0.68rem;
    font-weight: 800;
    margin-left: 5px;
    cursor: help;
}

/* "+3" likely (unmapped) matches. */
.lg-likely {
    display: inline-block;
    margin-left: 5px;
    padding: 0 6px;
    border: 1.5px dashed #1d5c9e;
    border-radius: 999px;
    color: #1d5c9e;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
}

/* A small count box ("SO's" column). */
.lg-count {
    display: inline-block;
    min-width: 1.6em;
    text-align: center;
    font-weight: 700;
    background: #eef0f3;
    color: #3c4a5e;
    border-radius: 4px;
    padding: 0 6px;
}

/* Location group with its flag; a date with its pill beside it. */
.lg-lg { display: inline-flex; align-items: center; white-space: nowrap; }
.lg-dt { font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 6px; }