/* "Forum aktiviteleri" panel (assets/s1-forum-activity.v1.js). Uses the app's own design tokens. */
.fa-panel {
  position: relative;
  container: fa / inline-size; /* columns adapt to the panel's own width, not the viewport (the app has a sidebar) */
  margin-bottom: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(0 0 0 / .28);
}
.fa-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.fa-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgb(var(--accent2-rgb) / .10), transparent);
}
.fa-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: .01em; }
.fa-spacer { flex: 1; }
.fa-icon-btn {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.fa-icon-btn:hover { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.fa-icon-btn:focus-visible, .fa-tab:focus-visible, .fa-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fa-tabs {
  display: flex;
  overflow-x: auto;
  background: var(--panel-2);
  border-block: 1px solid var(--line);
  scrollbar-width: thin;
}
.fa-tab {
  flex: 0 0 auto;
  padding: 11px 16px;
  background: transparent; color: var(--muted);
  border: 0; border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer;
}
.fa-tab:hover { color: var(--text); background: rgb(var(--accent-rgb) / .06); }
.fa-tab.on { color: var(--text); background: var(--panel); border-bottom-color: var(--ok); }

.fa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.fa-main { min-width: 0; }
.fa-scroll { overflow-x: auto; }
.fa-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
.fa-table th {
  padding: 8px 10px;
  background: var(--bg-2); color: var(--muted);
  font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.fa-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fa-table tbody tr:nth-child(even) { background: rgb(255 255 255 / .018); }
.fa-table tbody tr:hover { background: rgb(var(--accent-rgb) / .07); }
.fa-table tbody tr:last-child td { border-bottom: 0; }
.fa-num { width: 34px; color: var(--faint); text-align: center !important; font-variant-numeric: tabular-nums; }
.fa-n { width: 96px; text-align: center !important; color: var(--muted); font-variant-numeric: tabular-nums; }
.fa-date { width: 112px; color: var(--muted); white-space: nowrap; }
.fa-cat { width: 160px; }
.fa-last { width: 150px; }

.fa-topic-in { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fa-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); text-decoration: none; font-weight: 500;
}
.fa-unread .fa-title { font-weight: 700; }
.fa-title:hover, .fa-cat-link:hover, a.fa-person:hover .fa-name { color: var(--accent); text-decoration: underline; }
.fa-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--panel); }
.fa-mark { flex: 0 0 auto; font-size: 12px; }
.fa-chip {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 5px;
  background: rgb(167 139 250 / .16); color: var(--violet);
  font-size: 11px; font-weight: 700;
}
.fa-chip-ok { background: rgb(52 211 153 / .14); color: var(--ok); }
.fa-cat-link {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); text-decoration: none;
}

.fa-person { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; color: var(--accent-2); text-decoration: none; }
.fa-person .fa-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-team { color: var(--accent); font-weight: 700; }
.fa-ghost { color: var(--faint); }
.fa-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.fa-av-letter {
  display: inline-grid; place-items: center;
  background: hsl(var(--fa-h, 200) 55% 34%); color: #fff;
  font-size: 12px; font-weight: 700;
}

.fa-side { border-left: 1px solid var(--line); background: rgb(0 0 0 / .12); }
.fa-side-head {
  padding: 11px 14px;
  background: var(--panel-2); color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; text-align: center;
}
.fa-posters { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.fa-posters li { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.fa-posters li:last-child { border-bottom: 0; }
.fa-posters li:nth-child(-n+3) .fa-name { color: var(--ok); font-weight: 600; }
.fa-posters .fa-person { flex: 1; }
.fa-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.fa-empty { margin: 0; padding: 22px 18px; color: var(--faint); font-size: 13.5px; text-align: center; }

@container fa (max-width: 1240px) {
  .fa-grid { grid-template-columns: 1fr; }
  .fa-side { border-left: 0; border-top: 1px solid var(--line); }
  .fa-posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .fa-posters li { border-bottom: 0; }
}
@container fa (max-width: 860px) {
  .fa-table .fa-cat { display: none; }
}
@container fa (max-width: 640px) {
  .fa-table .fa-date, .fa-table .fa-num { display: none; }
  .fa-n { width: 58px; }
  .fa-table th.fa-n { overflow: hidden; text-overflow: ellipsis; }
  .fa-last { width: 120px; }
}
@container fa (max-width: 460px) {
  .fa-table .fa-last { display: none; }
  .fa-head { padding: 12px 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fa-tab, .fa-icon-btn, .fa-table tbody tr { transition: background-color .12s, color .12s; }
}