/* menu.css
   Styles used only by the menu pages (Profile / Characters / Games / Users; the Rules tab has rules.css).
   Load after core.css. */

/* ---------------------------------------------------------------- */
/* Details panel (Characters and Games tabs)                          */
/* ---------------------------------------------------------------- */
.details-panel {
  display: none;
}

.details-panel.is-visible {
  display: block;
}

.details-field {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.details-field:last-of-type {
  border-bottom: none;
}

.details-field .label {
  display: block;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.details-value {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

.details-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 16px;
}

.details-section {
  padding: 0 16px 16px;
}

/* ---------------------------------------------------------------- */
/* Active invites list (inside the Details panel)                     */
/* ---------------------------------------------------------------- */
.invite-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-data);
  font-size: 13px;
}

.invite-row:last-of-type {
  border-bottom: none;
}

.invite-code {
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.invite-expires {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* My Games (games-playing / games-running lists)                     */
/* ---------------------------------------------------------------- */
.game-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.game-row:last-of-type {
  border-bottom: none;
}

.game-row:hover {
  background: var(--panel-bg-soft);
}

.game-row.selected {
  background: var(--panel-bg-soft);
  border-left-color: var(--cyan);
}

.game-name {
  flex: 1;
}

/* My Characters: one group per game, headed by the game's name. */
.character-group + .character-group {
  border-top: 1px solid var(--border-soft);
}

.character-group-head {
  padding: 12px 16px 6px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.menu-empty {
  padding: 14px 16px;
  margin: 0;
  font-family: var(--font-data);
  font-size: 13px;
  font-style: italic;
  color: var(--text-faint);
}

.menu-section-actions {
  padding: 12px 16px 16px;
}

/* Unlike .add-row-btn, this action is always available - it isn't
   gated behind body.edit-mode, since these menu screens have no
   separate edit mode of their own. */
.menu-action-btn {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  background: transparent;
  border: 1px dashed var(--cyan-dim);
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.menu-action-btn:hover {
  border-color: var(--cyan);
  background: rgba(56, 230, 207, 0.08);
}

.menu-action-btn-danger {
  color: var(--danger);
  border-color: var(--danger-dim);
}

.menu-action-btn-danger:hover {
  border-color: var(--danger);
  background: rgba(255, 107, 107, 0.08);
}

.details-value[contenteditable='true'] {
  background: var(--panel-bg-soft);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--radius);
  cursor: text;
}

.details-value[contenteditable='true']:focus {
  box-shadow: inset 0 0 0 1px var(--cyan);
  outline: none;
}

/* ---------------------------------------------------------------- */
/* Unified menu page: tab row in the top bar                          */
/* ---------------------------------------------------------------- */
.menu-tabs {
  display: flex;
  flex: 1 1 0;
  min-width: 0; /* lets the row shrink and wrap rather than push the X off the page */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Pinned to the top while the page scrolls. (The base .top-bar is sticky but has no
   offset; the sheet's own bar is deliberately left to scroll away.) */
.menu-bar {
  top: 0;
}

/* With the tabs on two lines the X stays in the top right corner. */
.menu-tabs ~ .top-bar-right {
  align-self: flex-start;
}

.menu-tab {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.menu-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

.menu-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(224, 34, 127, 0.08);
  text-shadow: 0 0 14px var(--accent-glow);
}

@media (max-width: 520px) {
  /* The tab text scales with the room available so all of the tabs (five for an admin) stay
     on one line: everything about them is in em, so size, spacing and padding shrink together.
     The row needs about 23.5 times the font size in width, and the 82px is what the header
     takes up besides the tabs (its padding, the X and the gaps). It tops out at 14px (reached
     at about 410px wide); below about 330px the row falls back to wrapping. */
  .menu-tabs {
    font-size: clamp(11px, calc((100vw - 82px) / 23.5), 14px);
    gap: 0.35em;
  }

  .menu-tab {
    font-size: 1em;
    letter-spacing: 0.03em;
    padding: 0.3em 0.35em;
  }

  /* A little less margin in the header too, to give the tabs room. */
  .menu-bar {
    gap: 8px;
    padding: 12px 12px;
  }

  .menu-bar .top-bar-right {
    gap: 0;
  }

  .menu-bar .account-dropdown {
    margin-left: 0;
  }

  .menu-bar #toast:not(:empty) {
    margin-right: 10px;
  }
}

/* ---------------------------------------------------------------- */
/* Games tab: current players list, section action rows               */
/* ---------------------------------------------------------------- */
.player-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.player-row:last-of-type {
  border-bottom: none;
}

.player-row:hover,
.player-row.selected {
  background: var(--panel-bg-soft);
}

.player-row.selected {
  border-left-color: var(--cyan);
}

.section-actions {
  padding-top: 12px;
}

.menu-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.menu-action-btn:disabled:hover {
  border-color: var(--cyan-dim);
  background: transparent;
}

.menu-action-btn-danger:disabled:hover {
  border-color: var(--danger-dim);
}

/* Characters menu: XP management */
.char-xp-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}

.char-xp-amount {
  width: 72px;
  padding: 6px 8px;
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--text);
  background: var(--panel-bg-soft);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
}

#char-xp-section[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- */
/* Profile tab: username / email / password                           */
/* ---------------------------------------------------------------- */
.profile-section {
  padding-top: 14px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.profile-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--text);
  background: var(--panel-bg-soft);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
  outline: none;
}

.profile-input:focus {
  border-color: var(--cyan);
}

/* Shown as plain text until its Change button is pressed. */
.profile-input[readonly] {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  cursor: default;
}

.profile-actions {
  display: flex;
  gap: 8px;
}

.profile-status {
  min-height: 1.4em;
  margin: 0;
  padding: 0 16px 16px;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--cyan);
}

/* ---------------------------------------------------------------- */
/* Users tab (admins only)                                            */
/* ---------------------------------------------------------------- */
.user-role-tag {
  margin-left: 10px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.users-type-status {
  padding: 8px 0 0;
}