/* The skills are a list read from top to bottom, so the window is a column and every line in
   it takes the whole width. Left as the flex row the other windows use, each line shrinks to
   whatever is written on it, they sit beside each other, and a long experience number pushes
   the whole thing wider than the frame it is in. */
#skill-window .body {
  display: flex;
  flex-direction: column;
  /* One column and one only. Wrapping is what the other windows want, but a column that
     wraps starts a second column off to the right once it is full, and that is where the
     fighting skills were going: outside the frame, unreachable. */
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
  padding: 6px;
  overflow-x: hidden;
}

#skill-window .outer-skill-wrapper {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0px;
  margin-bottom: 6px;
}

/* The lines that divide the groups run the whole width and nothing more */
#skill-window hr {
  flex: 0 0 auto;
  width: 100%;
  margin: 4px 0px;
}

/* Hunting Analyser: same one-column list of label/value rows the skill window uses, reusing
   its global .skill-wrapper row styling directly rather than duplicating it. */
#hunting-analyser-window .body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 6px;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
}

#hunting-analyser-window .analyser-content { flex: 0 0 auto; min-width: 0; }
.analyser-section + .analyser-section { border-top: 1px solid #292929; margin-top: 7px; padding-top: 6px; }
.analyser-section h3 { margin: 0 0 4px; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #bababa; letter-spacing: 0; }
.analyser-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 10px; color: #c4c4c4; }
.analyser-row > [data-analyser] { min-width: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; color: #eee; }
.analyser-balance { border-top: 1px solid #555; margin-top: 4px; padding-top: 5px; font-weight: bold; }
.analyser-balance > [data-analyser] { color: #bcbcbc; }
.analyser-balance > [data-balance="positive"] { color: #66ee88; }
.analyser-balance > [data-balance="negative"] { color: #ff7373; }
.analyser-overlay-toggle { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; color: #ccc; }
.analyser-overlay-toggle input { margin: 0; }
#hunting-analyser-window:has(> .body[style*="display: none"]) > .trade-window-actions { display: none; }

#friend-window > .body { box-sizing: border-box; min-height: 106px; }
#friend-window .friend-entry { min-height: 18px; line-height: 18px; }
#battle-window > .body { box-sizing: border-box; min-height: 86px; }
#friend-window, #battle-window, #hunting-analyser-window { flex-shrink: 0; }

#hunting-analyser-window hr {
  flex: 0 0 auto;
  width: 100%;
  margin: 0px;
}

.bar-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 7px;
  grid-gap: 2px;
}

/* Clicking a progress row folds only its bar. Level never receives the click listener and
   therefore always keeps its progress visible. */
.bar-wrapper.bar-collapsed {
  grid-template-rows: auto;
}

.bar-wrapper.bar-collapsed > .bar {
  display: none;
}

.skill-wrapper {
  display: grid;
  /* The label takes what is left over so it never wraps: the value only takes what it needs */
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  grid-gap: 6px;
}

.skill-wrapper > .skill {
  text-align: right;
  white-space: nowrap;
}

.skill-wrapper > .skill.skill-boosted {
  color: #33d06f;
}

.skill-wrapper > .skill.skill-penalized {
  color: #ff6b6b;
}

/* A long number takes what it needs and the name gives way, cut short rather than pushing
   the line out of the window */
.skill-wrapper > span:first-child {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-icon {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  vertical-align: middle;
}

.skill-icon.icon-sword {
  background-image: url("../png/icon_sword.png");
}

.skill-icon.icon-axe {
  background-image: url("../png/icon_axe.png");
}

.skill-icon.icon-club {
  background-image: url("../png/icon_club.png");
}

.skill-icon.icon-distance {
  background-image: url("../png/icon_distance.png");
}

.skill-icon.icon-fishing {
  background-image: url("../png/icon_fishing.png");
}

.skill-icon.icon-fist {
  background-image: url("../png/icon_fist.png");
}

.skill-icon.icon-magic {
  background-image: url("../png/icon_magic.png");
}

.skill-icon.icon-shielding {
  background-image: url("../png/icon_shielding.png");
}

.bar-wrapper > .bar > .value {
  background: #00a832;
  width: 20%;
  height: 100%;
  position: relative;
}


.bar-wrapper > .bar {
  box-sizing: border-box;
  border: 1px solid black;
  background-image: url("../png/bg2.png");
  width: 100%;
  height: 7px;
  position: relative;
  cursor: pointer;
}

/* Classic Tibia uses distinct colours for experience and stamina progress. */
#skill-window .outer-skill-wrapper[skill="level"] .value {
  background: #c93232;
}

#skill-window .outer-skill-wrapper[skill="stamina"] .value {
  background: #e6ad28;
}

/* Stamina's own three tier colors on top of the default gold above (see
   SkillWindow.__setStaminaTierClass) -- Happy Hours, the penalty range, and empty. The
   ordinary middle range has no class at all, so the plain gold above still shows through it
   unchanged. Matches that same selector's specificity (id + attribute + class) exactly, one
   class more for each tier, since a plain "class only" rule placed anywhere else in this file
   would lose to it. */
#skill-window .outer-skill-wrapper[skill="stamina"] .value.bar-stamina-happy {
  background: #33e06a;
}

#skill-window .outer-skill-wrapper[skill="stamina"] .value.bar-stamina-penalty {
  background: #ff8c1a;
}

#skill-window .outer-skill-wrapper[skill="stamina"] .value.bar-stamina-empty {
  background: #cc3333;
}