/* ============================================================
   QB ALB — Visual Components Styling (Mockup Matched)
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. PILLS / FILTER TABS
   ══════════════════════════════════════════════════════════ */

.feed-filters {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  overflow-x: auto;
}

.feed-filter-btn {
  padding: 0.45rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  border: none;
  background-color: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 1px solid var(--border);
}

.feed-filter-btn:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.feed-filter-btn--active {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════
   2. POST COMPOSER BOX
   ══════════════════════════════════════════════════════════ */

.post-composer {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.post-composer__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.post-composer__input {
  flex: 1;
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.65rem var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  outline: none;
  cursor: text;
  transition: border-color var(--transition-fast);
}

.post-composer__input:focus {
  border-color: var(--primary);
  background-color: var(--surface);
}

.post-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.post-composer__tools {
  display: flex;
  gap: var(--space-3);
}

.post-composer__tool {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.post-composer__tool:hover {
  color: var(--primary);
}

.post-composer__tool svg {
  width: 16px;
  height: 16px;
}

/* ══════════════════════════════════════════════════════════
   3. FEED POST CARD
   ══════════════════════════════════════════════════════════ */

.post-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.post-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.post-card__author-info {
  flex: 1;
}

.post-card__author-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 2px;
}

.post-card__author-name:hover {
  text-decoration: underline;
  cursor: pointer;
}

.post-card__meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

.post-card__more-btn {
  color: var(--text-tertiary);
  font-size: 1.1rem;
  cursor: pointer;
}

.post-card__text {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-primary);
}

.post-card__image {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

.post-card__stats {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}

.post-card__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}

.post-card__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.post-card__action-btn:hover {
  background-color: var(--surface-muted);
  color: var(--primary);
}

/* Comments section */
.post-card__comments {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background-color: var(--surface-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.comment-item {
  display: flex;
  gap: var(--space-2);
}

.comment-bubble {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  flex: 1;
}

.comment-bubble__author {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.comment-bubble__text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.comment-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.comment-input-wrap {
  flex: 1;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.45rem var(--space-3);
}

.comment-input-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--text-xs);
}

/* ══════════════════════════════════════════════════════════
   4. RIGHT COLUMN WIDGETS
   ══════════════════════════════════════════════════════════ */

.widget-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.widget-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.widget-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.widget-card__see-all {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

/* Representative mini card item */
.rep-mini-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.rep-mini-item:last-child { border-bottom: none; }
.rep-mini-item:hover { background-color: var(--surface-muted); }

.rep-mini-item__info {
  flex: 1;
}

.rep-mini-item__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.rep-mini-item__role {
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Live Session Widget (Mockup Style) */
.live-widget-item {
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.live-widget-thumb {
  width: 72px;
  height: 52px;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.live-badge-overlay {
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: var(--live-red);
  color: #ffffff;
  font-size: 0.55rem;
  font-weight: var(--weight-bold);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Upcoming Events (Red date box) */
.event-mini-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.event-mini-item:last-child { border-bottom: none; }

.event-date-box {
  width: 44px;
  height: 44px;
  text-align: center;
  background-color: var(--live-red); /* Red date box in mockup */
  color: #ffffff;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.event-date-box__day {
  font-size: 1.1rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
}

.event-date-box__month {
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
}

.event-mini-item__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.35;
}

.event-mini-item__meta {
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   5. DETAILED REPRESENTATIVE PROFILE PANEL (3RD COLUMN)
   ══════════════════════════════════════════════════════════ */

.profile-col-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-col-header__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.rep-profile-column-content {
  padding: var(--space-4);
}

/* Card inside column */
.rep-profile-hero {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.rep-profile-hero__avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.rep-profile-hero__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--primary-light);
  object-fit: cover;
}

.rep-profile-hero__name {
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: var(--space-2);
}

.rep-profile-hero__role {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Stats Row */
.rep-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
}

.rep-profile-stat-val {
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.rep-profile-stat-lbl {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Buttons in profile */
.rep-profile-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Profile details block */
.rep-profile-info-block {
  margin-bottom: var(--space-4);
}

.rep-profile-info-block__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  letter-spacing: 0.05em;
}

.rep-profile-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.rep-profile-group-widget {
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
}

.rep-profile-group-widget__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.rep-profile-group-widget__members {
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════
   6. OTHER VIEWS (GROUPS, CHAT, DIRECTORY, LIVE)
   ══════════════════════════════════════════════════════════ */

/* Groups view */
.groups-page-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
}

.groups-filter-sidebar {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  height: fit-content;
}

.groups-filter-sidebar h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

.group-filter-tab {
  display: flex;
  align-items: center;
  padding: 0.5rem var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  width: 100%;
  text-align: left;
}

.group-filter-tab:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.group-filter-tab--active {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.group-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.group-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.group-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.group-card__meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

.group-card__posts {
  padding: var(--space-4);
  background-color: var(--surface-muted);
}

.group-announcement {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.group-announcement:last-child { border-bottom: none; }

.group-announcement__text {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-primary);
}

/* Chat view */
.chat-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - var(--topbar-height));
}

.chat-sidebar {
  background-color: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.chat-sidebar__header {
  padding: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  border-bottom: 1px solid var(--border);
}

.chat-thread {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.chat-thread:hover {
  background-color: var(--surface-muted);
}

.chat-thread--active {
  background-color: var(--primary-light) !important;
}

.chat-thread__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.chat-thread__preview {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chat bubble styling */
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-window__header {
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-messages {
  flex: 1;
  padding: var(--space-4);
  background-color: var(--background);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-bubble {
  max-width: 65%;
  display: flex;
  gap: var(--space-2);
}

.chat-bubble--sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble--received {
  align-self: flex-start;
}

.chat-bubble__text {
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.chat-bubble--sent .chat-bubble__text {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.chat-input-bar {
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.chat-input-bar input {
  flex: 1;
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.55rem var(--space-4);
  font-size: var(--text-sm);
}

/* Directory view */
.dir-page {
  padding: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

.dir-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dir-tab-btn {
  padding: 0.4rem 1rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  color: var(--text-secondary);
}

.dir-tab-btn--active {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

.dir-rep-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dir-rep-item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dir-rep-item__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

/* Live stream page */
.live-page {
  padding: var(--space-4);
  max-width: 800px;
  margin: 0 auto;
}

.tg-meet {
  background-color: #1e2e3e;
  color: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.tg-meet__header {
  background-color: #263849;
  padding: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tg-meet__body {
  padding: var(--space-6);
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tg-members-grid {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.tg-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tg-member__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #34485c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.tg-member--speaking .tg-member__avatar {
  border: 3px solid var(--success);
  box-shadow: 0 0 12px var(--success);
}

.tg-meet__controls {
  background-color: #263849;
  padding: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.tg-ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #34485c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-ctrl-btn--join {
  background-color: var(--success);
  width: auto;
  padding: 0 var(--space-5);
  font-weight: bold;
  border-radius: var(--radius-full);
}