/* ── Roster page: viewport-height three-column layout ──────────────── */
.roster-page-wrap {
  display: flex;
  flex-direction: column;
  /* Fill from top of content area to bottom of viewport */
  height: calc(100vh - 130px);
  min-height: 480px;
}

/* Action bar stays fixed at the top – never scrolls */
.roster-action-bar {
  flex: 0 0 auto;
  margin-bottom: 0.6rem;
}

/* Three columns sit below the action bar and fill remaining height */
.roster-columns {
  flex: 1 1 0;
  min-height: 0;           /* crucial: lets flex children shrink below content height */
  display: flex;
  gap: 0.75rem;
}

/* Scrollable side columns */
.roster-col-side {
  flex: 0 0 22%;
  min-width: 170px;
  max-width: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollable centre roster column */
.roster-col-main {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Make cards fill their column */
.roster-col-side  > .card,
.roster-col-main  > .card {
  min-height: 100%;
}

/* ── Placeholder chips ─────────────────────────────────────────────── */
.placeholder-chip {
  display: block;
  cursor: grab;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-dim);
  background: var(--bg-card-2);
  transition: box-shadow 0.12s, opacity 0.12s;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.placeholder-chip:hover  { box-shadow: 0 0 0 2px var(--wow-gold); opacity: 0.85; }
.placeholder-chip:active { cursor: grabbing; }
.placeholder-chip:focus-visible,
.char-card:focus-visible,
.slot-card:focus-visible,
.user-group-header:focus-visible {
  outline: 2px solid var(--wow-gold);
  outline-offset: 2px;
}
.assignment-source-selected {
  box-shadow: 0 0 0 3px var(--wow-gold) !important;
  opacity: 1 !important;
}

.placeholder-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a95b0;
  margin: 0.55rem 0 0.2rem;
}

/* ── Slot filled with a placeholder ────────────────────────────────── */
.slot-placeholder-text {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  color: #8a95b0;
  border: 1px dashed var(--border-dim);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.8;
}

/* ── Compact roster slot cards ──────────────────────────────────────── */
.slot-card {
  padding: 0.3rem 0.4rem 1rem 0.4rem !important;
  position: relative;
}
.slot-card .slot-label {
  font-size: 0.68rem;
  color: #8a95b0;
  margin-bottom: 0.15rem;
}
.slot-card .assigned-char {
  min-height: 32px;
  font-size: 0.82rem;
}
.slot-card .assigned-char small {
  font-size: 0.7rem;
  line-height: 1.2;
}

/* ── Slot action overlay (role switchers + remove) ───────────────────── */
.slot-role-btns-left {
  position: absolute;
  bottom: 2px;
  left: 2px;
  display: flex;
  gap: 1px;
  z-index: 2;
  flex-direction: column;
}
.slot-role-btns-right {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  gap: 1px;
  z-index: 2;
  flex-direction: column;
}
.role-btn {
  background: none;
  border: none;
  padding: 0 1px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.1s;
}
.role-btn:hover  { opacity: 0.8; }
.role-btn.active { opacity: 1; }
.slot-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: none;
  border: none;
  color: #ff6b6b;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  padding: 0 1px;
  transition: opacity 0.1s;
  z-index: 2;
}
.slot-remove-btn:hover { opacity: 1; }

/* ── Slot group separator ────────────────────────────────────────────── */
.slot-group {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 0.4rem;
}
.slot-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Comp tabs ──────────────────────────────────────────────────────── */
.comp-tabs {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
}
.comp-tab {
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-dim);
  background: var(--bg-card-2);
  color: #8a95b0;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.comp-tab:hover { background: #253050; color: #d8dce8; text-decoration: none; }
.comp-tab.active { background: var(--wow-gold); color: #0e1117; border-color: var(--wow-gold); font-weight: 600; }
.comp-tab-add { color: #57a85b; border-color: #57a85b; }
.comp-tab-add:hover { background: #1a3020; color: #7dc880; }
.comp-tab-action { color: #8ab4f8; border-color: #52698c; }
.comp-tab-danger { color: #ff8585; border-color: #8c5252; }
.publish-state {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: #8a95b0;
  border: 1px solid var(--border-dim);
}
.publish-state.current { color: #7dc880; border-color: #47704a; }
.publish-state.changed { color: #ffc107; border-color: #7a681f; }
.save-status { font-size: 0.78rem; min-width: 92px; text-align: center; }

/* ── Right-panel tab switcher ────────────────────────────────────────── */
.right-panel-tab {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-dim);
  background: var(--bg-card-2);
  color: #8a95b0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.right-panel-tab:hover { background: #253050; color: #d8dce8; }
.right-panel-tab.active { background: var(--wow-gold); color: #0e1117; border-color: var(--wow-gold); font-weight: 600; }

/* ── Buff panel ───────────────────────────────────────────────────────── */
.buff-category-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a95b0;
  margin: 0.55rem 0 0.15rem;
}
.buff-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  padding: 1px 0;
  transition: opacity 0.2s;
}
.buff-item.buff-missing { opacity: 0.4; }
.buff-item.buff-can-bring .buff-dot { background: #e8d850; }
.buff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 4px;
}
.buff-legend-item {
  font-size: 0.68rem;
  white-space: nowrap;
}
.buff-legend-active   { color: #57a85b; }
.buff-legend-canbring { color: #e8d850; }
.buff-legend-ph       { color: #e8a030; }
.buff-legend-missing  { color: #556677; opacity: 0.7; }
.buff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #3a4055;
}
.buff-item.buff-active   .buff-dot { background: #57a85b; }
.buff-item.buff-placeholder .buff-dot { background: #e8a030; border: 1px dashed #e8a030; background: transparent; }
.buff-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #556677;
}
.buff-item.buff-active      .buff-name { color: #d8dce8; }
.buff-item.buff-can-bring   .buff-name { color: #e8d850; }
.buff-item.buff-placeholder .buff-name { color: #e8a030; }
.buff-desc {
  font-size: 0.62rem;
  color: #4a5470;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.buff-item.buff-active      .buff-desc { color: #6a7a90; }
.buff-item.buff-can-bring   .buff-desc { color: #b8a830; }
.buff-item.buff-placeholder .buff-desc { color: #b07820; }

/* ── Comp tab inline rename ──────────────────────────────────────────── */
.comp-tab-rename-btn {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  color: #0e1117;
  transition: opacity 0.1s;
  vertical-align: middle;
}
.comp-tab-rename-btn:hover { opacity: 1; }
.comp-tab-rename-input {
  font-size: 0.78rem;
  padding: 0 6px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--wow-gold);
  background: #1a1f2e;
  color: #d8dce8;
  width: 120px;
  outline: none;
}

/* ── Slot drag-over highlight ───────────────────────────────────────── */
.slot-drag-over {
  box-shadow: 0 0 0 2px var(--wow-gold) !important;
  outline: none;
}

/* ── In-comp indicator for left-panel character cards ────────────────── */
.char-card {
  position: relative;
  --badge-reserved-width: 56px;
}
.char-card.in-comp {
  border-color: var(--wow-gold) !important;
  opacity: 0.75;
}
.char-card.unavailable {
  opacity: 0.5;
  border-style: dashed;
}
.assign-any-btn {
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  background: transparent;
  color: #b8c2d8;
  line-height: 1;
  padding: 2px 5px;
}
.assign-any-btn:hover { border-color: var(--wow-gold); color: var(--wow-gold); }
.select-char-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  background: var(--bg-card);
  color: #b8c2d8;
  line-height: 1;
  padding: 1px 5px;
}
.select-char-btn:hover { border-color: var(--wow-gold); color: var(--wow-gold); }
/* Reserve space on the right for the badges so the char name doesn't overlap */
.char-card-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: var(--badge-reserved-width, 56px);
  min-width: 0;
}
.char-card-heading > span.fw-bold {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.raid-conflict-icon {
  flex: 0 0 auto;
  cursor: help;
  font-size: 0.85rem;
  line-height: 1;
}
.raid-conflict-icon:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--wow-gold);
  outline-offset: 2px;
}
.raid-conflict-tooltip .tooltip-inner {
  max-width: 340px;
  text-align: left;
  white-space: pre-line;
}
.char-in-comp-badges {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  z-index: 1;
}
.char-in-comp-badge {
  display: block;
  font-size: 0.6rem;
  color: var(--wow-gold);
  border: 1px solid rgba(201, 170, 113, 0.4);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
  line-height: 1.5;
}

/* ── Player-level assignment indicator on user-group header ─────────── */
.user-group-assigned-badge {
  font-size: 0.6rem;
  color: var(--wow-gold);
  border: 1px solid rgba(201, 170, 113, 0.4);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
  line-height: 1.5;
}

/* ── Player group header colours ────────────────────────────────────── */
.user-group-header           { background: rgba(58, 255, 41, 0.21); }
.user-group-header.tentative { background: rgba(255, 182, 41, 0.21); }

.officer-note-btn {
  background: none;
  border: none;
  padding: 0 4px;
  font-size: 0.9rem;
  opacity: 0.25;
  transition: opacity 0.1s;
  cursor: pointer;
}
.officer-note-btn:hover, .officer-note-btn.has-note {
  opacity: 1;
}

/* ── Signup status badges ────────────────────────────────────────────── */
.badge-tentative {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 204, 0, 0.18);
  color: #ffc107;
  border: 1px solid rgba(255, 204, 0, 0.35);
  white-space: nowrap;
}

/* ── Discord Embed Preview ────────────────────────────────────────── */
.discord-preview-scroll-wrap {
  max-height: 500px;
  overflow-y: auto;
  background: #0f1520;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 1rem;
}

.discord-embed {
  background: #2b2d31;
  border-left: 4px solid #e6cc80;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #dbdee1;
}

.discord-embed:last-child {
  margin-bottom: 0;
}

.discord-embed-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.discord-embed-description {
  font-size: 0.875rem;
  line-height: 1.125rem;
  margin-bottom: 0.5rem;
}

.discord-embed-field {
  margin-top: 0.5rem;
}

.discord-embed-field-name {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.discord-embed-field-value {
  font-size: 0.875rem;
  line-height: 1.125rem;
  white-space: pre-wrap;
}

.discord-mention {
  color: #c9cdfb;
  background: rgba(88,101,242,0.3);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 500;
}

.discord-emoji {
  width: 1.375em;
  height: 1.375em;
  vertical-align: bottom;
  object-fit: contain;
}

.discord-content-pings {
  font-size: 0.875rem;
  color: #dbdee1;
  margin-bottom: 0.5rem;
  word-break: break-all;
}

/* ── Add Slots button ────────────────────────────────────────────────── */
.add-slots-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.add-slots-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border-dim);
  border-radius: 6px;
  padding: 8px;
  color: #8a95b0;
  transition: all 0.15s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-slots-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--wow-gold);
  color: var(--wow-gold);
}
.remove-slots-btn:hover { border-color: #dc6b6b; color: #ff8585; }
.add-slots-btn .plus-icon {
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
}

/* ── Pool action buttons ───────────────────────────────────────────── */
.btn-pool-action {
  font-size: 0.7rem !important;
}
.pool-status-filters {
  display: flex;
  flex-wrap: wrap;
}
.pool-status-filters .btn { flex: 1 1 auto; font-size: 0.64rem; }
.roster-summary {
  color: #8a95b0;
  font-size: 0.72rem;
  margin-top: 2px;
}
.roster-summary.incomplete { color: #d9aa54; }
.publish-validation {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 6px;
  padding: 0.65rem 0.8rem;
  font-size: 0.85rem;
}

@media (max-width: 991.98px) {
  .roster-page-wrap {
    height: auto;
    min-height: 0;
  }
  .roster-columns {
    flex-wrap: wrap;
    overflow: visible;
  }
  .roster-col-main {
    flex: 1 1 100%;
    order: 1;
    overflow: visible;
  }
  .roster-col-side {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: none;
    min-width: 280px;
    max-height: 65vh;
    order: 2;
  }
  .roster-col-side:last-child { order: 3; }
  .roster-action-bar { position: sticky; top: 0; z-index: 20; background: var(--bg-base); padding: 0.35rem 0; }
}

@media (max-width: 575.98px) {
  .roster-columns { display: block; }
  .roster-col-side { min-width: 0; max-height: none; margin-top: 0.75rem; overflow: visible; }
  .roster-primary-actions { width: 100%; }
  .roster-primary-actions .btn { flex: 1 1 auto; }
  .save-status { width: 100%; order: 10; }
  .publish-state { width: 100%; margin-left: 0; text-align: center; }
  .slot-group.row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slot-group.row > .col { width: auto; }
}

/* ── Collector buttons and badges ────────────────────────────────── */
.collector-btns {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  gap: 2px;
  z-index: 2;
}

.collector-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.1s, transform 0.1s;
}

.collector-btn:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.collector-btn.active {
  opacity: 1;
  filter: drop-shadow(0 0 2px var(--wow-gold));
}

.char-in-comp-badge.sfs-collector-badge,
.char-in-comp-badge.val-collector-badge {
  border-color: var(--wow-gold);
  background: rgba(201, 170, 113, 0.1);
}