/* =============================================================================
   Relite Logistics — Design System : GLOBAL STATUS PALETTE
   =============================================================================
   The colour half of the global status dictionary. Relite.Logistics.Core/Common/
   ShipmentStatusPalette.cs owns status -> class; this file owns class -> colour.
   Both halves are required for a status to look the same everywhere, and splitting
   them this way means re-colouring a status never touches C#.

   Never hard-code a status colour at a call site again. Ask the palette:
       <span class="ds-status @ShipmentStatusPalette.CssClass(item.Status)">@item.Status</span>
   In JS, look the class up from the same map (ShipmentStatusPalette.CssClassMapJson()).

   -----------------------------------------------------------------------------
   Semantic, NOT theme-following
   -----------------------------------------------------------------------------
   These deliberately do not read --ds-accent. The Admin theme picker recolours the
   chrome and the decorative tiles; a status must NOT move with it. "Delivered" has to
   be the same green on the crimson Member panel and the navy DirectUser panel, or the
   colour stops carrying meaning. This is the "semantic colours stay fixed" half of the
   agreed tile palette decision.

   -----------------------------------------------------------------------------
   Why RTO is purple
   -----------------------------------------------------------------------------
   A return is neither success nor failure. Green says "good outcome", red says
   "something went wrong" — both mislead for "RTO Delivered", which is a return that
   completed correctly. Purple (Angle's own #7266ba) marks the whole RTO family as a
   distinct third outcome, and keeps RTO visually separable from the plain delivery
   flow at a glance.

   -----------------------------------------------------------------------------
   Shape: soft tint + strong text
   -----------------------------------------------------------------------------
   Tinted fill with a darker label of the same hue, rather than a saturated block.
   It reads at grid density without turning a table of statuses into a paint chart,
   and hits contrast comfortably. .ds-status carries the shape; .ds-status-* the hue.
   ============================================================================= */

.ds-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* -----------------------------------------------------------------------------
   Pre-shipping — neutral. Nothing has happened yet, so nothing should shout.
   -------------------------------------------------------------------------- */
.ds-status-unknown,
.ds-status-unshipped {
    background-color: var(--ds-bg-active);
    border-color: var(--ds-border-subtle);
    color: var(--ds-text-secondary);
}

/* Cancelled — deliberately muted, not red. It is a closed, intentional end state,
   not a failure needing attention; red here would compete with Un-Delivered. */
.ds-status-cancelled {
    background-color: var(--ds-bg-active);
    border-color: var(--ds-border-subtle);
    color: var(--ds-text-muted);
    text-decoration: line-through;
}

/* -----------------------------------------------------------------------------
   In the pipeline — blue. Moving as expected, no action needed.
   -------------------------------------------------------------------------- */
.ds-status-pending-pickup,
.ds-status-pickup-scheduled,
.ds-status-shipped {
    background-color: var(--ds-info-50);
    border-color: var(--ds-info-100);
    color: var(--ds-info-700);
}

.ds-status-in-transit {
    background-color: var(--ds-info-100);
    border-color: var(--ds-info-100);
    color: var(--ds-info-700);
}

/* Out for delivery — the live, about-to-land state. Solid blue so it stands out from
   the softer in-transit tints as the one worth watching today. */
.ds-status-out-for-delivery {
    background-color: var(--ds-info-500);
    border-color: var(--ds-info-500);
    color: var(--ds-text-on-color);
}

/* -----------------------------------------------------------------------------
   Terminal success — green. Solid: this is the outcome everything aims at.
   -------------------------------------------------------------------------- */
.ds-status-delivered {
    background-color: var(--ds-success-500);
    border-color: var(--ds-success-500);
    color: var(--ds-text-on-color);
}

/* -----------------------------------------------------------------------------
   Needs attention — red.
   ds-status-undelivered is the one that used to render GREEN, because the old call
   sites tested item.Status.Contains("Delivered") and "Un-Delivered" satisfies it.
   -------------------------------------------------------------------------- */
.ds-status-undelivered,
.ds-status-ndr {
    background-color: var(--ds-danger-500);
    border-color: var(--ds-danger-500);
    color: var(--ds-text-on-color);
}

.ds-status-pending {
    background-color: var(--ds-warning-50);
    border-color: var(--ds-warning-100);
    color: var(--ds-warning-700);
}

.ds-status-damaged,
.ds-status-lost {
    background-color: var(--ds-danger-50);
    border-color: var(--ds-danger-100);
    color: var(--ds-danger-700);
}

/* -----------------------------------------------------------------------------
   RTO family — purple. A third outcome, not a good or bad one.
   Tint while the return is in flight, solid once it lands, so the family reads as
   one group but its own progression is still legible.
   -------------------------------------------------------------------------- */
.ds-status-rto-in-transit,
.ds-status-returned {
    background-color: var(--ds-purple-100);
    border-color: var(--ds-purple-100);
    color: var(--ds-purple-700);
}

.ds-status-rto-delivered {
    background-color: var(--ds-purple-500);
    border-color: var(--ds-purple-500);
    color: var(--ds-text-on-color);
}

/* RTO that went wrong: stay in the purple family so it still reads as a return,
   but darken to separate it from a clean RTO. */
.ds-status-rto-damaged,
.ds-status-rto-lost {
    background-color: var(--ds-purple-700);
    border-color: var(--ds-purple-700);
    color: var(--ds-text-on-color);
}

/* -----------------------------------------------------------------------------
   Bootstrap .badge interop
   -----------------------------------------------------------------------------
   Existing markup writes <span class="badge badge-success">. Where a call site has
   been moved onto the palette it becomes <span class="badge ds-status ds-status-*">,
   and bootstrap's .badge-* would otherwise still be sitting there. .badge is (0,1,0)
   and so are these, so source order decides — this file loads after bootstrap. The
   rules above already win; this block only neutralises .badge's own padding/font so
   the two shapes do not fight.
   -------------------------------------------------------------------------- */
.badge.ds-status {
    padding: 3px 10px;
    font-size: var(--ds-text-xs);
    font-weight: 600;
}