/* thread-rows.css
 *
 * One divided card of post-card-style rows on thread lists and the
 * overview Recent/Active/Popular tabs.
 */

#thread-list {
  min-width: 0;
}

#thread-list > .thread {
  border: 0;
  border-left: 1px solid var(--color-stroke-weak);
  border-right: 1px solid var(--color-stroke-weak);
  border-radius: 0;
  background: var(--color-surface-weak);
  margin-bottom: 0;
  padding: var(--space-medium) var(--space-large);
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

#thread-list .thread-email,
#thread-list .thread-email.row,
#thread-list .thread-summary,
#thread-list .thread-info {
  margin: 0;
  padding: 0;
  --bs-gutter-x: 0;
}

#thread-list .thread-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-medium);
}

#thread-list > :not(.thread) + .thread {
  border-top: 1px solid var(--color-stroke-weak);
  border-top-left-radius: var(--border-radius-xl);
  border-top-right-radius: var(--border-radius-xl);
}

#thread-list > .thread + .thread {
  border-top: 1px solid var(--color-stroke-weak);
}

#thread-list > .thread:has(+ :not(.thread)),
#thread-list > .thread:last-child {
  border-bottom: 1px solid var(--color-stroke-weak);
  border-bottom-left-radius: var(--border-radius-xl);
  border-bottom-right-radius: var(--border-radius-xl);
}

#thread-list .thread-title,
#thread-list .thread-title a,
#thread-list a.thread-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: var(--line-height-default);
  letter-spacing: -0.16px;
}

/* Clamp only what jquery.expander truncated (it adds > .details) and
   hasn't expanded. body.js-enabled lands in the same ready tick as the
   expander setup, so until then every preview stays at two lines. */
body:not(.js-enabled) #thread-list .expander,
#thread-list .expander:not(.expanded):has(> .details) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-height: calc(2 * 1em * var(--line-height-default));
}

#thread-list .expander {
  /* Inline style="color:#999" on HyperKitty's expander. */
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  user-select: text;
  position: relative;
}

/* jquery.expander injects expandText '\n[View More]'. Keep it on the
   second line so it stays clickable without a third-line bleed. */
#thread-list .expander .read-more {
  display: inline;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-width: 40%;
  padding-left: 12px;
  background: var(--color-surface-weak);
  white-space: nowrap;
}

#thread-list .expander .read-less {
  display: none;
}

/* HyperKitty's beforeExpand/onCollapse swap .collapsed for .expanded. */
#thread-list .expander.expanded .read-less {
  display: inline;
}

#thread-list .sender-name,
#thread-list .thread-date,
#thread-list .list-stats,
#thread-list .likestatus,
#thread-list .likestatus a,
#thread-list .thread-summary .text-muted {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  text-decoration: none;
}

/* Bootstrap .text-muted is color: #6c757d !important. */
@layer boost-important {
  #thread-list .thread-summary .text-muted {
    color: var(--color-text-secondary) !important;
  }
}

#thread-list .thread-date,
#thread-list .list-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#thread-list .list-stats {
  gap: 0;
}

#thread-list .sender.gravatar,
#thread-list .circle,
#thread-list .thread-summary > .p-2 {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* Bootstrap .p-2 is padding: .5rem !important. */
@layer boost-important {
  #thread-list .sender.gravatar,
  #thread-list .circle,
  #thread-list .thread-summary > .p-2 {
    padding: 0 !important;
  }
}

#thread-list .thread-summary > .flex-fill,
#thread-list .thread-summary > .ml-auto {
  width: auto;
  height: auto;
}

#thread-list .circle img,
#thread-list .gravatar img,
#thread-list img.gravatar,
#thread-list .sender.circle img {
  width: 48px;
  height: 48px;
}

.overview .list-group,
.overview .discussions .list-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-stroke-weak);
  border-radius: var(--border-radius-xl);
  background: var(--color-surface-weak);
  overflow: hidden;
}

.overview .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--color-stroke-weak);
  border-radius: 0;
  background: var(--color-surface-weak);
  margin-bottom: 0;
  padding: var(--space-medium) var(--space-large);
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.overview .list-group-item:last-child {
  border-bottom: 0;
}

.overview .list-group-item-heading {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: var(--space-s);
}

.overview .list-group-item-text {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Overview tab rows and #thread-list counts: plain icon + text.
   Not .overview .stats > .list-stats (Activity Summary). */
.overview .tab-pane .list-stats,
.overview a.list-group-item.list-group-item-action .list-stats {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.6px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  gap: 0;
}

.overview .tab-pane .list-stats li,
.overview a.list-group-item.list-group-item-action .list-stats li,
#thread-list .list-stats .badge.bg-secondary,
.all-lists section.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new),
#thread-list .likeform a.vote,
#thread-list .likeform > i.fa.disabled,
#thread-list .likeform > .fa.disabled {
  display: inline-block;
  align-items: unset;
  padding: 0 12.6px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
  height: auto;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  gap: 0;
  pointer-events: auto;
}

.overview .tab-pane .list-stats li .fa,
.overview a.list-group-item.list-group-item-action .list-stats li .fa,
#thread-list .list-stats .badge.bg-secondary .fa,
.all-lists section.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new) .fa,
#thread-list .likeform a.vote .fa {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  font-size: 12.6px;
  line-height: 12.6px;
  display: inline;
}

.overview .tab-pane .list-stats li + li::before,
.overview a.list-group-item.list-group-item-action .list-stats li + li::before {
  content: none;
}

@media (min-width: 768px) {
  .row > #thread-list ~ .col-md-3,
  #thread-list .col-md-3 {
    padding-top: var(--space-xlarge);
  }

  #thread-list .thread-email > .d-md-flex {
    align-items: center;
  }
}

#thread-list .list-stats .badge.bg-secondary,
.all-lists section.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new) {
  color: inherit;
  pointer-events: none;
}

/* Bootstrap .bg-secondary is background-color !important. */
@layer boost-important {
  #thread-list .list-stats .badge.bg-secondary,
  .all-lists section.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new) {
    background: transparent !important;
  }
}

/* Mobile archives index counts sit in a <td>, not .list-stats; match
   discussion-row information metrics (12.6px, no fill, muted icons). */
.all-lists section.row.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new) {
  font-family: var(--font-sans);
  font-size: 12.6px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  letter-spacing: inherit;
}

/* HyperKitty `ul.list-stats .fa { color: #BFBFBF }` — badges are not
   inside .list-stats, so they otherwise inherit the count colour. */
.all-lists section.row.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new) .fa,
.all-lists section.row.lists.d-md-none table.lists td > span.badge.bg-secondary:not(.new) .fa::before {
  color: #bfbfbf;
}

/* Row likes are thread-total info, not vote controls. Same metrics as
   the participants/replies badges (12.6px icons, 12.6px item pad, 6px gap).
   HyperKitty `#thread-list .thread .thread-info .likeform { display: inline }` is 0,4,0. */
#thread-list .thread .thread-info .likeform,
.overview :is(.tab-pane, a.list-group-item.list-group-item-action) .list-stats .likestatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  pointer-events: none;
}

.overview :is(.tab-pane, a.list-group-item.list-group-item-action) .list-stats .likestatus .fa-thumbs-o-down {
  margin-inline-start: 12.6px;
}
#thread-list .likeform a.vote,
#thread-list .likeform a.youlike,
#thread-list .likeform a.youdislike,
#thread-list .likeform .fa,
#thread-list .likeform i {
  color: inherit;
  cursor: inherit;
  pointer-events: none;
}

#thread-list .likeform a.vote:focus-visible {
  outline: 2px solid var(--color-stroke-link-accent);
  outline-offset: 2px;
  box-shadow: none;
}

#thread-list .likeform:has(> a.vote + i.fa.disabled)::after {
  content: none;
}

/* Stretched title link covers the row; inner controls sit above.
   z-index: 0 on .thread makes it the stacking context so the overlay
   and excerpt links compare here. -webkit-box on .expander does not
   lift its children above the overlay; the excerpt column does. */
#thread-list > .thread {
  position: relative;
  z-index: 0;
}

#thread-list a.thread-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

#thread-list .thread-email-content,
#thread-list .thread-email-content a,
#thread-list .expander a,
#thread-list a:not(.thread-title):not(.vote),
#thread-list .btn-expander {
  position: relative;
  z-index: 2;
}

#thread-list > .thread:focus-within {
  outline: 2px solid var(--color-stroke-link-accent);
  outline-offset: -2px;
}

.overview a.list-group-item-action:focus-visible {
  outline: 2px solid var(--color-stroke-link-accent);
  outline-offset: -2px;
}

#thread-list :is(.thread-title, .thread-title a, a.thread-title):active,
.overview .list-group-item-heading:active {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  color: var(--color-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  #thread-list .thread-title:hover,
  #thread-list .thread-title a:hover,
  #thread-list a.thread-title:hover,
  .overview .list-group-item-heading:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    color: var(--color-text-primary);
  }

  .overview a.list-group-item-action:hover {
    background-color: var(--color-surface-weak);
    color: var(--color-text-primary);
  }
}

/* Bootstrap .d-none, .d-flex and .d-block are !important. .d-none hides
   the row the votes live in; .d-block stacks the votes. */
@layer boost-important {
  @media (max-width: 767px) {
    #thread-list .thread-email > .d-none.d-md-flex {
      display: flex !important;
    }

    #thread-list .thread-email-content {
      display: none !important;
    }

    #thread-list .list-stats > .d-block {
      display: inline-flex !important;
    }
  }
}

@media (max-width: 767px) {
  #thread-list .thread-email > .d-none.d-md-flex {
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-top: var(--space-s);
    padding-left: calc(48px + var(--space-medium));
    box-sizing: border-box;
  }

  #thread-list .thread-email > .d-none.d-md-flex > .col-2 {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
  }

  #thread-list .list-stats {
    float: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
  }

  #thread-list .list-stats > .d-block {
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* HyperKitty `#thread-list .thread-list-header a` and `.list-name`,
   which vendored 06-foundations.css `body.v3 a` and colour.css links
   would override now that stock is layered. */
#thread-list .thread-list-header a {
  text-decoration: none;
}

#thread-list .thread-list-header .list-name {
  color: black;
}

#thread-list .thread-list-info .list-address {
  overflow-wrap: anywhere;
}