@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");

/* ==========================================================================
 * Icon language (WI-3092) - the three quiet devices that replace filled,
 * multi-colored pills in BreezesAdmin data tables. Owner direction 2026-09-18.
 *
 *   1. Service tile  .il-svc     what was bought     (rounded square, ink glyph)
 *   2. Rail mark     .il-rail    who collected it    (ring + label + sub-label)
 *   3. Status        .il-status  what happened       (unfilled: glyph + text)
 *   plus .il-source - plain small grey text where a source pill used to sit.
 *
 * Markup comes from icon-language.js (window.BreezesIcons). A page adopts the
 * module with ONE css tag and ONE js tag; the outlined icon font rides in on
 * the import at the top of this file.
 *
 * RULES
 *   - Brand colors only. Status color is aqua / coral / grey (brand blue marks
 *     a reversal). No green, no amber, no purple, no filled pills.
 *   - Every color literal in this file sits on an --il-* token line and nowhere
 *     else. Components read tokens only. Where a brand token exists it is read
 *     through var() with the literal as fallback, because some admin pages do
 *     not load layout-v2.css.
 *   - Aqua and coral fail AA contrast as text on white, so glyphs and text use
 *     the darker ink tones; the pure brand aqua is used for the BZB ring only.
 *   - Light is today's theme; dark is wanted later. Both token sets are here
 *     from day one and switch on the data-theme attribute layout.js sets on
 *     the html element.
 *   - No collection-processor name may appear in a class name here or in any
 *     text the JS renders. Classes describe the seller (ili, bzb), never the
 *     processor behind it.
 *   - Do not add a new pill class next to these. Extend the registry instead.
 * ========================================================================== */

:root {
  --il-ink: var(--brand-navy, #012d53);
  --il-ink-2: #4b6177;
  --il-ink-3: #8a8f94;
  --il-tile: #eef1f3;
  --il-ring: #cfccc6;
  --il-ring-ili: var(--brand-navy, #012d53);
  --il-aqua: var(--brand-aqua, #00b2cf);
  --il-aqua-ink: #007f95;
  --il-coral-ink: #c2413a;
  --il-blue: var(--brand-blue, #0078dd);
}

:root[data-theme="dark"] {
  --il-ink: var(--brand-white, #f2f2ef);
  --il-ink-2: #b3c6d6;
  --il-ink-3: #8299ad;
  --il-tile: #0c3f6b;
  --il-ring: #2c6088;
  --il-ring-ili: #b3c6d6;
  --il-aqua-ink: #4fd3e8;
  --il-coral-ink: #ff9d98;
  --il-blue: #5cb0f5;
}

/* ---- glyph ---------------------------------------------------------------
 * Sizing and alignment only. The font family comes from the class the JS
 * registry emits, so swapping the icon set later is a change to the JS file
 * alone. The fixed 1em box keeps a ligature name from stretching a table cell
 * in the moment before the font arrives. Inline svg glyphs get the same box. */
.il-glyph {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}
svg.il-glyph {
  fill: currentColor;
}

/* ---- 1. service tile ------------------------------------------------------ */
.il-svc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--il-tile);
  color: var(--il-ink);
  vertical-align: middle;
}
.il-svc .il-glyph {
  font-size: 18px;
}
.il-svc--neutral {
  color: var(--il-ink-2);
}
.il-svc--more {
  font-size: 11px;
  font-weight: 600;
  color: var(--il-ink-2);
  font-variant-numeric: tabular-nums;
}
.il-svc-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.il-svc-labelled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  vertical-align: middle;
}
.il-svc-text {
  font-size: 13px;
  color: var(--il-ink);
}

/* ---- 2. rail mark ---------------------------------------------------------- */
.il-rail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  vertical-align: middle;
  color: var(--il-ink);
}
.il-rail__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--il-ring);
  color: var(--il-ink-2);
}
.il-rail__mark .il-glyph {
  font-size: 16px;
}
.il-rail__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.il-rail__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--il-ink);
  white-space: nowrap;
}
.il-rail__sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--il-ink-3);
}
.il-rail--ili .il-rail__mark {
  border-color: var(--il-ring-ili);
  color: var(--il-ink);
}
.il-rail--bzb .il-rail__mark {
  border-color: var(--il-aqua);
  color: var(--il-aqua-ink);
}
.il-rail--property .il-rail__mark,
.il-rail--arrival .il-rail__mark,
.il-rail--other .il-rail__mark {
  border-color: var(--il-ring);
  color: var(--il-ink-2);
}
.il-rail--none {
  color: var(--il-ink-3);
}

/* ---- 3. status -------------------------------------------------------------
 * Never filled. The color lives on the glyph; the words stay ink, except
 * attention (coral ink throughout) and muted (grey throughout). */
.il-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--il-ink);
}
.il-status .il-glyph {
  font-size: 17px;
}
.il-status--settled .il-glyph {
  color: var(--il-aqua-ink);
}
.il-status--attention,
.il-status--attention .il-glyph {
  color: var(--il-coral-ink);
}
.il-status--neutral {
  color: var(--il-ink-2);
}
.il-status--neutral .il-glyph {
  color: var(--il-ink-3);
}
.il-status--reversal .il-glyph {
  color: var(--il-blue);
}
.il-status--muted,
.il-status--muted .il-glyph {
  color: var(--il-ink-3);
}

/* ---- source text ----------------------------------------------------------- */
.il-source {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--il-ink-3);
}