/* =============================================================================
   ČOS Digital Library — Chip component tokens
   Import after _card.css (which provides color + type variables).
   Covers: validity pills (.vchip), availability rects (.achip),
           classification badges (.cchip), document-type chips (.dc-chip).
   ============================================================================= */

/* All chip rules live in @layer components so that consumers which OVERRIDE
   them (doc-card / table row-hover states) can themselves be layered without
   their overrides losing to an unlayered chip base. Purely structural — no
   visual change. The semantic vchip/achip/cchip colours flip via tokens on the
   element; the dc-chip dark treatment stays in _dark.css for now (it's entangled
   with table's chipstyle overrides, which win by specificity). */
@layer components {

/* ── Doc-type chips (mono, square, color-filled) ────────────────────────── */
/* Mirrors the canonical `.dc-chip` rules in `ui_kits/cos-library/ui-kit.css`
   so previews that use the prototype's component classes (e.g. filter group,
   library card) render the chip with its tonal fill. Dark-mode overrides
   live in `_dark.css`. */
.dc-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.02em;
  color: white; line-height: 1.4;
}
.dc-chip__short { display: none; }
.dc-chip--cos    { background: var(--doc-cos); }
.dc-chip--stanag { background: var(--doc-stanag); }
.dc-chip--stanrec{ background: var(--doc-stanrec); }
.dc-chip--ap     { background: var(--doc-ap); }

/* ── Doc-type chip — alternative treatments ──────────────────────────────
   `.dc-chip` on its own is the default FILLED treatment (solid color block,
   white text). Two opt-in modifiers re-skin it the SAME way everywhere they
   are used — table, cards, filters, detail header — so the choice carries
   application-wide. Showcased in comp-chips.html. Dark inks live in _dark.css.
   Place AFTER the filled `--cos/--stanag/…` variants so the transparent
   background wins over the per-variant fill at equal specificity. */

/* Outlined — hollow: colored 1px border + colored text, transparent fill so
   it adapts to whatever surface it sits on (white card, zebra row, hover tint). */
.dc-chip--outlined                  { background: transparent; border: 1px solid; padding: 2px 9px; }
.dc-chip--outlined.dc-chip--cos     { color: var(--doc-cos);     border-color: var(--doc-cos); }
.dc-chip--outlined.dc-chip--stanag  { color: var(--doc-stanag);  border-color: var(--doc-stanag); }
.dc-chip--outlined.dc-chip--stanrec { color: var(--doc-stanrec); border-color: var(--doc-stanrec); }
.dc-chip--outlined.dc-chip--ap      { color: var(--doc-ap);      border-color: var(--doc-ap); }

/* Letter — no chrome: colored text preceded by a small colored dot. The
   `.dc-chip__dot` element renders ONLY in this treatment (hidden otherwise). */
.dc-chip__dot                       { display: none; }
.dc-chip--letter                    { background: transparent; padding: 0; gap: 6px; }
.dc-chip--letter .dc-chip__dot      { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dc-chip--letter.dc-chip--cos       { color: var(--doc-cos); }
.dc-chip--letter.dc-chip--cos     .dc-chip__dot { background: var(--doc-cos); }
.dc-chip--letter.dc-chip--stanag    { color: var(--doc-stanag); }
.dc-chip--letter.dc-chip--stanag  .dc-chip__dot { background: var(--doc-stanag); }
.dc-chip--letter.dc-chip--stanrec   { color: var(--doc-stanrec); }
.dc-chip--letter.dc-chip--stanrec .dc-chip__dot { background: var(--doc-stanrec); }
.dc-chip--letter.dc-chip--ap        { color: var(--doc-ap); }
.dc-chip--letter.dc-chip--ap      .dc-chip__dot { background: var(--doc-ap); }

/* ── Validity chips (pill) ──────────────────────────────────────────────── */
/* Pill shape signals temporal / lifecycle state (changes over time).       */
.vchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; line-height: 1;
  font-family: var(--font-sans); font-weight: 500;
  border: 1px solid transparent; /* reserved so active border causes no shift */
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.vchip i { font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: none; position: relative; top: -0.5px; }
.vchip i::before { display: block; line-height: 1; }

/* Round icons: pull in slightly for optical balance with the pill curve */
.vchip:has(.bi-check-circle-fill),
.vchip:has(.bi-arrow-repeat),
.vchip:has(.bi-slash-circle) { padding-left: 6px; }
.vchip:has(.bi-check-circle-fill) i,
.vchip:has(.bi-arrow-repeat) i,
.vchip:has(.bi-slash-circle) i { margin-left: -1px; }

/* Default (white / light bg) */
.v-valid    { background: var(--gov-color-success-50);  color: var(--gov-color-success-700); }
.v-replaced { background: var(--gov-color-warning-50);  color: var(--gov-color-warning-700); }
.v-invalid  { background: var(--gov-color-neutral-100); color: var(--gov-color-neutral-700); }
.v-draft    { background: var(--gov-color-neutral-50);  color: var(--gov-color-neutral-600); border-color: var(--gov-color-neutral-300); border-style: dashed; }

/* Active (non-white bg — hover rows, selected filters) */
.vchip--active.v-valid      { background: var(--gov-color-success-100); color: var(--gov-color-success-700); border-style: solid; border-color: var(--gov-color-success-500); }
.vchip--active.v-replaced   { background: var(--gov-color-warning-100); color: var(--gov-color-warning-700); border-style: solid; border-color: var(--gov-color-warning-500); }
.vchip--active.v-invalid    { background: var(--gov-color-neutral-200); color: var(--gov-color-neutral-800); border-style: solid; border-color: var(--gov-color-neutral-400); }
.vchip--active.v-draft      { background: var(--gov-color-neutral-100); color: var(--gov-color-neutral-700); border-style: dashed; border-color: var(--gov-color-neutral-400); }

/* ── Availability chips (rect) ──────────────────────────────────────────── */
/* Rect shape signals access category (fixed classification, not lifecycle). */
.achip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: 11.5px; line-height: 1;
  font-family: var(--font-sans); font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.achip i { font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: none; }
.achip i::before { display: block; line-height: 1; }

/* Default */
.a-public     { background: var(--avail-public-bg);     color: var(--gov-color-success-700); }
.a-login      { background: var(--avail-login-bg);      color: var(--gov-color-info-700); }
.a-controlled { background: var(--avail-controlled-bg); color: var(--gov-color-warning-700); }
.a-metadata   { background: var(--avail-metadata-bg);   color: var(--gov-color-neutral-700); }

/* Active */
.achip--active.a-public     { background: var(--gov-color-success-100); color: var(--gov-color-success-700); border-style: solid; border-color: var(--gov-color-success-500); }
.achip--active.a-login      { background: var(--gov-color-info-100);    color: var(--gov-color-info-700);    border-style: solid; border-color: var(--gov-color-info-500); }
.achip--active.a-controlled { background: var(--gov-color-warning-100); color: var(--gov-color-warning-700); border-style: solid; border-color: var(--gov-color-warning-500); }
.achip--active.a-metadata   { background: var(--gov-color-neutral-200); color: var(--gov-color-neutral-700); border-style: solid; border-color: var(--gov-color-neutral-400); }

/* ── Classification chips (mono rect badge) ─────────────────────────────── */
.cchip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.02em;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid transparent; line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* Default */
.cchip--neozn { background: var(--gov-color-neutral-50);  color: var(--gov-color-neutral-700); }
.cchip--nu    { background: var(--gov-color-warning-50);  color: var(--gov-color-warning-700); }
.cchip--nr,
.cchip--nc    { background: var(--gov-color-error-50);    color: var(--gov-color-error-700); }
.cchip--ns    { background: var(--gov-color-neutral-900); color: var(--gov-color-neutral-0); }
/* Active */
.cchip--active.cchip--neozn { background: var(--gov-color-neutral-100); color: var(--gov-color-neutral-800); border-color: var(--gov-color-neutral-300); }
.cchip--active.cchip--nu    { background: var(--gov-color-warning-100); color: var(--gov-color-warning-700); border-color: var(--gov-color-warning-500); }
.cchip--active.cchip--nr,
.cchip--active.cchip--nc    { background: var(--gov-color-error-100);   color: var(--gov-color-error-700);   border-color: var(--gov-color-error-500); }
.cchip--active.cchip--ns    { background: #1d3c5d; color: white; border-color: var(--gov-color-primary-400); }

/* ── Collapsed variants — square 22×22 icon-/letter-only forms ──────────── */
/* Used at narrow widths (catalogue table icon-mode) and anywhere the chip
   needs to compress to a glyph. Tooltip preserves the verbal label. */
.vchip--collapsed,
.achip--collapsed,
.cchip--collapsed {
  width: 22px; height: 22px;
  padding: 0;
  gap: 0;
  justify-content: center;
  box-sizing: border-box;
}
.vchip--collapsed i,
.achip--collapsed i {
  font-size: 12px; width: 12px; height: 12px;
  top: 0; margin: 0;
}
/* Undo the round-icon optical pull-in: with no label, center the glyph. */
.vchip--collapsed:has(.bi-check-circle-fill),
.vchip--collapsed:has(.bi-arrow-repeat),
.vchip--collapsed:has(.bi-slash-circle) { padding: 0; }
.vchip--collapsed:has(.bi-check-circle-fill) i,
.vchip--collapsed:has(.bi-arrow-repeat) i,
.vchip--collapsed:has(.bi-slash-circle) i { margin-left: 0; }

/* Classification — single-letter square (matches availability collapsed shape). */
.cchip--collapsed {
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

/* ── "New" chip — freshly-added / new-arrival badge ─────────────────────────
   Small filled pill (mono, uppercase) with a sparkle glyph. Used inline by the
   library card and (with local absolute positioning) on the library cover.
   `.nchip--collapsed` drops the label → icon-only short pill (narrow widths). */
.nchip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--gov-color-primary-600);
  padding: 2px 6px; border-radius: 999px; line-height: 1.3;
  white-space: nowrap;
}
.nchip i { font-size: 0.92em; color: #fff; line-height: 1; }
.nchip__label { color: #fff; }
.nchip--collapsed { gap: 0; padding: 3px 5px; }
.nchip--collapsed .nchip__label { display: none; }

} /* end @layer components — chips */