/* viewer.css – separat, ca să nu-ți explodeze app.css-ul în 3 luni */

.viewer-grid{
  display:grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px){
  .viewer-grid{ grid-template-columns: 1fr; }
}

/* LEFT */
.viewer-left{ min-width:0; }
.viewer-head{ display:grid; gap: 12px; }

.server-tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.server-tab{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  user-select:none;
  font-weight: 800;
  font-size: 13px;
}
.server-tab:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.server-tab.is-active{
  background: rgba(90,167,255,.18);
  border-color: rgba(90,167,255,.35);
}

.server-search{
  position: relative;
  width: 100%;
}
.server-search input{
  width: 100%;
  height: 42px;
  padding: 0 38px 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  outline: none;
}
.server-search input:focus{ border-color: rgba(90,167,255,.55); }
.server-search input::placeholder{ color: rgba(255,255,255,.55); }
.server-search .icon-search-clear{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.chars{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.char-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px;
  display:grid;
  gap: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.char-card:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.char-card:active{ transform: translateY(1px); }
.char-card.is-active{
  border-color: rgba(90,167,255,.45);
  background: rgba(90,167,255,.10);
}

.char-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.char-name{
  font-weight: 900;
  font-size: 14px;
}
.char-badges{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.char-meta{
  color: rgba(255,255,255,.68);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

/* RIGHT */
.viewer-right{ min-width:0; }
.inv-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.inv-title .t1{
  font-weight: 1000;
  font-size: 16px;
}
.inv-title .t2{
  font-family: var(--mono);
  font-size: 12px;
}

.inv-slider{
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.inv-slides{
  display:flex;
  width: 200%;
  transition: transform .22s ease;
}
.inv-slider[data-open="0"] .inv-slides{ transform: translateX(0%); }
.inv-slider[data-open="1"] .inv-slides{ transform: translateX(0%); }
.inv-slider[data-open="2"] .inv-slides{ transform: translateX(-50%); }

.inv-slide{
  width: 50%;
  padding: 12px;
}

.inv-bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.inv-cats{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-cat{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.inv-cat:hover{ background: rgba(255,255,255,.10); }
.inv-cat.is-active{
  background: rgba(56,217,150,.12);
  border-color: rgba(56,217,150,.35);
}

.inv-pages{
  display:flex;
  align-items:center;
  gap: 8px;
}
.inv-page-btn{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 1000;
}
.inv-page-dots{
  display:flex;
  gap: 6px;
  align-items:center;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.dot.is-active{
  background: rgba(90,167,255,.65);
  border-color: rgba(90,167,255,.55);
}

.inv-viewport{
  display:flex;
  justify-content:center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

/* grid lipit, fără spații */
.inv-grid{
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;

  /* forțează stretch (să nu se “micșoreze” butonul) */
  align-items: stretch;
  justify-items: stretch;
}

/* slotul se întinde pe înălțimea span-ului */
.inv-slot{
  position: relative;
  width: 32px;
  height: 100%;          /* <- CHEIA */
  min-height: 32px;

  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;

  background-image: url("../img/stone_slot_default.png");
  background-size: 32px 32px;
  background-color: #2a2116;
  background-repeat: repeat-y; /* tile pe 2/3 sloturi */
  background-position: 0 0;

  box-shadow: none;
  display: block;
}

/* imaginea se raportează la height:100% din .inv-slot */
.inv-slot > img{
  width: 32px;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

/* empty slot */
.inv-slot.empty{ opacity: .85; }

/* count */
.inv-slot .cnt{
  position: absolute;
  right: 2px;
  bottom: 1px;

  /* mai mic, mai “tight” */
  font-size: 9px;
  line-height: 1;
  font-weight: 400;          /* nu bold */
  letter-spacing: -0.2px;    /* îngustează ușor */

  /* text mai “crisp” */
  color: rgba(255,255,255,.95);
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 2px rgba(0,0,0,.85);

  /* aliniere ca în joc (cifrele “curg” din dreapta) */
  text-align: right;
  font-variant-numeric: tabular-nums; /* cifre uniforme */
  pointer-events: none;
}


/* phantom cell */
.inv-slot.phantom{
  visibility:hidden;
  pointer-events:none;
  background: transparent !important;
}

.inv-panel{
  display: grid;
  gap: 6px;
}


/* STASH (details) */
.stash{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 10px;
}
.stash-sum{
  display:flex;
  align-items:center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select:none;
}
.stash-sum::-webkit-details-marker{ display:none; }
.stash-title{ font-weight: 1000; }
.stash-bar{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}