/* Events page hard layout override: compact 5-column parties + top roster layout. */

html,
body {
  overflow-x: auto;
}

.events-app-wide {
  width: min(2560px, calc(100vw - 6px));
  max-width: none;
}

.events-layout,
.events-layout-compact {
  grid-template-columns: 220px minmax(1320px, 1fr) !important;
  gap: 8px !important;
  min-width: 1550px;
}

.events-sidebar {
  padding: 10px !important;
}

.events-detail,
.events-detail-compact {
  padding: 10px !important;
  overflow: visible !important;
}

#eventDetail {
  display: flex !important;
  flex-direction: column !important;
}

.events-detail-compact > #eventDetail > .toolbar-main {
  margin-bottom: 6px !important;
}

.events-detail .toolbar-main,
.events-detail-compact .toolbar-main {
  gap: 8px !important;
}

.compact-actions {
  gap: 4px !important;
}

.compact-actions .btn {
  padding: 6px 7px !important;
  font-size: 11px !important;
  border-radius: 9px !important;
}

.event-stats-toggle {
  margin: 2px 0 6px !important;
  font-size: 12px !important;
}

.event-status-top-lists {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  margin: 0 0 6px !important;
  align-items: start !important;
}

.event-status-strip {
  min-height: 58px !important;
  max-height: 140px !important;
  overflow: auto !important;
}

.participant-list-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(165px, max-content)) !important;
  gap: 4px !important;
  min-height: 32px !important;
  align-content: start !important;
  align-items: start !important;
}

.event-column-unknown-top {
  margin: 0 0 6px !important;
  min-height: 92px !important;
  max-height: 230px !important;
  overflow: auto !important;
}

.participant-list-unknown-flow,
.participant-list-unknown-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(165px, max-content)) !important;
  gap: 4px !important;
  min-height: 46px !important;
  align-content: start !important;
  align-items: start !important;
}

.event-board,
.event-board-roster,
.event-board-five {
  display: grid !important;
  grid-template-columns: minmax(1296px, 1fr) !important;
  gap: 6px !important;
  margin-top: 0 !important;
  align-items: start !important;
  min-width: 1296px;
  overflow: visible !important;
}

.event-column,
.event-column-small {
  padding: 5px !important;
  border-radius: 10px !important;
  min-height: 90px !important;
}

.event-column h3,
.event-column-small h3 {
  font-size: 12px !important;
  line-height: 1.1 !important;
  margin: 0 0 5px !important;
}

.event-column-wide,
.event-column-unknown-wide,
.event-column-unknown-top {
  overflow: visible !important;
}

.event-column-wide {
  min-height: 520px !important;
}

.column-help {
  display: none !important;
}

.participant-list {
  gap: 4px !important;
}

.participant-card,
.compact-participant {
  padding: 4px 6px !important;
  border-radius: 8px !important;
}

.participant-list-strip .participant-card,
.participant-list-unknown-flow .participant-card,
.participant-list-unknown-grid .participant-card {
  width: max-content !important;
  min-width: 165px !important;
  max-width: none !important;
}

.participant-name {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
}

.event-status-top-lists .participant-name,
.event-column-unknown-top .participant-name {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.event-status-top-lists .event-name-with-icon,
.event-column-unknown-top .event-name-with-icon {
  display: inline-flex !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.event-status-top-lists .event-name-with-icon span,
.event-column-unknown-top .event-name-with-icon span {
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.participant-meta,
.compact-meta {
  font-size: 8.5px !important;
  gap: 3px !important;
}

.participant-actions {
  gap: 2px !important;
  margin-top: 3px !important;
}

/* Status buttons are hidden by default and shown only with the stats checkbox. */
#eventDetail:not(.show-all-stats) .participant-actions.status-actions {
  display: none !important;
}

#eventDetail.show-all-stats .participant-actions.status-actions {
  display: flex !important;
}

.mini-btn {
  padding: 2px 4px !important;
  font-size: 8.5px !important;
  line-height: 1.1 !important;
}

.event-class-icon {
  width: 13px !important;
  height: 13px !important;
  border-radius: 4px !important;
}

.parties-grid,
.parties-grid-five {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(180px, 1fr)) !important;
  gap: 5px !important;
  align-items: start !important;
  width: 100% !important;
}

.party-card,
.compact-party-card {
  padding: 4px !important;
  border-radius: 9px !important;
}

.party-head,
.compact-party-head {
  gap: 3px !important;
  margin-bottom: 3px !important;
}

.party-head h4,
.compact-party-head h4 {
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-party-head .row-actions {
  gap: 2px !important;
  flex-wrap: nowrap !important;
}

.compact-party-head .mini-btn {
  padding: 1px 4px !important;
  font-size: 8px !important;
}

.party-slots,
.compact-party-slots {
  gap: 2px !important;
}

.party-slot,
.compact-party-slot {
  min-height: 23px !important;
  grid-template-columns: 15px minmax(0, 1fr) 15px !important;
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 6px !important;
}

.slot-number,
.compact-party-slot .slot-number {
  width: 14px !important;
  height: 14px !important;
  font-size: 7.5px !important;
}

.slot-empty {
  font-size: 8px !important;
}

.slot-character {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

.slot-meta {
  margin-top: 0 !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
}

.compact-party-slot .mini-btn {
  padding: 0 3px !important;
  font-size: 8px !important;
  min-width: 14px;
}

.participant-stats-inline {
  gap: 2px !important;
  margin-top: 2px !important;
  font-size: 8px !important;
}

.participant-stats-inline span {
  padding: 1px 3px !important;
}

.empty-state.empty-compact {
  padding: 6px !important;
  font-size: 9px !important;
  border-radius: 8px !important;
}

.events-quick-search-bottom {
  order: 9999 !important;
  margin: 14px 0 0 !important;
  padding: 8px !important;
  border-radius: 12px !important;
  width: 100% !important;
  align-self: stretch !important;
}

.events-quick-search-bottom h3 {
  margin: 0 0 4px !important;
  font-size: 12px !important;
}

.events-quick-search-bottom p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
}

#eventsQuickSearchMount {
  width: 100% !important;
}

#eventTools {
  order: 10000 !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
}

#eventsQuickSearchMount > #eventTools {
  margin-top: 8px !important;
}

/* If an old quick-search block is injected elsewhere, force it to the visual bottom of the event detail. */
.events-detail [id*="quickSearch"],
.events-detail [id*="QuickSearch"],
.events-detail [class*="quick-search"],
.events-detail [class*="QuickSearch"] {
  order: 9999 !important;
}

@media (max-width: 1650px) {
  .events-app-wide {
    width: min(2200px, calc(100vw - 4px)) !important;
  }

  .events-layout,
  .events-layout-compact {
    grid-template-columns: 190px minmax(1180px, 1fr) !important;
    min-width: 1380px !important;
  }

  .event-board,
  .event-board-roster,
  .event-board-five {
    grid-template-columns: 1166px !important;
    min-width: 1166px !important;
  }

  .parties-grid,
  .parties-grid-five {
    grid-template-columns: repeat(5, minmax(160px, 1fr)) !important;
    gap: 4px !important;
  }

  .participant-list-strip,
  .participant-list-unknown-flow,
  .participant-list-unknown-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, max-content)) !important;
  }

  .participant-list-strip .participant-card,
  .participant-list-unknown-flow .participant-card,
  .participant-list-unknown-grid .participant-card {
    min-width: 155px !important;
  }
}

@media (max-width: 1320px) {
  .events-app-wide {
    width: 1380px !important;
  }

  .events-layout,
  .events-layout-compact {
    grid-template-columns: 185px 1180px !important;
    min-width: 1370px !important;
  }

  .events-sidebar {
    position: sticky !important;
    top: 10px !important;
  }

  .event-board,
  .event-board-roster,
  .event-board-five {
    grid-template-columns: 1166px !important;
    min-width: 1166px !important;
    overflow: visible !important;
  }

  .parties-grid,
  .parties-grid-five {
    grid-template-columns: repeat(5, 228px) !important;
  }
}

@media (max-width: 980px) {
  .events-app-wide {
    width: 1380px !important;
  }

  .events-layout,
  .events-layout-compact {
    grid-template-columns: 185px 1180px !important;
    min-width: 1370px !important;
  }

  .event-status-top-lists {
    grid-template-columns: 580px 580px !important;
  }

  .event-board,
  .event-board-roster,
  .event-board-five {
    grid-template-columns: 1166px !important;
    min-width: 1166px !important;
    overflow: visible !important;
  }

  .parties-grid,
  .parties-grid-five {
    grid-template-columns: repeat(5, 228px) !important;
  }
}

@media (max-width: 720px) {
  .events-app-wide {
    width: 1380px !important;
  }

  .topbar,
  .toolbar-main {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .toolbar-actions,
  .topbar-actions {
    justify-content: flex-end !important;
  }

  .toolbar-actions .btn,
  .topbar-actions .btn,
  .topbar-actions .link-btn {
    width: auto !important;
  }

  .event-status-top-lists {
    grid-template-columns: 580px 580px !important;
  }

  .parties-grid,
  .parties-grid-five {
    grid-template-columns: repeat(5, 228px) !important;
  }
}

/* v32: stacked event status lists: Не ответили -> Не пойдут -> Пойдут. */
.event-status-stacked-lists,
#eventDetail .event-status-top-lists.event-status-stacked-lists {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 6px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#eventDetail .event-status-stacked-lists > .event-status-strip,
#eventDetail .event-status-stacked-lists > .event-column-unknown-top {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 58px !important;
  max-height: none !important;
  overflow: visible !important;
}

#eventDetail .event-status-stacked-lists .participant-list-strip,
#eventDetail .event-status-stacked-lists .participant-list-unknown-flow,
#eventDetail .event-status-stacked-lists .participant-list-unknown-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(165px, max-content)) !important;
  gap: 4px !important;
  align-items: start !important;
  align-content: start !important;
  min-height: 32px !important;
  width: 100% !important;
  overflow: visible !important;
}

#eventDetail .event-status-stacked-lists .participant-card {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  width: max-content !important;
  min-width: 165px !important;
  max-width: none !important;
  overflow: visible !important;
  align-self: start !important;
}

#eventDetail .event-status-stacked-lists .participant-name,
#eventDetail .event-status-stacked-lists .event-name-with-icon,
#eventDetail .event-status-stacked-lists .event-name-with-icon span {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Prevent overlaps when “show all stats and buttons” is enabled. */
#eventDetail.show-all-stats .event-status-stacked-lists,
#eventDetail.show-all-stats .event-status-stacked-lists > .event-column,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-list,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-card {
  overflow: visible !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-list-strip,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-list-unknown-flow,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-list-unknown-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, max-content)) !important;
  row-gap: 6px !important;
  column-gap: 5px !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-card {
  min-width: 210px !important;
  padding: 6px 7px !important;
  z-index: auto !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-meta,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-stats-inline,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-actions {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#eventDetail:not(.show-all-stats) .event-status-stacked-lists .participant-stats-inline,
#eventDetail:not(.show-all-stats) .event-status-stacked-lists .participant-meta.stats-meta {
  display: none !important;
}

@media (max-width: 980px) {
  #eventDetail .event-status-top-lists.event-status-stacked-lists {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  #eventDetail .event-status-top-lists.event-status-stacked-lists {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v33: make expanded character stats wrap inside event cards instead of overflowing. */
#eventDetail.show-all-stats .event-status-stacked-lists .participant-card,
#eventDetail.show-all-stats .event-status-top-lists .participant-card,
#eventDetail.show-all-stats .participant-list-strip .participant-card,
#eventDetail.show-all-stats .participant-list-unknown-flow .participant-card,
#eventDetail.show-all-stats .participant-list-unknown-grid .participant-card {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-name,
#eventDetail.show-all-stats .event-status-top-lists .participant-name,
#eventDetail.show-all-stats .event-status-stacked-lists .event-name-with-icon,
#eventDetail.show-all-stats .event-status-top-lists .event-name-with-icon,
#eventDetail.show-all-stats .event-status-stacked-lists .event-name-with-icon span,
#eventDetail.show-all-stats .event-status-top-lists .event-name-with-icon span {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-stats-inline,
#eventDetail.show-all-stats .event-status-top-lists .participant-stats-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.2 !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-stats-inline span,
#eventDetail.show-all-stats .event-status-top-lists .participant-stats-inline span {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-meta,
#eventDetail.show-all-stats .event-status-top-lists .participant-meta,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-actions,
#eventDetail.show-all-stats .event-status-top-lists .participant-actions {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  overflow: visible !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-actions.status-actions,
#eventDetail.show-all-stats .event-status-top-lists .participant-actions.status-actions {
  display: flex !important;
  row-gap: 3px !important;
}

#eventDetail.show-all-stats .event-status-stacked-lists .participant-list-strip,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-list-unknown-flow,
#eventDetail.show-all-stats .event-status-stacked-lists .participant-list-unknown-grid,
#eventDetail.show-all-stats .event-status-top-lists .participant-list-strip,
#eventDetail.show-all-stats .event-status-top-lists .participant-list-unknown-flow,
#eventDetail.show-all-stats .event-status-top-lists .participant-list-unknown-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 240px)) !important;
  align-items: start !important;
  row-gap: 8px !important;
}