//
// LISTINGS — dark
// ===============
// See light variant for layout notes; this file mirrors that structure
// with the dark theme's tokens.
//

.listing-card {
  background: $color--surface-card;
  border: 1px solid $color--border;
  border-radius: $radius--md;
  padding: 16px 18px 18px 18px;
  margin: 0 0 18px 0;
  box-shadow: $shadow--sm;
  scroll-margin-top: 16px;
}

.listing-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid $color--border;
}

.listing-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: $font--weight--semibold;
}

.listing-card-meta {
  color: $color--text-muted;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.listing-card-help {
  margin: 0 0 12px 0;
  color: $color--text-muted;
  font-size: 0.9rem;
  max-width: 80ch;
}

.listing-card-meta-sep {
  margin: 0 6px;
  color: $color--border-strong;
}

td.cell--bar {
  position: relative;
  isolation: isolate;
}

.cell-bar-fill {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  background: rgba(80, 175, 220, 0.22);
  border-radius: $radius--sm;
  z-index: 0;
  pointer-events: none;
  width: 0;
}

.cell-bar-text {
  position: relative;
  z-index: 1;
}

.type-cell {
  white-space: nowrap;
}

.type-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: $radius--pill;
  font-family: $font--mono;
  font-size: 0.78rem;
  font-weight: $font--weight--medium;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  border: 1px solid transparent;
  color: #1a1f24;
  background: rgb(196, 196, 196);
}

.type-chip--html      { background: rgb(130, 181, 252); }
.type-chip--javascript,
.type-chip--js        { background: rgb(254, 197, 132); }
.type-chip--css       { background: rgb(178, 234, 148); }
.type-chip--image,
.type-chip--svg,
.type-chip--favicon   { background: rgb(196, 154, 232); }
.type-chip--font      { background: rgb(255, 82, 62); color: #fff; }
.type-chip--video     { background: rgb(33, 194, 162); color: #fff; }
.type-chip--audio     { background: rgb(89, 199, 235); color: #fff; }
.type-chip--json,
.type-chip--xml,
.type-chip--plain     { background: rgb(200, 200, 215); }
.type-chip--other     { background: rgb(180, 180, 180); }

tr.asset-reused {
  background: rgba(80, 175, 220, 0.06);
}

.listing-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 18px 0;
  list-style: none;
  padding: 0;

  li { margin: 0; }

  a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: $radius--pill;
    border: 1px solid $color--border;
    background: $color--surface;
    color: $color--text-secondary;
    font-size: 0.85rem;
    font-weight: $font--weight--medium;
    text-decoration: none;

    &:hover {
      background: $color--surface-card;
      border-color: $color--border-strong;
      color: $color--text;
    }
  }
}