/*
 * Options window in the dark style of the HUD (the panels next to the equipment): the textures bg3 / bg4, buttons
 * like the buttons of the HUD, dark areas. Also the pages Loot List and Hunt Analyser (src/hunt-panel.js).
 */

#settings-modal.options-window {
  width: 420px;
  padding: 0;
  color: #c8c8c8;
  font: 11px Verdana, Tahoma, Arial, sans-serif;
  border: 1px solid black;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
  /* The dark texture of the HUD panels (equipment, skills, battle) */
  background-color: #1e1e1e;
  background-image: url("/png/bg3.png");
}

#settings-modal.options-window .modal-header {
  background-image: url("/png/bg4.png");
  color: #e6e6e6;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 4px;
  text-align: center;
  border-bottom: 1px solid black;
}

#settings-modal.options-window .modal-body {
  box-shadow: none;
  padding: 10px 12px 10px 12px;
}

/* Pages: only the active one is shown (see Settings.showOptionsPage) */
#settings-modal .options-page {
  display: none;
}

#settings-modal .options-page.active {
  display: block;
}

/* Main page: button on the left, description on the right */
#settings-modal .options-row {
  display: flex;
  align-items: center;
  margin: 0 0 7px 0;
}

#settings-modal .options-row span {
  margin-left: 12px;
  white-space: nowrap;
  color: #b8b8b8;
}

#settings-modal .options-row.disabled span {
  color: #7a7a7a;
}

/* Buttons like the buttons of the HUD */
#settings-modal .options-button {
  min-width: 96px;
  height: 22px;
  padding: 0 8px;
  margin: 0;
  color: white;
  font: bold 10px Verdana, Tahoma, Arial, sans-serif;
  background-image: url("/png/bg3.png");
  border: 1px solid black;
  border-radius: 4px;
  cursor: pointer;
}

#settings-modal .options-button:hover {
  border-color: white;
  background-image: url("/png/bg2.png");
}

#settings-modal .options-button.selected {
  border-color: #c8a24a;
  color: #f0d080;
}

/* A line between the content and the buttons */
#settings-modal .options-separator {
  height: 1px;
  margin: 10px 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), grey, rgba(0, 0, 0, 0));
}

#settings-modal .options-footer {
  text-align: right;
}

#settings-modal .options-footer .options-button {
  min-width: 60px;
  margin-left: 6px;
}

/* The dark area holding the options of a sub page */
#settings-modal .options-inset {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid black;
  border-radius: 4px;
}

#settings-modal .options-check {
  display: flex;
  white-space: nowrap;
  align-items: center;
  margin: 4px 0;
  cursor: pointer;
}

#settings-modal .options-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px 0;
}

/* Small square checkbox with a light tick */
#settings-modal .options-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin: 0 7px 0 0;
  background: #111;
  border: 1px solid #555;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}

#settings-modal .options-check input[type="checkbox"]:checked {
  border-color: #c8a24a;
}

#settings-modal .options-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid #f0d080;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#settings-modal .options-select {
  flex: 1 1 auto;
  background: #111;
  color: #d0d0d0;
  font: 11px Verdana, Tahoma, Arial, sans-serif;
  border: 1px solid #555;
  border-radius: 3px;
}

#settings-modal .options-slider {
  flex: 1 1 auto;
}

#settings-modal .options-value {
  min-width: 34px;
  text-align: right;
}

/* Loot List */
#settings-modal .loot-premium {
  line-height: 15px;
  color: #b8b8b8;
}

#settings-modal .loot-hint {
  color: #8a8a8a;
}

#settings-modal .loot-count {
  color: #d0d0d0;
  font-weight: bold;
}

#settings-modal .loot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 74px;
  max-height: 222px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #000;
}

#settings-modal .loot-square {
  width: 34px;
  height: 34px;
  background: #151515;
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
}

#settings-modal .loot-square:hover {
  border-color: #b04040;
}

#settings-modal .loot-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

#settings-modal .loot-search {
  display: none;
  margin-top: 6px;
}

#settings-modal .loot-search-results {
  max-height: 150px;
  overflow-y: auto;
  background: #111;
  border: 1px solid #444;
}

#settings-modal .loot-result {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
  cursor: pointer;
}

#settings-modal .loot-result:hover {
  background: #2c2c2c;
  color: white;
}

#settings-modal .loot-result .loot-icon {
  width: 24px;
  height: 24px;
}

/* Hunt Analyser */
#settings-modal .hunt-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

#settings-modal .hunt-tabs .options-button {
  min-width: 0;
  flex: 1 1 0;
}

#settings-modal .hunt-body {
  height: 260px;
  overflow-y: auto;
}

#settings-modal .hunt-head {
  color: #8a8a8a;
  margin-bottom: 6px;
}

#settings-modal .hunt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

#settings-modal .hunt-table th {
  text-align: left;
  color: #f0d080;
  font-weight: bold;
  border-bottom: 1px solid #444;
  padding: 2px 3px;
}

#settings-modal .hunt-table td {
  padding: 2px 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#settings-modal .hunt-table .hunt-player td {
  color: #e6e6e6;
  font-weight: bold;
}

#settings-modal .hunt-table .hunt-indent {
  padding-left: 14px;
}

#settings-modal .hunt-bar {
  display: inline-block;
  width: 50px;
  height: 7px;
  background: #111;
  border: 1px solid #000;
  vertical-align: middle;
}

#settings-modal .hunt-bar > div {
  height: 100%;
  background: #b04040;
}

#settings-modal .hunt-total {
  color: #e6e6e6;
  font-weight: bold;
  text-align: right;
}

#settings-modal .hunt-plus {
  color: #5fd35f;
}

#settings-modal .hunt-minus {
  color: #e05050;
}

/* Effects of the General options on the game screen */
body.hide-creature-names #text-wrapper .character-name {
  visibility: hidden;
}

body.hide-text-effects #text-wrapper .floating-text {
  display: none;
}

/* Hotkeys page: label, sunken list of the 36 hotkeys, text field */
#settings-modal .options-label {
  margin: 2px 0 3px 0;
}

#settings-modal .options-list {
  height: 168px;
  overflow-y: auto;
  margin-bottom: 8px;
  background: #111;
  border: 1px solid;
  border-color: #444;
}

#settings-modal .options-list-item {
  padding: 1px 4px;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Hotkeys that are sent automatically are shown brighter */
#settings-modal .options-list-item.auto {
  color: #e8e8e8;
}

#settings-modal .options-list-item.selected {
  background: #3a3a3a;
  color: #ffffff;
}

#settings-modal .options-text {
  box-sizing: border-box;
  width: 100%;
  height: 20px;
  margin-bottom: 4px;
  padding: 1px 4px;
  background: #111;
  color: #e0e0e0;
  font: 11px Verdana, Tahoma, Arial, sans-serif;
  border: 1px solid;
  border-color: #444;
}