/*
 * ==========================================================
 * VIBE INVENTORY UI 2.0
 * ==========================================================
 */

/* VIBE_INVENTORY_UI_V20 */

.vinv{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.vinv-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.vinv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.vinv-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.vinv-stat-label{
  color:var(--vb-muted);

  font-size:13px;
  font-weight:850;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.vinv-stat-value{
  margin-top:6px;

  color:var(--vb-text);

  font-size:clamp(17px,1.4vw,23px);
  font-weight:900;
}

.vinv-list{
  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:14px;

  background:
    rgba(255,255,255,.01);
}

.vinv-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    110px
    135px
    minmax(300px,.8fr);

  align-items:center;

  gap:12px;

  min-height:78px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid
    var(--vb-border);
}

.vinv-row:last-child{
  border-bottom:0;
}

.vinv-name{
  color:var(--vb-text);

  font-size:13px;
  font-weight:850;
}

.vinv-desc{
  margin-top:4px;

  color:var(--vb-muted);

  font-size:13px;
}

.vinv-key{
  margin-top:5px;

  color:
    rgba(255,255,255,.32);

  font-size:13px;
}

.vinv-number{
  color:var(--vb-muted);

  font-size:13px;
}

.vinv-number strong{
  display:block;

  margin-top:4px;

  color:var(--vb-text);

  font-size:14px;
  font-weight:900;
}

.vinv-sell{
  display:grid;

  grid-template-columns:
    75px
    110px
    auto;

  align-items:end;

  gap:7px;
}

.vinv-empty{
  padding:
    38px
    15px;

  color:var(--vb-muted);

  text-align:center;
}


@media(max-width:1050px){

  .vinv-row{
    grid-template-columns:
      minmax(0,1fr)
      90px
      minmax(290px,.8fr);
  }

  .vinv-row>.vinv-number:nth-child(3){
    display:none;
  }

}


@media(max-width:720px){

  .vinv-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .vinv-row{
    grid-template-columns:1fr;
  }

  .vinv-row>.vinv-number{
    display:block !important;
  }

}


@media(max-width:520px){

  .vinv-stats,
  .vinv-sell{
    grid-template-columns:1fr;
  }

}