/* HiveSolutions: wrap the project (kanban) board into rows instead of one long
   horizontally-scrolling strip.

   Stock Gitea 1.27 sets:
     #project-board  { flex-wrap: nowrap; overflow: auto; }
     .project-column { flex: 0 0 auto; width: 320px; }
     .project-column:first-child { margin-left: auto !important; }
     .project-column:last-child  { margin-right: auto !important; }
   so 8 columns become a 2560px strip you have to scroll sideways.

   Here the columns wrap 4-per-row on wide screens (8 columns => 4 + 4) and the
   rows share the board height, so the board fills the page with no sideways
   scrolling. Column width is a percentage, not a fixed 320px, so each row
   always spans the full width. Card lists inside a column keep their own
   vertical scrollbar (Gitea's .project-column > .ui.cards rule). */

#project-board {
  flex-wrap: wrap;
  align-content: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}

#project-board .project-column {
  /* no grow: a partly-filled last row keeps normal column width instead of
     stretching one column across the whole page */
  flex: 0 1 calc(25% - 1rem);
  width: auto;
  max-width: none;
  min-height: 260px;
  /* Cap the row height so BOTH rows fit on screen; a column with many cards
     scrolls internally (Gitea's .project-column > .ui.cards is overflow:auto)
     instead of pushing the second row below the fold. */
  max-height: calc((100vh - 300px) / 2);
  margin-bottom: 1rem !important;
}

/* Fullscreen has no repo header/navbar, so there is more height to divide. */
.fullscreen.projects-view #project-board .project-column {
  max-height: calc((100vh - 120px) / 2);
}

/* Gitea centres a single row with auto side margins; that fights wrapping. */
#project-board .project-column:first-child,
#project-board .project-column:last-child {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

@media (max-width: 1400px) {
  #project-board .project-column { flex-basis: calc(33.3333% - 1rem); }
}

@media (max-width: 1100px) {
  #project-board .project-column { flex-basis: calc(50% - 1rem); }
}

@media (max-width: 800px) {
  #project-board .project-column { flex-basis: calc(100% - 1rem); }
}

/* ==========================================================================
   Status quick-filter (rendered by hive-status-filter.js)
   ========================================================================== */

/* --- dashboard sidebar: dot | name (left) | count (right) ---------------
   Gitea's .ui.secondary.vertical.filter.menu .item is a space-between flex
   row, which pushed our bare text node to the far right and left the dot
   stranded on the left. Give the name flex:1 so it sits next to the dot and
   the count is the only thing pinned right - matching "Assigned to you  1". */

.hive-status-menu {
  margin-top: 0.75em;
}

.hive-status-menu .hive-status-header {
  font-weight: 600;
  opacity: 0.6;
  cursor: default;
  text-transform: none;
}

.hive-status-menu .hive-status-item {
  display: flex !important;
  align-items: center;
  gap: 0.5em;
  text-align: left;
}

.hive-status-menu .hive-status-name {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-status-menu .hive-status-count {
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.hive-status-menu .hive-status-clear .hive-status-name {
  opacity: 0.75;
}

/* --- shared dot --- */
.hive-status-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: var(--color-text-light-2, var(--color-secondary, #888));
}

/* --- repo issue list: horizontal pill bar ------------------------------- */
.hive-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin: 0.5em 0 1em;
  padding-bottom: 0.75em;
  border-bottom: 1px solid var(--color-light-border, var(--color-secondary, rgba(128,128,128,.35)));
}

.hive-status-bar-label {
  font-weight: 600;
  opacity: 0.6;
  margin-right: 0.25em;
}

.hive-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28em 0.7em;
  border: 1px solid var(--color-light-border, var(--color-secondary, rgba(128,128,128,.35)));
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-menu);
  line-height: 1.4;
  white-space: nowrap;
}

.hive-status-pill:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.hive-status-pill.active {
  border-color: var(--color-primary);
  background: var(--color-active);
  font-weight: 600;
}

.hive-status-pill .hive-status-count {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  padding-left: 0.15em;
}

.hive-status-pill.hive-status-clear {
  border-style: dashed;
  opacity: 0.85;
}