/* Catalog list screens (public/js/pages/masterdata.js): small additions on top of the list toolkit styles. */

/* Code tag in front of the name: one width so the names line up */
.code-tag.lc-code {
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
}

/* Zero counts recede so the rows that hold data stand out */
.lc-zero {
  color: var(--muted);
}

/* Status tag + "cần rà soát" side by side */
.lc-tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Long single-line text in a secondary column (legal entity names) */
.lc-clip {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Position of an employee: managers and supervisors highlighted */
.lc-pos {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
  white-space: nowrap;
}
.lc-pos.tone-info {
  background: var(--info-soft);
  color: var(--info);
  font-weight: 600;
}

.lc-contact {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 220px;
}

.avatar.lc-off {
  opacity: 0.45;
}

/* Card band by state (the asset class bands live in app.css) */
.lk-card .band.band-ok {
  background: var(--ok);
}
.lk-card .band.band-warn {
  background: var(--warn);
}
.lk-card .band.band-bad {
  background: var(--bad);
}
.lk-card .band.band-info {
  background: var(--info);
}
.lk-card .band.band-off {
  background: var(--line-2);
}

/* Cards opened with a click (no link): keyboard focus ring like a link */
.lk-card[role='button']:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Two lines in one cell (city over region) */
.lc-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Toolkit gap: on desktop the page toolbar is a wrapping row, so a filter bar with few quick views would only be as
   wide as its chips. The filter bar always takes the full row. */
@media (min-width: 1024px) {
}
/* Stacked tags in a narrow table column */
.lc-tags.v {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}