/* ==========================================================================
   Roboflight – matches view (#matches) and the match list/detail used by the admin panel
   Logic: js/ui/matches/. Colors only from css/colors.css.
   Contents: 1 Layout · 2 List · 3 List as cards (narrow) · 4 Detail · 5 Dialogs · 6 Setup (rematch) · 7 Narrow windows
   ========================================================================== */

#topbar-center-matches .rf-status-banner > i
{
  color: var(--color-secondary-text);
}

/* --------------------------------------------------------------------------
   1. LAYOUT  (.rf-mx-layout[data-detail="open|closed"]: list | detail)
   -------------------------------------------------------------------------- */
.rf-mx-layout
{
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg-app);
}

.rf-mx-layout[data-detail="open"]
{
  grid-template-columns: minmax(0, 1fr) minmax(440px, 42%);
}

.rf-mx-list-panel
{
  min-width: 0;
  container-type: inline-size;
  container-name: mxlist;
}

.rf-mx-detail-panel
{
  min-width: 0;
  container-type: inline-size;
  container-name: mxdetail;
}

/* Login notice / "admins only" */
.rf-mx-gate
{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg-main-panel);
}

.rf-mx-gate .rf-empty-state p
{
  max-width: 460px;
  margin: 0;
}

.rf-mx-list-header
{
  flex-wrap: wrap;
}

.rf-mx-open-form
{
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.rf-mx-open-form .rf-search-wrap
{
  width: 320px;
  max-width: 100%;
}

.rf-mx-open-form input
{
  font-size: 11.5px;
}

.rf-mx-spacer
{
  flex: 1;
}

.rf-sr-only
{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. LIST
   -------------------------------------------------------------------------- */
.rf-mx-list,
.rf-mx-listwrap
{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rf-mx-filterbar
{
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px 6px;
}

.rf-mx-q
{
  flex: 1;
}

.rf-mx-filter-toggle
{
  display: none;
}

.rf-mx-filters
{
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--border-color);
}

.rf-mx-filters .rf-select
{
  width: auto;
  max-width: 220px;
  padding: 5px 8px;
  font-size: 12px;
}

.rf-mx-date
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.rf-mx-date input
{
  width: auto;
  padding: 4px 6px;
  font-size: 12px;
  color-scheme: dark;
}

.rf-mx-table-wrap
{
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.rf-mx-table td
{
  vertical-align: middle;
}

.rf-mx-row
{
  cursor: pointer;
}

.rf-mx-row:focus-visible
{
  outline-offset: -2px;
}

.rf-mx-row.is-selected
{
  background: var(--color-secondary-light);
  box-shadow: inset 3px 0 0 var(--color-secondary);
}

.rf-mx-row.is-selected:hover
{
  background: var(--color-secondary-light);
}

.rf-mx-id
{
  font-size: 10.5px;
}

.rf-mx-user-inline
{
  display: none;
  font-size: 11px;
}

.rf-mx-seed
{
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.rf-mx-lineup
{
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 180px;
}

.rf-mx-ship
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  min-width: 0;
  max-width: 100%;
}

.rf-mx-ship-name
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.rf-mx-ship-name.is-unsaved
{
  font-style: italic;
  color: var(--text-muted);
}

.rf-mx-more,
.rf-mx-lineup-count
{
  font-size: 11px;
  color: var(--text-muted);
}

.rf-mx-lineup-count
{
  margin-top: 2px;
}

.rf-mx-winner
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.rf-mx-winner > .fa-trophy
{
  color: var(--color-tertiary);
}

.rf-mx-winner-name
{
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-mx-replay
{
  cursor: help;
}

.rf-mx-logs
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-secondary-text);
  white-space: nowrap;
}

.rf-mx-note
{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 240px;
  font-size: 11.5px;
  color: var(--color-tertiary-text);
}

.rf-mx-row-actions
{
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  white-space: nowrap;
}

.rf-mx-row-actions .rf-icon-btn
{
  padding: 4px 6px;
}

.rf-mx-row-actions .rf-icon-btn:disabled
{
  opacity: 0.35;
  cursor: not-allowed;
}

.rf-mx-row-actions .rf-icon-btn.is-busy > i
{
  animation: rf-spin 0.9s linear infinite;
}

.rf-mx-list-state:not(:empty)
{
  padding: 14px 12px;
}

.rf-mx-retry
{
  margin-top: 8px;
}

.rf-mx-footer
{
  padding: 6px 12px;
  font-size: 11.5px;
}

/* Less important columns give way first */
@container mxlist (max-width: 1250px)
{
  .rf-mx-table [data-col="seed"] { display: none; }
  .rf-mx-replay-label { display: none; }
}

@container mxlist (max-width: 1050px)
{
  /* Line-up as tags only (names in the tooltip), user below the date */
  .rf-mx-table [data-col="note"],
  .rf-mx-table [data-col="logsize"],
  .rf-mx-table [data-col="user"] { display: none; }
  .rf-mx-user-inline { display: block; }
  .rf-mx-lineup .rf-mx-ship-name { display: none; }
  .rf-mx-lineup { min-width: 0; max-width: 220px; gap: 3px; }
  .rf-mx-winner-name { max-width: 90px; }
}

@container mxlist (max-width: 880px)
{
  .rf-mx-table [data-col="rounds"],
  .rf-mx-table [data-col="mode"] .muted { display: none; }
}

/* --------------------------------------------------------------------------
   3. LIST AS CARDS (narrow list panel)
   -------------------------------------------------------------------------- */
@container mxlist (max-width: 720px)
{
  .rf-mx-filter-toggle
  {
    display: inline-flex;
  }

  .rf-mx-filters
  {
    display: none;
    padding-top: 2px;
  }

  .rf-mx-listwrap.is-filters-open .rf-mx-filters
  {
    display: flex;
  }

  .rf-mx-listwrap:not(.is-filters-open) .rf-mx-filterbar
  {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
  }

  .rf-mx-filters .rf-select,
  .rf-mx-date
  {
    flex: 1 1 140px;
    max-width: none;
  }

  .rf-mx-date input
  {
    flex: 1;
    min-width: 0;
  }

  .rf-mx-table,
  .rf-mx-table tbody
  {
    display: block;
  }

  .rf-mx-table thead
  {
    display: none;
  }

  .rf-mx-table tr.rf-mx-row
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "date replay"
      "mode logs"
      "lineup lineup"
      "winner winner"
      "note note"
      "actions actions";
    gap: 4px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
  }

  .rf-mx-table tr.rf-mx-row > td
  {
    display: block;
    padding: 0;
    border: none;
    min-width: 0;
  }

  .rf-mx-table [data-col="date"] { grid-area: date; display: flex !important; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .rf-mx-table [data-col="replay"] { grid-area: replay; justify-self: end; }
  .rf-mx-table [data-col="mode"] { grid-area: mode; display: flex !important; gap: 6px; align-items: center; flex-wrap: wrap; }
  .rf-mx-table [data-col="logs"] { grid-area: logs; justify-self: end; }
  .rf-mx-table [data-col="lineup"] { grid-area: lineup; }
  .rf-mx-table [data-col="winner"] { grid-area: winner; }
  .rf-mx-table [data-col="note"] { grid-area: note; display: block !important; }
  .rf-mx-table [data-col="actions"] { grid-area: actions; }
  .rf-mx-table [data-col="seed"],
  .rf-mx-table [data-col="rounds"],
  .rf-mx-table [data-col="user"],
  .rf-mx-table [data-col="logsize"] { display: none !important; }

  .rf-mx-table [data-col="note"]:empty
  {
    display: none !important;
  }

  .rf-mx-lineup
  {
    min-width: 0;
    max-width: none;
    gap: 3px 10px;
  }

  .rf-mx-lineup .rf-mx-ship-name
  {
    display: inline-block;
    max-width: 110px;
  }

  .rf-mx-note
  {
    max-width: none;
  }

  .rf-mx-row-actions
  {
    justify-content: flex-start;
    border-top: 1px dashed var(--border-color);
    padding-top: 4px;
  }
}

/* --------------------------------------------------------------------------
   4. DETAIL
   -------------------------------------------------------------------------- */
.rf-mx-detail-head
{
  justify-content: flex-start;
}

.rf-mx-detail-head h2
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.rf-mx-detail-head h2 .mono
{
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-main);
}

.rf-mx-back
{
  display: none;
}

.rf-mx-detail-body
{
  padding: 14px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rf-mx-idline
{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 0;
}

.rf-mx-idline .mono
{
  overflow-wrap: anywhere;
}

.rf-mx-summary
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rf-mx-winner-line
{
  font-size: 15px;
  font-weight: 700;
}

.rf-mx-replay-badge
{
  font-size: 11px;
  padding: 3px 8px;
  cursor: help;
}

.rf-mx-facts dd .mono
{
  color: var(--color-tertiary-text);
}

.rf-mx-section
{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.rf-mx-section .rf-section-title
{
  justify-content: flex-start;
}

.rf-mx-note-edit
{
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.rf-mx-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rf-mx-replay-group
{
  display: inline-flex;
  align-items: stretch;
}

.rf-mx-replay-group .rf-select
{
  width: auto;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
  padding: 6px 8px;
}

.rf-mx-replay-group .rf-select:disabled
{
  opacity: 0.6;
}

.rf-mx-replay-group .rf-btn
{
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.rf-mx-replay-group .rf-select:disabled + .rf-btn:not(:disabled)
{
  border-radius: var(--radius-md);
}

.rf-mx-note-text
{
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12.5px;
}

.rf-mx-note-empty
{
  font-size: 12px;
}

.rf-mx-note-input
{
  resize: vertical;
  min-height: 80px;
  line-height: 1.45;
}

.rf-mx-note-bar
{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.rf-mx-note-count
{
  font-size: 11px;
}

.rf-mx-export
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.rf-mx-ship-cell
{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rf-mx-result-table .rf-table td,
.rf-mx-rounds-table .rf-table td
{
  vertical-align: middle;
}

.rf-mx-rounds-table,
.rf-mx-matrix
{
  max-height: 320px;
}

.rf-mx-matrix-title
{
  font-size: 11.5px;
}

.rf-mx-matrix .rf-table th,
.rf-mx-matrix .rf-table td
{
  padding: 4px 7px;
  white-space: nowrap;
}

.rf-mx-matrix .rf-table td:first-child,
.rf-mx-matrix .rf-table th:first-child
{
  position: sticky;
  left: 0;
  background: var(--bg-side-panel);
  z-index: 1;
}

.rf-mx-matrix .rf-table th:first-child
{
  z-index: 2;
  background: var(--bg-topbar);
}

.rf-mx-cell
{
  font-variant-numeric: tabular-nums;
}

.rf-mx-rank
{
  color: var(--text-muted);
  font-weight: 700;
}

.rf-mx-cell.is-first .rf-mx-rank
{
  color: var(--color-tertiary);
}

.rf-mx-cell.is-killed
{
  color: var(--text-muted);
}

.rf-mx-cell .fa-skull
{
  color: var(--color-killed-text);
  font-size: 10px;
}

.rf-mx-danger .rf-section-title
{
  color: var(--color-danger-text);
}

.rf-mx-error-id
{
  margin-top: 4px;
  font-size: 11px;
  overflow-wrap: anywhere;
}

@container mxdetail (max-width: 520px)
{
  .rf-mx-matrix-hint
  {
    display: none;
  }

  .rf-mx-actions .rf-btn
  {
    flex: 1 1 auto;
  }

  .rf-mx-replay-group
  {
    flex: 1 1 100%;
  }

  .rf-mx-replay-group .rf-btn
  {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   5. DIALOGS (confirmation with preview, share link)
   -------------------------------------------------------------------------- */
.rf-mx-confirm-body
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
}

.rf-mx-confirm-body p
{
  margin: 0;
}

.rf-mx-confirm-warn
{
  color: var(--color-danger-text);
  font-weight: 600;
}

.rf-mx-report-title
{
  font-weight: 700;
  margin-bottom: 6px;
}

.rf-mx-report-table td
{
  color: var(--text-muted);
}

.rf-mx-report-table tr.is-hit td
{
  color: var(--text-main);
  font-weight: 600;
}

.rf-mx-report-foot
{
  margin-top: 6px;
  font-size: 11.5px;
}

.rf-mx-share-dialog .ui-dialog-content
{
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto;
}

.rf-mx-share-inner
{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rf-mx-share-row
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.rf-mx-share-days
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.rf-mx-share-days input
{
  width: 70px;
}

.rf-mx-share-list-box
{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rf-mx-share-list-box h4
{
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.rf-mx-share-list
{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rf-mx-share-item
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rf-mx-share-item.is-expired,
.rf-mx-share-item.is-revoked
{
  opacity: 0.6;
}

.rf-mx-share-item-head
{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rf-mx-share-item-meta
{
  font-size: 11px;
}

.rf-mx-share-result .rf-key-display .rf-input
{
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   6. SETUP: rematch notice and "choose a bot" for missing ships (js/ui/setup/)
   -------------------------------------------------------------------------- */
.rf-setup-rematch
{
  flex-shrink: 0;
  margin: 10px 12px 0;
  align-items: center;
}

.rf-setup-rematch > i
{
  margin-top: 0;
}

.rf-setup-rematch-text
{
  flex: 1;
  min-width: 0;
}

.rf-replace-bot.rf-select
{
  width: auto;
  max-width: 170px;
  padding: 3px 6px;
  font-size: 11.5px;
  flex-shrink: 1;
  min-width: 90px;
}

/* --------------------------------------------------------------------------
   7. NARROW WINDOWS
   -------------------------------------------------------------------------- */
@media (max-width: 1100px)
{
  /* Detail replaces the list */
  .rf-mx-layout[data-detail="open"]
  {
    grid-template-columns: minmax(0, 1fr);
  }

  .rf-mx-layout[data-detail="open"] .rf-mx-list-panel
  {
    display: none;
  }

  .rf-mx-detail-panel.rf-side-panel.right
  {
    border-left: none;
  }

  .rf-mx-back
  {
    display: inline-flex;
  }

  .rf-mx-close
  {
    display: none;
  }
}

@media (max-width: 760px)
{
  .rf-mx-list-header
  {
    padding: 8px 12px;
  }

  .rf-mx-list-header:has(.rf-mx-open-form) h2
  {
    display: none;
  }

  .rf-mx-open-form
  {
    flex: 1;
  }

  .rf-mx-open-form .rf-search-wrap
  {
    width: auto;
    flex: 1;
  }

  .rf-mx-detail-body
  {
    padding: 12px 16px 32px;
  }
}