/* 出團與報名板 —— 沿用 style.css 的色彩變數 */

/* ---------------------------------------------------------------- 狀態標記 */

.chip {
  font-family: var(--f-label);
  text-transform: uppercase;
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip.open   { color: #7cc5a0; }
.chip.closed { color: var(--ink-3); }
.chip.lock   { color: var(--gold); }
.chip.cancel { color: #e8907c; }

.statusline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}
.statusline .tally {
  font-family: var(--f-num);
  font-size: 17px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.mine {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- 出團列表 */

.eventgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.eventcard {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 16px 18px;
  color: var(--ink);
}
.eventcard:hover { text-decoration: none; border-color: var(--gold-dim); }
.eventcard.cancelled { opacity: 0.5; }

.ec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ec-head h2 { font-family: var(--f-display); font-size: 19px; margin: 0; flex: 1; }

.ec-time { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }

.ec-bar {
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ec-bar .fill { display: block; height: 100%; background: var(--gold-dim); }

.ec-meta { font-family: var(--f-num); margin: 0; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 開團表單 */

.eventform { max-width: 760px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 20px;
}

.field input[type="datetime-local"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 3px;
  font: inherit;
  font-size: 15px;
  color-scheme: dark;
}
.field input[type="datetime-local"]:focus { outline: none; border-color: var(--gold-dim); }

/* 分隊（開團時可增減，編輯時只是標題） */

.teamtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.teamtab, .teamadd {
  font: inherit;
  font-size: 14px;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.teamtab:hover, .teamadd:hover { color: var(--ink); }
.teamtab.on { color: var(--gold); border-color: var(--gold-dim); background: var(--surface-2); }
.teamtab.over, .teamtab.over em { color: #e8907c; }
.teamtab em {
  font-family: var(--f-num);
  font-style: normal;
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.teamtab.on em { color: var(--gold-dim); }
.teamadd { border-style: dashed; border-color: var(--line); }
.teamadd:hover { border-color: var(--gold-dim); }

.teambox {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.teambox.off { display: none; }
.teambox.over { border-color: #6d3a30; }
.teambox.frozen + .teambox.frozen { margin-top: 12px; }

.teamhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.teamhead .teamname {
  font: inherit;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  /* 隊名通常兩三個字，不必吃掉整條 —— 統計與刪除鈕靠右才好按 */
  flex: 0 1 240px;
  min-width: 0;
  margin-right: auto;
  background: var(--ground);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 3px;
}
.teamhead .teamname:focus { outline: none; border-color: var(--gold-dim); }
.teamhead .teamname.static { background: none; border: none; padding: 0; }

/* 外框已經由 .teambox 畫了，裡面的表格不要再套一層 */
.teambox .tablewrap { border: none; }

.teamhead .teamtally {
  font-family: var(--f-num);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.teambox.over .teamtally, .teambox.over .teamtally b { color: #e8907c; }

.teamhead .teamdel {
  font: inherit;
  font-size: 12.5px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-3);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.teamhead .teamdel:hover { color: #e8907c; border-color: #6d3a30; }

/* 角色分布 —— 一角色一格，左緣的色條是輔助識別，角色名稱本來就寫在格子上 */

.comp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.comp .cc {
  flex: 1 1 auto;
  min-width: 104px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--role);
  border-radius: 4px;
}

.comp .cc-label {
  font-family: var(--f-label);
  flex: 1;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

.comp .cc-n {
  font-family: var(--f-num);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.comp .cc-cap {
  font-family: var(--f-num);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 判不出角色的那格不是角色，別讓它看起來像第六種 */
.comp .cc.none {
  border-left-color: var(--line);
  background: none;
  flex: 0 0 auto;
}
.comp .cc.none .cc-n { font-size: 15px; color: var(--ink-3); }

@media (max-width: 720px) {
  .comp .cc { flex: 1 1 44%; }
}

/* 報名板上的分隊分隔 */

.teamlabel {
  font-family: var(--f-display);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  padding: 0 2px 6px;
}
.specs + .teamlabel { padding-top: 18px; }
.teamlabel em {
  font-family: var(--f-num);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

table.specpick { border-collapse: collapse; width: 100%; }
.specpick td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.specpick tr:last-child td { border-bottom: none; }
.specpick tr.picked { background: var(--surface); }

.specpick .g { width: 1%; padding-right: 2px; }
.specpick .grip {
  cursor: grab;
  color: var(--ink-3);
  font-size: 15px;
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  padding: 4px 3px;
}
.specpick .grip:hover { color: var(--ink); }
.specpick tr.dragging { opacity: .45; background: var(--surface); }
.specpick .qty-fixed { font-family: var(--f-num); color: var(--ink-2); white-space: nowrap; }

.specpick .q { width: 1%; }
.specpick .q input {
  font-family: var(--f-num);
  width: 62px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 3px;
  font: inherit;
  font-size: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.specpick .q input:focus { outline: none; border-color: var(--gold-dim); }

.specpick .n { white-space: nowrap; }
.specpick .bname { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; }
.specpick .bowner { font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.specpick .i { text-align: right; }

/* ---------------------------------------------------------------- 報名板
   一個規格一列、玩家一行一個。四欄寬度固定（最後一欄吃掉剩餘），
   每一列的欄位邊界都落在同一條垂直線上。 */

.board {
  --col-roster: 210px;
  --col-name:   126px;
  --col-gear:   324px;
  --col-gap:    18px;
}

.boardhead, .spec {
  display: grid;
  grid-template-columns:
    var(--col-roster) var(--col-name) var(--col-gear) minmax(120px, 1fr);
  gap: var(--col-gap);
}

.boardhead {
  font-family: var(--f-label);
  text-transform: uppercase;
  /* .specs 有 1px 外框，內容因此往內縮 1px；標題列沒有框，補上才對得齊 */
  padding: 0 17px 8px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.specs {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.spec {
  align-items: start;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.specs .spec:last-child { border-bottom: none; }

.spec.full { background: var(--surface-2); }
.spec.over { background: #251b19; }

.spec.bench {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* 欄一：人數 ＋ 名單（一行一個） */

.col-roster {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.col-roster .count {
  font-family: var(--f-num);
  flex: none;
  width: 38px;
  padding-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.spec.full .count { color: var(--gold); }
.spec.over .count { color: #e8907c; }

/* 欄二：流派 */

.col-name {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 3px;
  min-width: 0;
  overflow-wrap: break-word;
}

/* 欄三：裝備 */

.col-gear {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

/* 欄四：備註 */

.col-note {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding-top: 4px;
  min-width: 0;
  overflow-wrap: break-word;
}

.freehand { font-size: 12px; color: var(--ink-3); padding-top: 6px; }

/* 名單：每人一行，空槽直接就是報名入口 */

ul.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
  min-width: 0;
  border-radius: 4px;
  transition: background 0.12s;
}
ul.people.over-drop { background: var(--ground); outline: 1px dashed var(--gold-dim); }
ul.people.no-drop   { outline: 1px dashed #6d3a30; }

/* 空的候補區也要有可以拖放的面積 —— 沒有這個保底高度，
   ul 會塌成 0px，隊長就沒辦法把人拉下候補 */
.spec.bench ul.people { min-height: 30px; }

/* 支援 :has 的瀏覽器再多給管理者一個提示（提示本身也撐出面積） */
.board[data-manage="1"] .spec.bench ul.people:not(:has(li))::after {
  content: '拖曳到這裡移入候補';
  color: var(--ink-3);
  font-size: 12.5px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 1px 12px;
  line-height: 1.6;
  align-self: flex-start;
}

ul.people > li {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-height: 24px;
}

ul.people > li.who {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 5px 1px 10px;
  font-size: 12.5px;
  line-height: 1.6;
}
.spec.full ul.people > li.who { background: var(--surface); }
ul.people > li.who[draggable="true"] { cursor: grab; }
ul.people > li.who.dragging { opacity: 0.4; }
ul.people > li.who.me { border-color: var(--gold-dim); color: var(--gold); }

ul.people .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

ul.people .kick {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
ul.people .kick:hover { color: #e8907c; }

/* 空槽 */

ul.people > li.open form { margin: 0; }

ul.people .join {
  background: transparent;
  border: 1px dashed var(--gold-dim);
  color: var(--gold);
  border-radius: 999px;
  padding: 1px 12px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  cursor: pointer;
}
ul.people .join:hover { background: var(--surface-2); border-style: solid; }

ul.people .vacant {
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 1px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* 窄畫面就沒必要硬撐四欄，改成堆疊 */
@media (max-width: 900px) {
  .boardhead { display: none; }
  .spec {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }
  .col-name { order: -1; padding-top: 0; font-size: 15px; }
  .col-note:empty, .col-gear:empty { display: none; }
}