/* Zakładka Zadania (static/quests.js). Siatka paneli jak w Wędrowcach (wanderers.css), bo każda
   zakładka ma własną kopię układu. Filtry reużywają .army-filter* z army.css, tabela .wnd-table*,
   sortowanie .wnd-sort*; karta to karta encyklopedii (encyclopedia.css) — dzięki temu wyglądają tak samo. */

body:not(.page-quests) .quests-shell {
  display: none !important;
}

.quests-shell {
  /* Lite odpowiedniki --panel (jak w wanderers.css): przyklejona głowa tabeli i pierwsza kolumna nie mogą przepuszczać wierszy. */
  --wnd-solid: #241c14;
  --wnd-solid-hover: #2f2519;
  --wnd-solid-selected: #3a2e1c;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 0;
  /* Boki mają stałą szerokość. Środek startuje od --q-main-w (jak u Wędrowców) i rośnie
     (--q-main-used ustawia quests.js), gdy w tabeli brakuje miejsca i tekst się ucina,
     aż wszystko wejdzie albo boki dojdą do krawędzi strony. */
  --q-side-w: 340px;
  --q-main-w: 70.875rem;
  width: 100%;
  margin: 0 auto;
  padding: 0.65rem 1rem 1rem;
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.quests-content {
  display: grid;
  /* minmax(0, …) kurczy środek, gdy na --q-main-used nie ma miejsca — boki zostają przy krawędzi. */
  grid-template-columns: var(--q-side-w) minmax(0, var(--q-main-used, var(--q-main-w))) var(--q-side-w);
  justify-content: center;
  grid-template-areas: "setup main detail";
  gap: 0.5rem 1rem;
  min-height: 0;
  align-items: start;
}

/* .quests-setup, .quests-main, .quests-detail: patrz components.css (card) */

.quests-setup {
  grid-area: setup;
}

.quests-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  /* Tabela jest całą treścią: krawędź panelu jest krawędzią tabeli (ramkę zdejmuje .wnd-table-wrap). */
  padding: 0;
  overflow: hidden;
}

/* Lista jest w panelu z overflow: hidden. Bez min-width: 0 flex nie odda szerokości
   i tabela ucięta przy krawędzi strony nie dałaby się przewinąć. flex + min-height
   jak #wnd-list w style.css: długa tabela przewija się w panelu, a nie pod jego ramką. */
.quests-main > #quests-list {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Na szerokim ekranie wysokość bierze panel (.panel-stack), a tabela wypełnia go i przewija się w środku.
   Poniżej 1100 px zostaje limit z media query (#quests-list .wnd-table-wrap) — ten selektor jest słabszy. */
@media (min-width: 1101px) {
  .quests-main > #quests-list > .wnd-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

.quests-detail {
  grid-area: detail;
}

.quests-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Nad 1100 px tytuł bierze tyle, ile odda panel (fitMainPanel). Poniżej zostaje limit
   z wanderers.css, a na telefonie węższy (sekcja 640px), żeby było widać resztę kolumn. */
@media (min-width: 1101px) {
  #quests-list .wnd-table .wnd-first {
    max-width: none;
  }
}

@media (max-width: 1200px) {
  .quests-shell {
    --q-side-w: 280px;
  }
}

@media (max-width: 1100px) {
  .quests-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "setup"
      "main"
      "detail";
    row-gap: 0.75rem;
  }

  /* Jak u Wędrowców: tabela przewija się w pionie sama, nagłówek kolumn zostaje na ekranie. */
  #quests-list .wnd-table-wrap {
    max-height: calc(100dvh - var(--site-header-h) - 7rem);
  }
}

@media (max-width: 760px) {
  .quests-shell {
    padding: 0.65rem 16px 1rem;
  }
}

@media (max-width: 640px) {
  /* Tytuł zadania skraca się wielokropkiem, żeby na telefonie było widać kolumny przewijane w bok. */
  #quests-list .wnd-table .wnd-first {
    max-width: 9rem;
  }
}