/* ============================================================
   BADGES - the single owner of .badge and every .badge-* variant
   ============================================================
   Canon: docs/DESIGN_SYSTEM_REFERENCE.md "Badges" (F2-023).

   A badge is a 15%-tint fill with the matching colour as text - never a
   solid fill with white text. It always pairs its colour with a word, so
   it stays readable without colour vision.

   Before this file the base was defined five times (10px uppercase in one
   place, 0.875rem in another), `.badge-error` did not exist at all, and
   `badge badge-success` resolved to a Bootstrap solid `!important` fill -
   the opposite of the documented treatment.

   The `.badge--name` spellings are compatibility aliases: several templates
   still use them, so they map onto the same treatment rather than being
   deleted out from under live markup. Migrating those call sites to the
   single-hyphen names is F2-006's job, not this file's.
   ============================================================ */

/* ---------- base ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.badge .material-symbols-rounded {
    font-size: 14px;
}

/* ---------- semantic ---------- */

.badge-primary,
.badge--primary   { background: var(--primary-15);  color: var(--brand-primary); }

.badge-success,
.badge--success   { background: var(--success-bg);  color: var(--success); }

.badge-warning,
.badge--warning   { background: var(--warning-bg);  color: var(--warning); }

.badge-error,
.badge-danger,
.badge--error     { background: var(--error-bg);    color: var(--error); }

.badge-info,
.badge--info      { background: var(--info-bg);     color: var(--info); }

.badge-quest,
.badge--quest     { background: var(--ai-bg);       color: var(--quest-primary); }

.badge-neutral,
.badge-secondary,
.badge--neutral   { background: var(--surface-raised-3); color: var(--text-secondary); }

/* ---------- assignment status ---------- */

.badge-missing,
.badge--missing,
.badge-new-missing    { background: var(--status-missing-bg);   color: var(--status-missing); }

.badge-late,
.badge--late          { background: var(--status-late-bg);      color: var(--status-late); }

.badge-incomplete,
.badge--incomplete    { background: var(--warning-bg);          color: var(--warning); }

.badge-submitted,
.badge--submitted,
.badge-complete,
.badge-resolved       { background: var(--status-submitted-bg); color: var(--status-submitted); }

.badge-graded,
.badge--graded        { background: var(--status-graded-bg);    color: var(--status-graded); }

.badge-exempt,
.badge--exempt        { background: var(--status-exempt-bg);    color: var(--status-exempt); }

/* Closed reporting term: the work is final, so this reads as history rather
   than as an alarm. Deliberately the quietest badge in the set - it replaces
   a red "Missing" that can no longer be acted on.
   See docs/specs/TERM_AWARE_PRIORITY_SPEC.md */
.badge-settled,
.badge--settled       { background: var(--bg-secondary);        color: var(--text-secondary); }

/* Nothing has changed about this item since the parent last looked. */
.badge-changed,
.badge--changed       { background: var(--info-bg);             color: var(--info); }

/* ---------- time urgency ---------- */

.badge-overdue,
.badge--overdue,
.badge-urgency-overdue,
.badge--urgency-overdue   { background: var(--urgency-overdue-bg);   color: var(--urgency-overdue); }

.badge-today,
.badge--today,
.badge-due-today,
.badge--urgency-today     { background: var(--urgency-today-bg);     color: var(--urgency-today); }

.badge-tomorrow,
.badge--tomorrow,
.badge-due-tomorrow,
.badge--urgency-tomorrow  { background: var(--urgency-tomorrow-bg);  color: var(--urgency-tomorrow); }

.badge-this-week,
.badge--this-week,
.badge--urgency-week      { background: var(--urgency-this-week-bg); color: var(--urgency-this-week); }

/* The two calm bands resolve to the neutral by token, not by an exception
   here - see variables.css. They are listed so every urgency band has a
   badge and no call site has to reach for badge-neutral instead. */
.badge-soon,
.badge--soon,
.badge--urgency-soon      { background: var(--urgency-soon-bg);      color: var(--urgency-soon); }

.badge-future,
.badge--future,
.badge--urgency-future    { background: var(--urgency-future-bg);    color: var(--urgency-future); }

/* ---------- priority: weight, not hue ----------
   Priority carries no colour (see variables.css). What it carries instead is
   loudness: the top two rungs get the tint and full-strength text, the bottom
   two get an outline and tertiary text. That keeps the one thing colour was
   doing on the only live surface - letting you pick the high rows out of a
   list - without borrowing from urgency or the CTA.

   Still a tint and never a solid fill with white text, which is this file's
   rule from the top. "Loud" here means filled against outlined, not inverted. */

.badge-critical,
.badge--priority-critical,
.badge-high,
.badge--high,
.badge--priority-high     { background: var(--priority-high-bg);
                            color: var(--priority-high);
                            font-weight: var(--font-semibold); }

.badge-medium,
.badge--medium,
.badge--priority-medium,
.badge-low,
.badge--low,
.badge--priority-low      { background: var(--priority-low-bg);
                            color: var(--priority-low);
                            /* inset shadow, not border: a real border adds
                               2px to the box and knocks the badge out of
                               line with the filled ones beside it. */
                            box-shadow: inset 0 0 0 1px var(--border-default); }

/* ---------- metadata ---------- */

.badge-ai        { background: var(--ai-bg-10);   color: var(--ai-secondary); }
.badge-file      { background: var(--info-bg-10); color: var(--info-light); }

/* ---------- modifiers ---------- */

/* The base is already fully rounded; kept so existing markup is a no-op. */
.badge-pill,
.badge--pill     { border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }

.badge-muted,
.badge--muted    { background: var(--surface-raised-1); color: var(--text-tertiary); }

/* ---------- neutral fills kept from the Bootstrap set ----------
   Only these two had no semantic equivalent; the rest of the Bootstrap
   badge block was solid-fill + !important and is gone. Admin and
   verification pages still use them. */

.badge-light     { background: var(--surface-raised-2); color: var(--text-primary); }
.badge-dark      { background: var(--bg-primary);       color: var(--text-secondary); }

/* Carried over from shared.css: a count/score badge that sits a step
   larger than the rest of the set. Reads as a loud rung, which is what a
   score badge is. */
.badge--priority { background: var(--priority-high-bg); color: var(--priority-high);
                   gap: var(--space-1); font-size: var(--text-sm);
                   font-weight: var(--font-semibold); }