/**
 * ============================================================================
 * MUAADH TAG — Status badge component
 * ============================================================================
 *
 * Tag/badge component (15 rules) extracted from muaadh-core.css in
 * Phase 3 Wave 10 (2026-05-13).
 *
 * Owns:
 *   - .muaadh-tag base (defined further down in muaadh-core.css in the
 *     "C10 — BADGES (Flat Modern)" block — single canonical block; this
 *     file only owns the status-color variants below).
 *   - Status variants:
 *       --pending / --processing / --paid / --shipped (workflow)
 *       --primary / --secondary / --success / --danger / --warning / --info
 *
 * Note on canonical base: the .muaadh-tag base definition (font-size,
 * padding, border-radius, etc.) lives in the C10 block deeper in
 * core.css and was kept there because Phase G' (2026-05-10) explicitly
 * consolidated it as cascade winner. Future wave can extract the C10
 * block to this file once verified that nothing breaks specificity.
 *
 * Loaded on every page via shell layouts.
 * ============================================================================
 */

/* ============================================================================
   .muaadh-tag — canonical source for tag/badge primitives (Band 13)
   ============================================================================ */

/* ============================================================================
   SECTION 3: BADGE COMPONENT
   ============================================================================
   The active base for .muaadh-tag is the consolidated definition further
   down at the "C10 — BADGES (Flat Modern)" section. The earlier base
   block was shadowed by source-order and has been removed.
   ============================================================================ */
/* Status Badges — gradient block re-pruned in Phase G' (2026-05-10).
 * .muaadh-tag--{completed, success, cancelled, danger} were shadowed by
 * the solid-color block ~60 lines below — those four are deleted (cascade
 * collision resolved).
 *
 * .muaadh-tag--{pending, processing, paid, shipped} still need styling
 * (used in blades + JS), so they remain as solid colors matching the
 * primary/secondary/success/danger/warning/info pattern below. Pending +
 * shipped get warning + info colors respectively (the pre-existing visual
 * intent from the gradient block, mapped to the solid scheme). */
.muaadh-tag--pending    { background-color: var(--theme-warning); color: var(--theme-text-on-warning); }
.muaadh-tag--processing { background-color: var(--theme-info);    color: var(--theme-text-on-info); }
.muaadh-tag--paid       { background-color: var(--theme-success); color: var(--theme-text-on-success); }
.muaadh-tag--shipped    { background-color: var(--theme-info);    color: var(--theme-text-on-info); }
/* Solid Badges
   --primary, --secondary, --info, --warning blocks here were shadowed by
   the consolidated definitions below at L1367-1372 (now adjusted) using
   var(--theme-X) tokens (which are identical values via aliasing —
   var(--action-primary) := var(--theme-primary)). Removed as dead rules.
   --outline-secondary kept because it has no later override. */
.muaadh-tag--outline-secondary {
    background-color: transparent;
    color: var(--text-secondary);
    border: var(--chassis-border-thin) solid var(--border-default);
}
/* Badge Color Variants */
.muaadh-tag--light {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
}
.muaadh-tag--dark {
    background-color: var(--text-primary);
    color: var(--text-inverse);
}
/* Badge Sizes */
.muaadh-tag--sm {
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
}
/* === From style.css C10: Flat modern badges === */
/* ============================================================================
   C10 — BADGES (Flat Modern)
   ============================================================================ */
.muaadh-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) 10px;
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--theme-letter-spacing-normal);
    border-radius: 9999px;
    border: none;
    white-space: nowrap;
}
.muaadh-tag--primary { background-color: var(--theme-primary); color: var(--theme-text-on-primary); }
.muaadh-tag--secondary { background-color: var(--theme-secondary); color: var(--theme-text-on-secondary); }
.muaadh-tag--success { background-color: var(--theme-success); color: var(--theme-text-on-success); }
.muaadh-tag--danger { background-color: var(--theme-danger); color: var(--theme-text-on-danger); }
.muaadh-tag--warning { background-color: var(--theme-warning); color: var(--theme-text-on-warning); }
.muaadh-tag--info { background-color: var(--theme-info); color: var(--theme-text-on-info); }