/* Pairing dialogs: keep text and controls readable on light surfaces. */
.modal form,
#localAgentDialog {
  color: var(--ink);
  background: #fffefa;
  border-radius: 18px;
  box-shadow: 0 30px 100px #00170d80;
}

.modal form .modal-head h2,
.modal form .card-kicker,
.modal form label,
#localAgentDialog .modal-head h2,
#localAgentDialog .card-kicker,
#localAgentDialog label {
  color: var(--ink);
}

.modal form .modal-copy,
.modal form details,
#localAgentDialog .modal-copy,
#localAgentDialog details {
  color: #526158;
}

.modal form summary,
#localAgentDialog summary {
  color: var(--forest);
}

.modal form input[readonly],
#localAgentDialog input[readonly] {
  background: #f1f5f0;
  color: #18251f;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .02em;
}

.modal form .secondary,
#localAgentDialog .secondary {
  background: #fff;
  color: var(--forest-dark);
}

#localAgentDialog .icon-button {
  color: var(--muted);
}

/* Leader dashboard navigation: keep the long account and settlement tables
   on separate screens instead of stacking every section in one long page. */
.leader-menu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 254, 250, .82);
}

.leader-menu button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.leader-menu button:hover {
  background: #eef5ef;
  color: var(--forest-dark);
}

.leader-menu button.active {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 5px 12px #0e5e4d26;
}

.leader-menu button:focus-visible {
  outline: 3px solid #b7dfc5;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .leader-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leader-menu button {
    width: 100%;
    padding-inline: 8px;
  }
}