/* Wulin Saga — bag window 'กระเป๋า' + global item/skill tooltip content (.tt-*).
 * Owned by ui-inventory. Builds on the shared classes of style.css (.slot .qty .plus .cd .bar .btn .tooltip).
 */

/* ------------------------------------------------------------------------------------------------
 * Bag window
 * --------------------------------------------------------------------------------------------- */
.panel-inventory {
  --slot: 44px;
  display: flex; flex-direction: column; gap: 9px;
}
.panel-inventory .inv-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px; font-size: 12px; color: var(--c-muted);
}
.panel-inventory .inv-head-label { flex: none; letter-spacing: 0.3px; }
.panel-inventory .inv-cap { flex: 1 1 auto; }
.panel-inventory .inv-cap.full .bar-fill { background: linear-gradient(180deg, #ff9383 0%, var(--c-hp) 45%, #751410 100%); }
.panel-inventory .inv-cap-text {
  flex: none; min-width: 42px; text-align: right;
  color: var(--c-text); font-weight: 500; font-variant-numeric: tabular-nums;
}

.panel-inventory .inv-grid {
  display: grid; grid-template-columns: repeat(8, var(--slot)); gap: 4px; justify-content: center;
  padding: 8px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(150, 60, 25, 0.1), transparent 70%),
    rgba(0, 0, 0, 0.36);
  border: 1px solid #3c2717; border-radius: var(--radius);
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 220, 160, 0.05);
}

/* Slots: rarity border comes from style.css [data-rarity]; add outer glow for the high tiers. */
.panel-inventory .inv-slot.empty {
  background:
    radial-gradient(circle at 50% 40%, rgba(60, 38, 24, 0.55) 0%, rgba(14, 8, 5, 0.9) 75%);
}
.panel-inventory .inv-slot:not(.empty) { cursor: grab; }
.panel-inventory .inv-slot[data-rarity="rare"] {
  box-shadow: inset 0 0 8px rgba(74, 163, 255, 0.3), inset 0 2px 7px rgba(0, 0, 0, 0.8), 0 0 4px rgba(74, 163, 255, 0.35);
}
.panel-inventory .inv-slot[data-rarity="epic"] {
  box-shadow: inset 0 0 10px rgba(199, 125, 255, 0.4), inset 0 2px 7px rgba(0, 0, 0, 0.8), 0 0 7px rgba(199, 125, 255, 0.5);
}
.panel-inventory .inv-slot[data-rarity="legendary"] { animation: inv-legend 2.6s ease-in-out infinite; }
@keyframes inv-legend {
  0%, 100% { box-shadow: inset 0 0 10px rgba(255, 184, 48, 0.4), 0 0 5px rgba(255, 184, 48, 0.4); }
  50% { box-shadow: inset 0 0 14px rgba(255, 184, 48, 0.6), 0 0 12px rgba(255, 184, 48, 0.75); }
}
.panel-inventory .inv-slot:not(.empty):hover {
  border-color: var(--c-gold-light);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 10px rgba(232, 196, 106, 0.55);
}
.panel-inventory .inv-slot.drop-ok,
.panel-character .ch-slot.drop-ok {
  border-color: var(--c-good);
  box-shadow: 0 0 0 1px var(--c-good), 0 0 12px rgba(125, 220, 106, 0.6);
}
.panel-inventory .inv-slot.dragging-src > img { opacity: 0.3; filter: grayscale(0.6); }

/* Requirement not met: red tint like a classic MMO bag. */
.panel-inventory .inv-slot.unusable > img { filter: grayscale(0.55) brightness(0.8); }
.panel-inventory .inv-slot.unusable::after {
  content: ''; position: absolute; inset: 1px; border-radius: 2px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 60, 40, 0.18), rgba(200, 20, 10, 0.5) 85%),
    rgba(170, 20, 10, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 70, 0.7), inset 0 0 8px rgba(255, 50, 30, 0.55);
}

/* Badges (+N top-left, quantity bottom-right: style.css). Higher enhancement = hotter colour. */
.slot .plus.plus-mid { color: #ffd36b; }
.slot .plus.plus-hi {
  color: #ff9d4d;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 6px rgba(255, 120, 40, 0.9);
}
.panel-inventory .slot .qty, .panel-inventory .slot .plus, .panel-character .slot .plus { z-index: 2; }
.panel-inventory .slot .cd { z-index: 3; }
.panel-inventory .slot .cd-text { z-index: 4; }

/* New loot flash. */
.panel-inventory .inv-slot.inv-new { animation: inv-new 1.3s ease-out; }
@keyframes inv-new {
  0% { box-shadow: 0 0 0 2px var(--c-gold-light), 0 0 18px rgba(255, 240, 184, 0.95); transform: scale(1.08); }
  40% { transform: scale(1); }
  100% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 2px 7px rgba(0, 0, 0, 0.85); }
}

/* Footer: gold + sort. */
.panel-inventory .inv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-inventory .inv-gold {
  display: flex; align-items: center; gap: 7px;
  min-width: 150px; padding: 3px 14px 3px 5px;
  background: linear-gradient(90deg, rgba(232, 196, 106, 0.16), rgba(0, 0, 0, 0.28) 70%);
  border: 1px solid rgba(232, 196, 106, 0.38); border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 184, 0.12), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.panel-inventory .inv-coin { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 1px #000); }
.panel-inventory .inv-gold-val {
  font-size: 16px; font-weight: 600; color: var(--c-gold-light);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(232, 196, 106, 0.35);
  font-variant-numeric: tabular-nums;
}
.panel-inventory .inv-gold-unit { font-size: 12px; color: var(--c-muted); }
.panel-inventory .inv-hint {
  margin-top: -2px; font-size: 11px; line-height: 1.35; text-align: center; color: var(--c-muted); opacity: 0.85;
}

/* ------------------------------------------------------------------------------------------------
 * Tooltip content (itemTooltip / skillTooltip). Works inside .tooltip and standalone.
 * --------------------------------------------------------------------------------------------- */
.tt { min-width: 210px; font-size: 13px; line-height: 1.45; }
.tt .tt-title { font-size: 15px; font-weight: 600; color: var(--c-gold); line-height: 1.3; }
.tt .tt-sub { font-size: 12px; color: var(--c-muted); }
.tt .tt-sep { height: 1px; margin: 6px 0; background: linear-gradient(90deg, transparent, rgba(232, 196, 106, 0.45), transparent); }
.tt .tt-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.tt .tt-good { color: var(--c-good); }
.tt .tt-bad { color: var(--c-bad); }
.tt .tt-price { color: var(--c-gold); white-space: nowrap; }
.tt .tt-price.tt-bad { color: var(--c-bad); }
.tt .tt-price .gold-amount { font-weight: 600; }

.tt-item .tt-head {
  margin: -2px -4px 0; padding: 2px 4px 3px;
  border-left: 2px solid var(--rc, var(--r-common));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 75%);
}
.tt-item[data-rarity="epic"] .tt-head { background: linear-gradient(90deg, rgba(199, 125, 255, 0.16), transparent 80%); }
.tt-item[data-rarity="legendary"] .tt-head { background: linear-gradient(90deg, rgba(255, 184, 48, 0.2), transparent 80%); }
.tt-item .tt-name { text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.6); }
.tt-item[data-rarity="legendary"] .tt-name,
.tt-item[data-rarity="epic"] .tt-name { text-shadow: 0 1px 0 #000, 0 0 10px var(--rc); }
.tt .tt-plus { color: #ffd36b; }
.tt .tt-badge {
  display: inline-block; margin-top: 4px; padding: 0 8px;
  font-size: 11px; font-weight: 600; line-height: 17px; color: #2a1608;
  background: linear-gradient(180deg, #fff0b8, #e8c46a 55%, #a07a2a);
  border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tt .tt-k { color: #d7c7a6; }
.tt .tt-v { color: var(--c-text); font-weight: 500; white-space: nowrap; }
.tt .tt-stat.tt-bad .tt-k, .tt .tt-stat.tt-bad .tt-v { color: var(--c-bad); }
.tt .tt-enh { color: #ffd36b; font-weight: 500; }
.tt .tt-enhance { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: #d7c7a6; }
.tt .tt-enhance.muted { color: var(--c-muted); }
.tt .tt-stars { display: inline-flex; gap: 3px; margin-left: 2px; }
.tt .tt-stars i {
  display: block; width: 6px; height: 6px; transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(232, 196, 106, 0.35);
}
.tt .tt-stars i.on { background: #ffd36b; border-color: #fff0b8; box-shadow: 0 0 4px rgba(255, 211, 107, 0.9); }
.tt .tt-stars i.on.hi { background: #ff8a3d; border-color: #ffc59a; box-shadow: 0 0 5px rgba(255, 120, 40, 0.95); }
.tt .tt-use { font-size: 12.5px; }
.tt .tt-meta { font-size: 12px; color: var(--c-muted); }
.tt .tt-meta.tt-bad { color: var(--c-bad); }
.tt .tt-reqs { font-size: 12px; color: #d7c7a6; }
.tt .tt-req.tt-bad { color: var(--c-bad); font-weight: 500; }
.tt .tt-cmp { font-size: 12px; }
.tt .tt-cmp-h { margin-bottom: 2px; color: #d7c7a6; }
.tt .tt-cmp-row { padding-left: 6px; }
.tt .tt-desc {
  margin-top: 7px; font-size: 12px; font-style: italic; line-height: 1.5; color: #c9b58d;
}
.tt .tt-prices { font-size: 12px; }
.tt .tt-hint {
  margin-top: 7px; padding-top: 5px;
  border-top: 1px dashed rgba(232, 196, 106, 0.22);
  font-size: 11px; color: var(--c-muted);
}

.tt-skill .tt-name { color: var(--c-gold); text-shadow: 0 1px 0 #000, 0 0 10px rgba(232, 196, 106, 0.35); }
.tt .tt-rank { color: #d7c7a6; }
.tt .tt-rank.tt-enh { color: #ffd36b; }
.tt .tt-skill-meta { display: flex; flex-wrap: wrap; gap: 1px 12px; font-size: 12px; color: #d7c7a6; }
.tt .tt-mp { color: #8fc0ff; }
.tt .tt-eff { color: #a5e8a0; font-size: 12.5px; }
.tt .tt-est { color: var(--c-muted); font-weight: 400; }
.tt .tt-next { font-size: 12px; color: #b9d6ff; }
.tt .tt-next.tt-enh { color: #ffd36b; }
.tt .tt-next-h { color: var(--c-gold); font-weight: 500; }