/* The project board as a full-window, Jira-style board.
 *
 * Forgejo sizes columns at a fixed 320px and `calc(100vh - 450px)` high, centred in the page,
 * so a board of five columns uses a third of a wide screen and ends halfway down it. Here the
 * page is made exactly one window high, the board takes whatever height the header leaves,
 * columns share the full width (scrolling sideways once they no longer fit at 280px), and each
 * column scrolls its own cards under a header that stays put.
 *
 * Everything is scoped to `.view-project`, the class Forgejo puts on a project's page (org and
 * repo projects alike), so no other page changes. Selectors were read off Forgejo 16.0. */

/* One window high: the page wrapper stops growing with its content, and each level down to
 * the board passes on the height it has left. The footer is outside the wrapper, below the fold. */
.full.height:has(> .view-project) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.page-content.view-project {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The org banner (avatar, name, description) above the tabs is dead weight on a board. Its
 * `tw-flex` is an !important utility, hence the !important here. */
.page-content.view-project > .ui.container:has(> #org-info) {
  display: none !important;
}

/* The tabs above stay in Forgejo's centred 1280px column; widen them to line up with the board. */
.page-content.view-project .ui.ui.ui.container:not(.fluid) {
  --container-width: 100%;
}

.page-content.view-project > .ui.container.fluid.padded {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.75rem;
}

/* The project's own description; with none, only its divider shows. */
.view-project .content.markup:empty,
.view-project .content.markup:empty + .divider {
  display: none;
}

.view-project #project-board {
  flex: 1;
  min-height: 0;
}

.view-project .board {
  height: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.view-project .project-column {
  flex: 1 1 0;
  min-width: 280px;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0.25rem 0.2rem 0.25rem 0.25rem !important;
  border-radius: 0;
  overflow: hidden;
}

.view-project .project-column + .project-column {
  border-inline-start: none !important;
}

.view-project .project-column:first-child {
  border-start-start-radius: var(--border-radius);
  border-end-start-radius: var(--border-radius);
}

.view-project .project-column:last-child {
  border-start-end-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}

/* Every column gets the same quiet grey. A column's own colour is an inline
 * `background: … !important`, which no stylesheet outranks, but an inset shadow paints over the
 * background, so a big one hides it. (Forgejo's --color-project-column-bg is undefined in this
 * theme.) The inline text colour is undone through the header and divider that inherit it. */
.view-project .project-column {
  box-shadow: inset 0 0 0 100vmax var(--color-box-header);
}

.view-project .project-column-header,
.view-project .project-column > .divider {
  color: var(--color-text);
}

.view-project .project-column-header {
  padding: 0.25rem 0.25rem 0.25rem;
}

.view-project .project-column > .divider {
  margin: 0 0 0.25rem;
  opacity: 0.15;
}

.view-project .project-column > .cards {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 0.5rem;
  padding-inline-end: 0.2rem !important;
  scrollbar-width: thin;
}

/* Cards in the page colour: white on the grey column in light, darker than it in dark (where
 * Forgejo's own card colour matches the column and the cards vanish into it). */
.view-project .issue-card {
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--color-body);
}