:root {
  --bg: #15181e;
  --surface: #1e232c;
  --surface2: #2a3140;
  --border: #3a4252;
  --text: #e8eaed;
  --muted: #8b95a8;
  --accent: #3d8bfd;
  --accent-hover: #5c9fff;
  --ok: #2f9e44;
  --ok-hover: #37b24d;
  --warn: #e67700;
  --danger: #e03131;
  --lag: #fab005;
  --ahead: #51cf66;
  --radius: 6px;
  --font: "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.35;
  font-size: 14px;
}

/* Shell: flex column — board ocupa TODO o restante da tela */
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app > .top,
.app > .share-bar,
.app > .setup-bar,
.app > .next-bar {
  flex: 0 0 auto;
}

/* main: preenche o resto (height:0 + flex:1 evita faixinhas) */
.app > .board-simple {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
}

/* ─── Multi-admin bar (fina) ──────────────────────────── */
.badge-online {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #a5d8ff;
  background: rgba(61, 139, 253, 0.2);
  border: 1px solid rgba(61, 139, 253, 0.45);
  border-radius: 3px;
}

.share-bar {
  padding: 0.3rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: #1a1f28;
}

.share-status-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-height: 1.75rem;
}

.sync-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
}

.sync-dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(47, 158, 68, 0.25);
}

.sync-dot.offline {
  background: var(--muted);
}

.sync-dot.error {
  background: var(--danger);
}

.sync-status {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.3;
}

.share-room-inline {
  flex: 0 0 auto;
}

.share-room-inline input {
  width: 7.5rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 0 0 auto;
}

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

/* ─── Próximo duelo ───────────────────────────────────── */
.next-bar {
  padding: 0.4rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  /* altura estável: 1 linha de cards, não empurra o board */
  min-height: 2.65rem;
  overflow: hidden;
}

.next-bar.hidden {
  display: none;
}

.next-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.next-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.next-pairs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* scroll fino se faltar espaço; não quebra altura */
  scrollbar-width: thin;
  padding-bottom: 1px;
}

.next-card {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.45rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  white-space: nowrap;
}

.next-card .pair-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.next-card .pair-meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
}

/* agora: só um traço de destaque */
.next-card-main {
  border-color: var(--border);
  box-shadow: inset 3px 0 0 var(--lag);
}

.next-card-main .pair-name {
  font-size: 0.92rem;
}

.next-card-soft {
  opacity: 0.92;
}

.next-card-soft .pair-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.next-card-soft .pair-tag {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  margin-right: 0.15rem;
}

.next-card .btn-ok {
  padding: 0.22rem 0.5rem;
  font-size: 0.78rem;
}

.next-card .btn-ghost {
  padding: 0.18rem 0.4rem;
  font-size: 0.75rem;
}

/* destaque nas tabelas */
tr.row-suggest td {
  background: rgba(250, 176, 5, 0.28) !important;
  box-shadow: inset 3px 0 0 #fcc419;
}

/* #2 #3 #4 da sequência — laranja (diferente do amarelo "agora") */
tr.row-suggest-soft td {
  background: rgba(255, 146, 43, 0.18) !important;
  box-shadow: inset 3px 0 0 #ff922b;
}

tr.row-lag td {
  background: rgba(224, 49, 49, 0.12) !important;
}

.badge-next {
  background: rgba(250, 176, 5, 0.3);
  color: #ffd43b;
  border: 1px solid #fcc419;
}

.badge-queue {
  background: rgba(255, 146, 43, 0.25);
  color: #ffc078;
  border: 1px solid #ff922b;
}

.badge-lag {
  background: rgba(224, 49, 49, 0.22);
  color: #ff8787;
}

/* ─── Top ─────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.top-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.top h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.event-name {
  flex: 1;
  max-width: 280px;
  min-width: 120px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}

.top-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ─── Setup ───────────────────────────────────────────── */
.setup-bar {
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: #1a1f28;
}

.guild-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.guild-add input[type="text"] {
  width: 180px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}

.guild-chips {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 3rem;
  overflow-y: auto;
}

.guild-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem 0.2rem 0.55rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.guild-chips .btn-tiny {
  padding: 0 0.3rem;
  font-size: 0.9rem;
  line-height: 1.2;
  border: none;
  background: transparent;
  color: #ff8787;
  cursor: pointer;
}

.guild-chips .btn-tiny:hover {
  color: #fff;
}

/* ─── Board: 2 colunas ────────────────────────────────── */
.board-simple {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.75rem;
  overflow: hidden;
  align-content: stretch;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.panel-load {
  border-color: rgba(61, 139, 253, 0.35);
  background: linear-gradient(
    180deg,
    rgba(61, 139, 253, 0.08) 0%,
    var(--surface) 48px
  );
}

/* lista de guilds: cresce; "fora" fica embaixo com altura própria */
.panel-load > .table-wrap.grow {
  flex: 1 1 0;
  min-height: 8rem;
}

/* Fora há quantos duelos — só visível com matches; nunca some no nothing */
.sit-panel {
  flex: 0 0 auto;
  height: auto;
  max-height: 42%;
  min-height: 9rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.sit-panel.hidden {
  display: none !important;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sit-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.sit-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.sit-panel-hint {
  font-size: 0.72rem;
  text-align: right;
  line-height: 1.25;
}

.sit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.sit-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.4rem 0.55rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
}

.sit-list li.sit-now {
  box-shadow: inset 3px 0 0 var(--lag);
}

.sit-list li.sit-long {
  box-shadow: inset 3px 0 0 rgba(255, 146, 43, 0.75);
}

.sit-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sit-meta {
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 1.6rem;
  text-align: right;
}

.sit-list li.sit-now .sit-meta {
  color: var(--lag);
}

.sit-list li.sit-long .sit-meta {
  color: #ffc078;
}

.panel-matches {
  border-color: rgba(47, 158, 68, 0.3);
  background: linear-gradient(
    180deg,
    rgba(47, 158, 68, 0.07) 0%,
    var(--surface) 48px
  );
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.summary-inline {
  font-size: 0.78rem;
  max-width: 70%;
  text-align: right;
  line-height: 1.3;
}

.muted {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ─── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: #384152;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-ok {
  background: var(--ok);
  border-color: transparent;
  color: #fff;
}

.btn-ok:hover:not(:disabled) {
  background: var(--ok-hover);
}

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: #ff8787;
}

.btn-ghost {
  background: transparent;
  padding: 0.3rem 0.55rem;
}

.file-btn {
  cursor: pointer;
}

.btn-tiny {
  padding: 0.22rem 0.5rem;
  font-size: 0.8rem;
}

/* ─── Tables ──────────────────────────────────────────── */
.table-wrap {
  overflow: auto;
  min-height: 0;
  /* evita saltar lateral quando a barra de rolagem aparece/some */
  scrollbar-gutter: stable;
}

.table-wrap.grow {
  flex: 1 1 0;
  min-height: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

/* pares: colunas travadas — +1 sempre no mesmo X */
#match-table {
  table-layout: fixed;
}

#match-table .col-pair {
  width: auto;
}

#match-table .col-times {
  width: 3rem;
}

#match-table .col-actions {
  width: 6.75rem;
}

#match-table th:nth-child(2),
#match-table td.times-cell {
  text-align: center;
  width: 3rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#match-table th:nth-child(3),
#match-table td.actions {
  width: 6.75rem;
  padding-left: 0.25rem;
  padding-right: 0.35rem;
  text-align: right;
}

#match-table td.pair-cell {
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

#match-table .pair-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

#match-table .pair-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* reserva sempre o espaço do badge (agora / #2) — não empurra × nem Ações */
#match-table .pair-badge-slot {
  flex: 0 0 3.2rem;
  width: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

#match-table .pair-badge-slot .badge {
  margin: 0;
}

.panel-matches .table-wrap {
  flex: 1 1 0;
  min-height: 8rem;
  overflow-x: hidden;
  overflow-y: auto;
}

th,
td {
  text-align: left;
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  background: #252b36;
  z-index: 1;
}

td.num,
.times-cell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 3.2rem;
}

tr.row-behind td {
  background: rgba(250, 176, 5, 0.1);
}

tr.row-ok td {
  background: rgba(47, 158, 68, 0.08);
}

tr.row-ahead td {
  background: rgba(190, 75, 219, 0.1);
}

/* 1 tom por contagem de duelos (módulo 8) — contraste entre 6× e 7× etc. */
tr.row-plays-0 td {
  background: rgba(61, 139, 253, 0.14); /* 0× azul */
}
tr.row-plays-1 td {
  background: rgba(47, 158, 68, 0.1); /* 1× verde suave */
}
tr.row-plays-2 td {
  background: rgba(190, 75, 219, 0.12); /* 2× roxo */
}
tr.row-plays-3 td {
  background: rgba(32, 201, 151, 0.12); /* 3× teal */
}
tr.row-plays-4 td {
  background: rgba(102, 126, 234, 0.14); /* 4× índigo */
}
tr.row-plays-5 td {
  background: rgba(240, 101, 149, 0.12); /* 5× rosa */
}
tr.row-plays-6 td {
  background: rgba(153, 128, 250, 0.14); /* 6× lilás */
}
tr.row-plays-7 td {
  background: rgba(34, 184, 207, 0.13); /* 7× ciano */
}

tr:hover td {
  filter: brightness(1.08);
}

.badge {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-ok {
  background: rgba(47, 158, 68, 0.22);
  color: var(--ahead);
}

.badge-warn {
  background: rgba(250, 176, 5, 0.2);
  color: var(--lag);
}

.badge-pending {
  background: rgba(61, 139, 253, 0.18);
  color: #74c0fc;
}

.badge-play {
  background: rgba(190, 75, 219, 0.2);
  color: #e599f7;
}

.actions {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

/* botões com largura fixa — o “+1” não muda de tamanho entre linhas */
#match-table .actions .btn-tiny {
  min-width: 2.55rem;
  width: 2.55rem;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.filters.tight {
  display: flex;
  gap: 0.35rem;
}

.filters.tight select {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.alert {
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  background: rgba(230, 119, 0, 0.15);
  border: 1px solid var(--warn);
  color: #ffc078;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.alert.hidden {
  display: none;
}

input:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

@media (max-width: 800px) {
  html,
  body {
    overflow: auto;
    height: auto;
  }

  .app {
    height: auto;
    max-height: none;
    min-height: 100vh;
  }

  .board-simple {
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 70vh;
  }

  .panel {
    height: auto;
    max-height: none;
    min-height: 40vh;
  }

  .table-wrap.grow {
    max-height: 50vh;
  }
}