/* The trading table sits with the other windows down the right, and shows the two offers
   side by side under the name of whoever is offering. It is shorter than a bag window on
   purpose, and scrolls when what is on the table does not fit. */

/* It keeps its own height instead of being squeezed by whatever else is open. A table is
   answered and then gone, and an Accept that has been pressed off the bottom of the column
   cannot be pressed at all: the column scrolls for the bags instead. */
#trade-window {
  flex: 0 0 auto;
  max-height: none;
}

/* Wrapped by TibiaScrollbar (see tibia-scrollbar.js): the wrapper half carries the box sizing
   that lets the table give way before the answers do (shrinking and scrolling so Accept and
   Reject are never pushed off the bottom of the window); the content half keeps the two
   offers arranged side by side, same as before wrapping. */
#trade-window .body.tibia-scroll-wrapper {
  flex: 0 1 auto;
  min-height: 0px;
  max-height: 150px;
}

#trade-window .body.tibia-scroll-content {
  display: flex;
  padding: 2px;
}

.trade-window-side {
  flex: 1 1 0;
  min-width: 0;
}

.trade-window-side-title {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The line down the middle that keeps one offer from reading as the other */
.trade-window-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 0px 3px;
  background-color: rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Each offer is laid out two squares across, the same squares a bag is drawn with, and
   what sits inside a bag follows the bag itself. */
.trade-window-rows {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 1px;
  justify-content: center;
}

/* The two answers sit on a bar of their own under the table, each taking half of it and
   big enough to be aimed at without care. It is not the window footer: that one is the four
   pixel grip a window is resized by, and buttons put in it are squeezed to nothing and spill
   over whatever window comes next down the column. */
.trade-window-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  background-image: url("../png/bg2.png");
  border-top: 1px solid rgba(0, 0, 0, 0.6);
}

/* Same two-state gray graphic as every modal's Cancel/Confirm footer button (see modal.css) --
   Accept/Reject is the same kind of answer, just living in a window instead of a modal */
.trade-window-actions button {
  flex: 1 1 0;
  margin: 0px;
  height: 22px;
  font-size: 11px;
  border-radius: 3px;
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
  border: 0;
  box-shadow: none;
  outline: none;
  filter: none;
  color: #ddd;
}

.trade-window-actions button:hover {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
}

.trade-window-actions button:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100%;
}

.window {
  display: none;
  position: relative;
  color: grey;
  flex-direction: column;
  flex: 0 1 auto;
  background-image: url("../png/bg3.png");
  min-height: 0;
  /* Never taller than the column it sits in */
  max-height: 100%;
}

/* Plain windows (containers/backpacks among them) are never wrapped by TibiaScrollbar, so
   this rule keeps its original, un-split form for them. A window that IS wrapped (see
   tibia-scrollbar.js) gets its wrapper excluded here -- the wrapper only needs box sizing
   (below), while a separate descendant-selector rule gives its content pane this same child
   arrangement. A window with its own more specific rule (skill/trade/battle) overrides
   either half by simply being ID-scoped. */
.window > .body:not(.tibia-scroll-wrapper) {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  min-height: 40px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  overflow-y: scroll;
  scrollbar-width: thin;
}

.window > .body.tibia-scroll-wrapper {
  min-height: 40px;
}

.window .body.tibia-scroll-content {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}

.window > .header {
  height: 22px;
  display: flex;
  align-items: center;
  cursor: move;
  padding-left: 4px;
  background-image: url("../png/bg4.png");
}

.window > .header > button {
  flex: 0 0 auto;
}

.window > .header > .title {
  flex: 1 1 auto;
  padding-left: 8px;
  pointer-events: none;
}

.window > .header > .window-lock {
  margin-left: auto;
  font-size: 10px;
  line-height: 14px;
  padding: 0px;
}

.window.locked > .header {
  cursor: default;
}

.window.locked > .footer {
  cursor: default;
}

.window-title-icon { display: none; }

body:not(.mobile-layout) .container-window {
  flex: 0 0 auto;
  max-height: none;
}

body:not(.mobile-layout) .window > .header {
  flex: 0 0 22px;
  min-width: 0;
}

body:not(.mobile-layout) .window > .header > .title {
  order: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 3px;
  font-size: 11px;
}

body:not(.mobile-layout) .window > .header > .window-title-icon {
  display: block;
  order: -1;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  image-rendering: pixelated;
  pointer-events: none;
}

body:not(.mobile-layout) .window > .header > button { order: 1; }
body:not(.mobile-layout) .window > .header > [action="close"] { order: 4; }
body:not(.mobile-layout) .window > .header > [action="minimize"] { order: 3; }
body:not(.mobile-layout) #battle-window > .header > .battle-window-filter {
  order: 1;
}

body:not(.mobile-layout) .window > .header > button.symbol-button.small {
  width: 12px;
  height: 12px;
  min-width: 12px;
  max-width: 12px;
  margin: 0px 1px;
  padding: 0px;
  border: 0px;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  color: transparent;
  font-size: 0px;
  line-height: 0;
  image-rendering: pixelated;
}

body:not(.mobile-layout) .window > .header > button.symbol-button.small:hover,
body:not(.mobile-layout) .window > .header > button.symbol-button.small:focus-visible {
  border: 0px;
  box-shadow: none;
  background-color: transparent;
}

body:not(.mobile-layout) .window > .header > button[action="close"] {
  background-image: url("../png/miniwindow/exit-button-small-up.png");
}

body:not(.mobile-layout) .window > .header > button[action="close"]:active {
  background-image: url("../png/miniwindow/exit-button-small-down.png");
}

body:not(.mobile-layout) .window > .header > button.window-min-button {
  background-image: url("../png/miniwindow/min-button-small-up.png");
}

body:not(.mobile-layout) .window > .header > button.window-min-button:active {
  background-image: url("../png/miniwindow/min-button-small-down.png");
}

body:not(.mobile-layout) .window > .header > button.window-max-button {
  background-image: url("../png/miniwindow/max-button-small-up.png");
}

body:not(.mobile-layout) .window > .header > button.window-max-button:active {
  background-image: url("../png/miniwindow/max-button-small-down.png");
}

body:not(.mobile-layout) .window > .header > .battle-window-filter {
  background-image: url("../png/miniwindow/button-contextmenu-12x12-idle.png");
}

body:not(.mobile-layout) .window > .header > .battle-window-filter:active {
  background-image: url("../png/miniwindow/button-contextmenu-12x12-pressed.png");
}

body:not(.mobile-layout) .window > .header > .window-lock {
  order: 2;
  margin-left: 2px;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-lock::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("../png/miniwindow/hide-pin.png") -12px 0 no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

.window.locked .window-lock::after {
  background-position: -12px -24px;
}

.window .window-lock:active::after {
  background-position: -12px -12px;
}

body:not(.mobile-layout) .window > .header > .modal-title-icon {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
}

.window > .footer {
  position: relative;
  height: 4px;
  cursor: ns-resize;
  background: transparent;
}

.window > .footer::before {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 12px;
  height: 12px;
  background: transparent url("../png/miniwindow/windowresizer.png") left bottom / 12px 12px no-repeat;
  image-rendering: pixelated;
  /* The grip is what people actually aim at, so it has to be what they can grab. The footer
     strip behind it is 4px tall, and this sits 12px tall over the corner -- with pointer-events
     off (as it was) the visible handle was decoration and the real target was a four-pixel line
     most attempts missed entirely, which read as "the window simply does not resize". A pseudo
     element hit-tests as its parent, so the mousedown still arrives with .footer as the target. */
}

.friend-entry {
  cursor: pointer;
  width: 100%;
}

.friend-entry:hover {
  color: white !important;
}

#skill-window {
  /* Stay inside the 180px side column. The previous fixed 190px width left the values
     under the right edge of the column, where they were clipped. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#skill-window .body {
  display: block;
  /* The list ends at Fishing: it scrolls inside the window instead of pushing the window
     past the bottom of the column and taking the last skills off the screen. */
  overflow-y: auto;
  /* Keep the scrollbar lane reserved even while the complete list fits. When the window is
     shortened, the scrollbar appears without changing the width of the skill rows. */
  scrollbar-gutter: stable;
}