/* Forum profile (resources/views/forum/user.php). Builds on thread.css
   (.thread-view, .tv-head__*, .tpost__outfit/role/flag) and the boards.css pager. */

/* ---------- Hero ---------- */
.fp-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid #c8913a;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f3e5bd, #ead6a2);
  box-shadow: 0 1px 3px rgba(80, 50, 10, 0.12);
}

.fp-hero--staff {
  border-color: #8f2b1e;
  background: linear-gradient(to bottom, #f1dcc6, #e4c3a2);
}

.fp-hero__outfit {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
}

.fp-hero__outfit img {
  width: 64px;
  height: 64px;
  transform: scale(1.25);
}

.fp-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border: 2px solid #f3e5bd;
  border-radius: 50%;
  background: #2f9e44;
}

.fp-hero__intro {
  flex: 1;
  min-width: 0;
}

.thread-view .fp-hero__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  color: #660000;
  font: 28px/1.15 Georgia, "Times New Roman", serif;
  overflow-wrap: anywhere;
}

.fp-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
}

.fp-hero__tags .tpost__role--staff {
  margin: 0;
  flex-basis: auto;
}

.fp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid #c8a46a;
  border-radius: 99px;
  background: rgba(255, 250, 240, 0.7);
  color: #4a3010;
  font-size: 11px;
  font-weight: 700;
}

.fp-tag--online {
  border-color: #6fb07a;
  background: #e6f4e3;
  color: #1f6b2e;
}

.fp-tag--online i {
  font-size: 7px;
}

.fp-tag--muted {
  color: #6b5430;
  font-weight: 600;
}

.fp-hero__meta {
  font-size: 13px;
}

.fp-hero__actions {
  flex: none;
  align-self: center;
}

/* ---------- Stat tiles ---------- */
.fp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
  gap: 10px;
  margin-top: 12px;
}

.fp-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #dcc394;
  border-radius: 8px;
  background: #fbf5e2;
  text-align: center;
}

.fp-stat strong {
  color: #2b2010;
  font: 700 18px/1.2 Georgia, "Times New Roman", serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-stat span {
  color: #8a7350;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fp-stat--rank {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.fp-stat--rank img {
  flex: none;
}

.fp-rank {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fp-rank strong {
  color: #660000;
  font-size: 15px;
}

.fp-rank > span:last-child {
  letter-spacing: 0;
  text-transform: none;
}

.fp-rank__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6d3a6;
}

.fp-rank__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(to right, #b8893e, #8a5a14);
}

/* ---------- Body: list + sidebar ---------- */
.fp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}

.fp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(160, 110, 40, 0.35);
}

.thread-view .fp-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  color: #6b5430;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.thread-view .fp-tabs__tab:hover {
  color: #2e1c08;
  background: rgba(255, 248, 225, 0.6);
}

.thread-view .fp-tabs__tab.is-active {
  border-color: rgba(160, 110, 40, 0.35);
  border-bottom-color: #fbf5e2;
  background: #fbf5e2;
  color: #660000;
}

.fp-tabs__tab span {
  padding: 0 7px;
  border-radius: 99px;
  background: #e6d3a6;
  color: #4a3010;
  font-size: 11px;
}

.fp-tabs__tab.is-active span {
  background: #1b3550;
  color: #fff;
}

.fp-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: #5c4726;
  font-size: 12px;
}

.thread-view .fp-filter a {
  margin-left: auto;
  font-weight: 700;
  text-decoration: none;
}

.fp-empty {
  margin: 14px 0 0;
  padding: 30px 16px;
  border: 1px dashed #c8a46a;
  border-radius: 8px;
  color: #8a7350;
  text-align: center;
}

.fp-empty i {
  display: block;
  margin-bottom: 6px;
  color: #c8a46a;
  font-size: 26px;
}

.fp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.fp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #dcc394;
  border-radius: 8px;
  background: #fbf5e2;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.fp-item:hover {
  border-color: #c8913a;
  box-shadow: 0 1px 4px rgba(80, 50, 10, 0.15);
}

.fp-item__icon {
  flex: none;
  border: 1px solid #a57a36;
  border-radius: 4px;
}

.fp-item__main {
  flex: 1;
  min-width: 0;
}

.thread-view .fp-item__title {
  color: #063677;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fp-item__title .thread-tag {
  margin: 0 4px 0 0;
}

.fp-re {
  color: #8a7350;
  font-weight: 600;
}

.fp-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 3px;
  color: #8a7350;
  font-size: 11.5px;
}

.thread-view .fp-item__meta a {
  color: #8a5a14;
  font-weight: 700;
  text-decoration: none;
}

.thread-view .fp-item__meta a:hover {
  color: #5c3a08;
}

.thread-view .fp-item__snippet {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: #3b2e1a;
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.fp-item__counts {
  display: flex;
  flex: none;
  gap: 14px;
  margin: 0;
  align-self: center;
  text-align: center;
}

.fp-item__counts div {
  min-width: 44px;
}

.fp-item__counts dd {
  margin: 0;
  color: #2b2010;
  font-size: 14px;
  font-weight: 700;
}

.fp-item__counts dt {
  color: #8a7350;
  font-size: 10.5px;
}

/* sidebar */
.fp-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-card {
  padding: 12px 14px;
  border: 1px solid #dcc394;
  border-radius: 8px;
  background: #fbf5e2;
}

.thread-view .fp-card__title {
  margin: 0 0 8px;
  padding: 0;
  background: none;
  color: #8a5a14;
  font: 700 11px Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fp-boards {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread-view .fp-boards a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 5px 6px;
  border-radius: 5px;
  color: #3b2e1a;
  font-size: 12.5px;
  text-decoration: none;
}

.thread-view .fp-boards a:hover {
  background: rgba(230, 211, 166, 0.5);
}

.thread-view .fp-boards a.is-active {
  background: #1b3550;
  color: #fff;
}

.fp-boards__count {
  font-weight: 700;
}

.fp-boards__bar {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6d3a6;
}

.fp-boards__bar span {
  display: block;
  height: 100%;
  background: #b8893e;
}

.fp-sig {
  color: #5c4726;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.fp-sig img {
  max-width: 100%;
  height: auto;
}

.thread-view .fp-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #c8a46a;
  border-radius: 6px;
  background: linear-gradient(to bottom, #fffaf0, #f3e5c2);
  color: #4a3010;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.thread-view .fp-search:hover {
  border-color: #a57a36;
  background: #ecd49a;
}

.fp-search i {
  color: #a57a36;
}

@media (max-width: 900px) {
  .fp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fp-stat--rank {
    grid-column: 1 / -1;
  }

  .fp-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .fp-hero {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
  }

  .fp-hero__outfit {
    width: 72px;
    height: 72px;
  }

  .fp-hero__outfit img {
    transform: none;
  }

  .fp-hero__intro {
    flex: 1 1 calc(100% - 90px);
  }

  .thread-view .fp-hero__name {
    font-size: 22px;
  }

  .fp-hero__actions {
    width: 100%;
  }

  .fp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fp-item__counts {
    display: none;
  }
}