/* Quest log page of the game menu (see game-menu.css and theme.css) */
/* It fills the menu window and stacks its two panels on narrow screens */
.game-menu-page.quest-log-page {
  gap: 8px;
  overflow: hidden;
}

/* Toolbar: search box and filter tabs */
.quest-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The search box (shared look, search icon and clear button, see text-field.css) */
.quest-log-toolbar > .quest-log-search-wrapper {
  flex: 1 1 180px;
}

/* Filters: shared tab look (ui-tabs, see controls.css) */
.quest-log-filters {
  flex: 0 1 auto;
}

/* Panels: quest list on the left, missions on the right */
.quest-log-panels {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(160px, 34%) 1fr;
  gap: 8px;
  min-height: 0;
}

.quest-log-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.quest-log-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 5px;
  color: var(--color-accent);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.quest-log-count {
  color: var(--color-text-soft);
  letter-spacing: 0.5px;
}

/* Share of completed quests */
.quest-log-progress {
  height: 4px;
  margin: 0 10px 6px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.quest-log-progress-fill {
  width: 0%;
  height: 100%;
  background-image: linear-gradient(to right, var(--color-accent-dark), var(--color-accent));
  box-shadow: 0 0 4px var(--color-accent-glow);
  transition: width 0.3s;
}

.quest-log-list,
.quest-log-missions {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 6px 6px;
}

/* Quest entries */
.quest-log-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background-color 0.12s, border-color 0.12s;
}

.quest-log-entry:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.quest-log-entry.selected {
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: 0 0 4px var(--color-accent-glow);
}

.quest-log-entry.completed .quest-log-entry-name {
  color: var(--color-text-muted);
}

.quest-log-entry-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status icon: a ring while in progress, a gold check when completed */
.quest-log-entry-icon {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid #8a8a8a;
  border-radius: 50%;
}

.quest-log-entry.selected .quest-log-entry-icon {
  border-color: var(--color-accent-text);
}

.quest-log-entry.completed .quest-log-entry-icon {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.quest-log-entry.completed .quest-log-entry-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0px;
  width: 3px;
  height: 5px;
  border: solid var(--color-accent-darker);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.quest-log-entry-tracked {
  flex: 0 0 auto;
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-dark);
  border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.45);
}

/* Details header: quest name, status and tracker button */
.quest-log-details-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quest-log-details-heading {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.quest-log-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-accent-text);
}

.quest-log-status {
  padding: 1px 7px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 7px;
  border: 1px solid transparent;
}

.quest-log-status:empty {
  display: none;
}

.quest-log-status.active {
  color: var(--color-text-soft);
  border-color: #6e6e6e;
  background-color: rgba(0, 0, 0, 0.35);
}

/* Light text on a dark background like the active status: dark text on gold was hard to read at this size */
.quest-log-status.completed {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: var(--color-success-dark);
}

.modal button.quest-log-track {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 12px;
  font-size: 10px;
  border: 1px solid black;
  border-radius: 5px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
}

.modal button.quest-log-track:not(:disabled):hover,
.modal button.quest-log-track.selected {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

/* Disabled: the same look as the other disabled buttons (see controls.css) */
.modal button.quest-log-track:disabled {
  cursor: default;
  opacity: 0.4;
  filter: grayscale(1);
}

.modal button.quest-log-track:disabled:hover {
  border-color: black;
  box-shadow: var(--shadow-raised);
}

/* Missions: numbered markers joined by a line */
.quest-log-missions {
  padding: 10px 10px 4px;
}

.quest-log-mission {
  position: relative;
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
}

/* The line to the next mission */
.quest-log-mission:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.15);
}

.quest-log-mission-marker {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid #6e6e6e;
  border-radius: 50%;
  background-color: var(--color-surface-bottom);
}

.quest-log-mission.latest .quest-log-mission-marker {
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent-glow);
}

.quest-log-mission.completed .quest-log-mission-marker {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.quest-log-mission.completed .quest-log-mission-marker::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--color-accent-darker);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.quest-log-mission-card {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid black;
  border-radius: 6px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
}

.quest-log-mission.latest .quest-log-mission-card {
  border-color: var(--color-accent-dark);
}

.quest-log-mission-name {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: bold;
}

.quest-log-mission-description {
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Placeholder of an empty list */
.quest-log-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* Narrow screens: the quest list goes above the missions */
@media (max-width: 640px) {
  .quest-log-panels {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(90px, 38%) 1fr;
  }

  .modal button.quest-log-filter {
    padding: 4px 7px;
  }
}