/* ============================================================
   URBINO · CHIP
   Atom. Token-driven. Four flavors (status / category / filter /
   count), two shapes (square / pill), three sizes (sm / md / lg).

   Apply on <span> for non-interactive, <button> for filter/removable.
   class="u-chip u-chip--{shape} u-chip--{size} u-chip--{flavor}"
   ============================================================ */

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--u-chip-gap);
  font-family: var(--u-font-sans);
  font-weight: 500;
  font-size: var(--u-chip-font-size-md);
  line-height: 1.4;
  padding: var(--u-chip-py-md) var(--u-chip-px-md);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  background: transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   SHAPES
   ============================================================ */

.u-chip--square { border-radius: var(--u-chip-radius-square); }
.u-chip--pill   { border-radius: var(--u-chip-radius-pill); }


/* ============================================================
   SIZES
   ============================================================ */

.u-chip--sm {
  padding: var(--u-chip-py-sm) var(--u-chip-px-sm);
  font-size: var(--u-chip-font-size-sm);
  gap: var(--u-chip-gap-sm);
}
.u-chip--md {
  padding: var(--u-chip-py-md) var(--u-chip-px-md);
  font-size: var(--u-chip-font-size-md);
  gap: var(--u-chip-gap);
}
.u-chip--lg {
  padding: var(--u-chip-py-lg) var(--u-chip-px-lg);
  font-size: var(--u-chip-font-size-lg);
  gap: var(--u-chip-gap);
}


/* ============================================================
   ANATOMY HELPERS
   ============================================================ */

.u-chip__dot {
  width: var(--u-chip-dot-size);
  height: var(--u-chip-dot-size);
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.u-chip--sm .u-chip__dot { width: var(--u-chip-dot-size-sm); height: var(--u-chip-dot-size-sm); }
.u-chip--lg .u-chip__dot { width: var(--u-chip-dot-size-lg); height: var(--u-chip-dot-size-lg); }

.u-chip__emoji {
  font-size: 1.1em; line-height: 1;
  flex-shrink: 0;
}

.u-chip__close {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: inherit; opacity: 0.6; padding: 0;
  margin-left: 2px; margin-right: -4px;
  font-size: 14px; line-height: 1;
}
.u-chip__close:hover { opacity: 1; background: rgba(15, 23, 42, 0.08); }


/* ============================================================
   FLAVOR — STATUS (issue lifecycle)
   Use a dot on citizen-facing surfaces; manager-square may omit
   the dot in dense tables (visually loud).
   ============================================================ */

.u-chip--status            { font-weight: 500; }
.u-chip--uj                { background: var(--u-status-uj-bg);           color: var(--u-status-uj-fg); }
.u-chip--uj .u-chip__dot          { background: var(--u-status-uj-dot); }
.u-chip--jovahagyva        { background: var(--u-status-jovahagyva-bg);   color: var(--u-status-jovahagyva-fg); }
.u-chip--jovahagyva .u-chip__dot  { background: var(--u-status-jovahagyva-dot); }
.u-chip--folyamatban       { background: var(--u-status-folyamatban-bg);  color: var(--u-status-folyamatban-fg); }
.u-chip--folyamatban .u-chip__dot { background: var(--u-status-folyamatban-dot); }
.u-chip--megoldva          { background: var(--u-status-megoldva-bg);     color: var(--u-status-megoldva-fg); }
.u-chip--megoldva .u-chip__dot    { background: var(--u-status-megoldva-dot); }
.u-chip--elutasitva        { background: var(--u-status-elutasitva-bg);   color: var(--u-status-elutasitva-fg); }
.u-chip--elutasitva .u-chip__dot  { background: var(--u-status-elutasitva-dot); }


/* ============================================================
   FLAVOR — CATEGORY (issue category, emoji + label)
   Neutral slate by default; emoji carries the meaning.
   ============================================================ */

.u-chip--cat {
  background: var(--u-surface-sunk);
  color: var(--u-fg-2);
  font-weight: 500;
}


/* ============================================================
   FLAVOR — FILTER (clickable, on/off, optional removable ×)
   Three states: idle, hover, active. As a <button>.
   ============================================================ */

.u-chip--filter {
  background: var(--u-surface);
  color: var(--u-fg-2);
  border-color: var(--u-border-strong);
  cursor: pointer;
  transition:
    background var(--u-dur-fast) var(--u-ease-out),
    border-color var(--u-dur-fast) var(--u-ease-out),
    color var(--u-dur-fast) var(--u-ease-out);
}
.u-chip--filter:hover,
.u-chip--filter.is-hover    { background: var(--u-surface-alt); border-color: var(--u-slate-400); }
.u-chip--filter.is-active   { background: var(--u-primary-soft); border-color: var(--u-primary); color: var(--u-primary-press); font-weight: 600; }
.u-chip--filter:focus-visible,
.u-chip--filter.is-focus    { outline: none; box-shadow: var(--u-focus-ring); }


/* ============================================================
   FLAVOR — COUNT (badge with a number; in nav items, tabs)
   ============================================================ */

.u-chip--count {
  background: var(--u-primary);
  color: var(--u-fg-inv);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--u-radius-pill);
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.u-chip--count.u-chip--muted { background: var(--u-slate-200); color: var(--u-fg-2); }
.u-chip--count.u-chip--danger{ background: var(--u-red-500);   color: var(--u-fg-inv); }


/* ============================================================
   DISABLED — filter only
   ============================================================ */

.u-chip[disabled],
.u-chip--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}